Posts Tagged ‘design’
Design Instruct Week on Six Revisions – Six Revisions
|
Design Instruct Week is a weeklong celebration of our newly launched site, Design Instruct. This week on Six Revisions will cover topics that deal with running websites and design, written by the founders/editors of Design Instruct and Six Revisions. Be sure to check out the Design Instruct Week Twitter Giveaway, which gives out different prizes every day of Design Instruct Week.
Design Instruct Week Twitter GiveawayWe’ll start off Design Instruct week with an announcement: top notch companies that support the design industry have signed on to give away amazing products and services on our Twitter-based giveaway.
For 7 days—from March 1 through March 7, 2010—we’ll have different prizes to hand out. The best way to make sure that you don’t miss out is to follow Design Instruct on Twitter and to read this post on Design Instruct. Prizes such as the Apple iPad, subscriptions to stock libraries, and more, will be given away. You just have to stay tuned to find out what the prizes will be! |
Making Your Code as Beautiful as the Design Itself
|
Regular people can’t see code, nor do they care to see it or what it looks like. It’s precisely this reason that there’s so much ugly code in the web world today. People don’t see it so developers don’t believe that clean code is important, but it is. It’s quite rare to find a clean coded site, even from huge companies who should have the budget to pay for a good developer. However, it’s just as important to have beautiful code as it is to have a beautiful design. Why Should It Matter?Most of the time, messy code works just as well as clean code. So why should it matter if it’s pretty or not?
Beautify Your CSSThere are several ways that I’ll show you how to organize your CSS. Of course, beauty is in the eye of the beholder, so you may not find that what works for me, works for you. Experiment with a few different ways you can organize your code to find what works for you.
|
This Weeks Twitter Design News Roundup N.25
|
A couple of days ago our follower count crossed over the 10,000 mark – which is simply awesome! A little flattering, but awesome all the same. Thanks to everyone that follows us. Anyway this is our weekly Twitter Design News Round-Up, a collection of fresh design related resources that I have shared via Twitter in the past week. Just in case you are not one of my Twitter followers, click here: twitter.com/speckyboy, and you’ll be kept up to date. As always, if you have any cool links that you would like to share, do not hesitate to share them here: Submit News. Thanks to everyone that has been emailing. A new global visual language for the BBC's digital services
Once in a while there is a design article published that simply blows you away – and this is one of them! Anyway, this article from the BBCs Internet Blog describes how after ten fast growing years online they decided to embark on an ambitious project, called Global Visual Language 2.0, with the aim of unifying the visual and interaction design of bbc.co.uk and its mobile website. The Definitive Guide To Styling Web Links
Hyperlinks (or links) connect Web pages. They are what make the Web work, enabling us to travel from one page to the next at the click of a button. As Web Standardistas put it, “without hypertext links the Web wouldn’t be the Web, it would simply be a collection of separate, unconnected pages.”. So without links, we’d be lost. We look for them on the page when we want to venture further. Sure, we pause to read a bit, but inevitably we end up clicking a link of some sort. 10 Things I Hate About Clients!
How to Build Web Cred as a Designer
Credibility on the web is not easily earned. To be a successful designer, you need people to recognize you as skilled, competent and professional. When someone needs something designed they turn to you because you’ve proven yourself to them as capable and reliable. That’s web cred! The ABC’s of a good design proposal
50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms)
Pros And Cons Of 3 Popular CSS Meta Frameworks
A lot of perennial attention is given to the use and evangelism of CSS frameworks. By “CSS framework,” we don’t mean Blueprint or 960, but rather SASS, xCSS, and Less. These are also referred to as CSS “metaframeworks,” but the distinction between them and Blueprint lies in the distinction between form and function. The Sign Scene
|
Create a Grungy, Translucent Web Portfolio Design
|
Not only have watercolor brush strokes become a popular trend in modern web design, but so have advanced layers of transparency (or what I call, translucence). The new Envato design has received a lot of kudos for using this effect, and this tutorial will show you how to create a similar effect, while combining it with other popular web trends.
Final Image PreviewTake a look at the image we’ll be creating. Want access to the full PSD files and downloadable copies of every tutorial, including this one? Join Psd Plus for just $9/month. You can view the final image preview below. Tutorial Details
 Step 1 – Set up the TemplateLet’s set up our document. I tend to create my sites with a fixed 960px width and variable height. For this tutorial, I chose a height of 800px to ensure we have enough room for all of the content sections we would like to include. Creating the original document at the exact size you want the site to be makes it easier for creating the guides.  Next, we’ll set up our guides. Drag guidelines from the document rulers to the four edges of your document.  Now we need to allocate some space for the background we’ll create. Go to Image > Canvas Size and expand the document to 1100 pixels by 1000 pixels. This should give us plenty of area to fill in our unique background. Fill the bottom layer with white (Shift + F5). Rename this layer as “background.” Your document should now look like the image below.  Step 2 – Create the Gradient BackgroundRight-click the “background” layer, and choose Blending Options. We’ll be adding a Gradient Overlay to our “background” layer. I chose a three color gradient with some blues and tans, however you can essentially choose any colors you want. The beauty of using the Blending Options for the background is that at any time, you can easily switch out colors and adjust the gradient to taste.  Your document should now look like this:  You may want to skip this step, however I feel the sharp gradient is a little too glossy for this design. We’ll add some noise to tone it down a bit. Create a New Layer. Rename this layer “noise.” Next, fill the layer with white (Edit > Fill). Once you have the layer filled with white, we need to add some noise by applying Filter > Noise > Add Noise. Set the Amount to 400%, with a Uniform Distribution and non-Monochromatic. All of the colors of the noise will give us much more depth in our background.  Set the “noise” layer to Multiply, and set the Opacity to 5%. This should give us just enough graininess to tone down the gradient. Step 3 – Add the Texture (Brush Strokes) to the BackgroundFirst, you’ll need to download some Brush Stroke brushes, if you don’t already have them. Here is some I’ve used in the past: “Brush Stroke.”  Create a new layer, above your “background” and “noise” layers. Rename this layer to “brush1″ (we’ll be creating multiple layers like this). Set this layer to Multiply. Choose a warm foreground color (to offset the cool tones) in our blue gradient background. I chose a warm brown: #996726. Select the brush you wish to draw, and place it in the top left of the document, ensuring that the brush stroke is outside the bounds of your guidelines (we want the background to expand outside). Adjust the layer Opacity to 50% (so the graininess shows through). Repeat the previous two steps for multiple brushes to suit your taste. Your background should now look like the image shown below.  Congratulations, your custom, unique background is complete. Since you placed the brushes randomly, it will differentiate you from those designs that bought a similar stock background. Step 4 – Create the Inner Opaque/Translucent ContainerFirst, we’ll need to grab the Rounded Rectangle Tool, and set the radius to 20px. Above all of your background layers (brushes + noise + gradient), drag and draw a rounded rectangle within the original guidelines we set up. Your rectangle should be 960px by 800px. Rename this layer “container,” and Right-click the layer, and select Rasterize Layer (we’ll be making some changes to this layer later, so we might as well get this out of the way now).  To make the “container” layer look opaque, we’ll need to do a few things:
    Once you’ve set all the layer styles, your “container” layer should look like this:  Step 5 – Set Up the Inner Padding GuidesTo ensure that we stick with consistent padding on the “container” layer (assuming we don’t want to count our pixels each time we place an element), let’s add guides at 40px inside our original guide box.  Step 6 – A Cutout NavigationAs you saw in the Final Preview, we want to make the navigation look like it is sunken or cut out of the “container” layer. To do this, we’ll just remove some of the “container” layer and let the Layer Style’s do their magic. To create the selection for the cutout, we’ll create a new rectangular shape in the space that we want the navigation cutout to be. Use a radius of 10px here (which is half the radius of the “container” layer), to ensure that the corner has consistent spacing where it is rounded. If necessary, move the shape to the top right of your inner padding guide lines. Once you have the layer in place, Command-click the layer in the Layer’s Palette so it is selected. Choose the “container” layer and hit Delete. You can now hide your 10px rounded rectangle for the navigation, and your “container” layer will now show a cutout as seen below.  Notice how smooth the rounded corners are. If we would have just selected a square area and rounded the selection, the cutout corners would have looked very choppy. Also, isn’t it nice how the Layer Style’s are automatically applied to the layer, and all of the beveling and shadows we added look great. Now we need some text. I chose Rockwell as my font (it comes standard with MS Office, but can also be purchased). Evenly space your navigation elements within the cutout as shown.  We want to give the text an etched in stone effect, and to do this, we add a drop shadow to the text (we could also add an inner shadow, however it makes the text appear thinner than it actually is). Here are the drop shadow settings I generally use.  Step 7 – Active Navigation Woven through the PageTo achieve the desired effect, we’ll create a new layer just below the text we added for the navigation. Rename this layer “active nav.” Fill this selection with any color (it doesn’t matter).  Next, we’ll need to add some Layer Styles to the “active nav” layer. I’ve provided them below (you’ll need a Drop Shadow, Gradient Overlay, Stroke, and Inner Glow).  Duplicate your “active nav” layer (Command + J), and flatten all of the layer styles. Rename this layer “active nav flattened.” We’re going to be applying some crops to this layer, and we don’t want the layer styles any longer. Use your Selection Tool to delete the Stroke and Inner Glow from the top and bottom of the “active nav flattened” layer.  Now we need to add the shadows to make the “active nav” layer look like it’s woven through the “container” layer. We’ll create these shadows using the Ellipse Tool. Create a black ellipse that is 20px wider than the width of the “active nav flattened” layer and roughly 5px tall. Center your ellipse on the top edge of the “active nav flattened” layer. Right-click the layer and select Rasterize Layer. Rename this layer to “top active shadow.”  We need to blur the ellipse a bit, go to Filter > Blur > Gaussian Blur and apply with with a radius of 2px. Now that the ellipse looks more like a shadow, we’ll go ahead and delete the top 50% of the shadow.  Adjust the Opacity of the “top active shadow” layer to 75%. The top shadow is done. To create the bottom shadow, duplicate the layer (Command + J), apply Edit > Transform > Flip Vertical, and move the shadow to the bottom of the “active nav flattened layer.”  Step 8 – Finish Out the Header With a LogoBefore we get to the logo, let’s finish out our header a bit. First we’ll add a couple more guides. Draw a horizontal guide 40px below the bottom of the navigation cutout as shown.  We’re going to create our separating line, which will give the impression that the “container” layer has an etching or is folded at this spot. To create this effect, draw a 1px heigh horizontal line on a new layer running the width of the “container” layer. Fill your horizontal line with a dark green (I chose mine from the background). Rename this layer “separating line.” To get the etching feel, duplicate the “separating line” layer and fill this layer with white. Move this layer 1px down so the top of it touches the original “separating line” layer.  Now we need to add our logo. I’m not much of a logo designer, so I just chose a cool font (Gill Sans) and wrote some big text in the top left corner. Just as we did the cutout for the navigation, make a selection of the logo text and then delete it from the “container” layer. Once again the Layer Styles will adjust to the new shape, and update to it.  The asterisk was done using the exact same technique as the active navigation element, to make it appear like it is sticking out of the “container” layer. Step 9 – Featured Portfolio ItemsOnce again, we’re going to use the same cutout technique that we used for the navigation section. Create a rounded rectangle with a border radius of 10px. Make sure to allow for 40px spacing on all sides (we created the guides earlier to help with this).  Command-click the rounded rectangle layer to select it, then select the “container” layer and hit Delete. You can remove the rounded rectangle as we won’t use it any longer. We then need to create the arrows on each side, so you can have multiple portfolio items on the front page and toggle through them in a sort of slideshow. To do this, create a 40px diameter circle with the Shape Tool. Move the circle in place on the left side, centering it on the edge of the cutout.  Duplicate the circle for the other side, and once again center it on the other edge of the cutout (horizontally and vertically). ImportantSince we aren’t working with vector masks here (and our Fill is set to 0% on the “container” layer), we need to momentarily adjust this to ensure we can add on to the “container” layer. So, let’s set the Fill of the “container” layer to 100%. Now Merge Down (Command + E) both of the circles we created for the arrows into the “container” layer. Once you have merged down, you can then set the Fill of the “container” layer back to 0%. Here is your desired effect:  Notice how the two circles have now become part of the “container” layer. Next we’ll need to add some arrows. You could easily create them using brackets, however I chose to create my own. Create a rounded rectangle with a Border Radius of 3px, Width of 20px, Height of 6px; and place it right above where you want the arrow. Transform and Rotate (Command + T) the rounded rectangle by 45 degrees counter-clockwise so it is tilted. This is how we will make the point to the arrow. Duplicate the rounded rectangle (Command + J), and Edit > Transform > Flip Vertical. Move the layer in place, such that the left corners are lined up producing a bracket. In the Layer Palette, select both rounded rectangles and merge the layers together (Command + E). Rename the layer “left arrow.” Here is how your arrow should look:  We need to add some Layer Styles to the arrow to make it fit with the rest of the design as follows:
Duplicate the “left arrow” layer (Command + J), and Edit > Transform > Flip Horizontal. Rename this layer “right arrow,” and move it to the right side of the cutout. One last thing we need to add for our featured portfolio items area is a shadow to give it some depth. Add a transparent to black gradient at the bottom of the cutout as shown.  To trim off any excess gradient outside of the cutout, simply Command + Click the “container” layer and hit Delete. We’ll be placing our screenshots below this layer to give the illusion of depth. Step 10 – Adding a Portfolio ItemTake a screenshot of your favorite site (I used one of my own portfolio, ryanscherf.net). Rename this layer “screenshot.”  Add a Stroke and Inner Shadow to the “screenshot” layer use your Layer Styles:  Duplicate the “screenshot” layer, and flatten all of the layer styles (merge the “screenshot copy” layer with a new, blank layer). Rotate the “screenshot copy” layer 45 degrees counter-clockwise, just as you did for the arrows in Step 9. Place the screenshot at the bottom left of the portfolio cutout, ensuring that the top of the screenshot sticks out of the cutout (we’re going to be giving it some depth) and making it look like it’s tucked behind the “container” layer. Crop any excess of the “screenshot copy” from the bottom as shown.  Now that we have our screenshot in place, let’s add a short description to the right. Nothing too fancy here, but still trying to stick with our theme of depth and layers. Create some text with an almost white (or very light blue/green) color. Use the same drop shadow etching technique from the navigation (Angle at -60 degrees, Distance of 1px, and Size of 1px). Create an opaque square behind the text. I used an all black layer, at 30% opacity. The effect should look like this:  We need some navigation dots like the iPhone views. We’ll create one active dot, that will use the exact same Layer Styles as the “active nav” layer (hopefully you didn’t delete it), and an inactive dot which uses the Layer Styles from the “left arrow” layer. Note: Reusing Layer Styles is important not only because it saves time from having to recreate similar styles, but also because it will keep your design consistent throughout. Create a circle using the Shape Tool, with a diameter of 20px (I like my navigation dots large, as I find sometimes they are too hard to click and navigate through). Right-click the “active nav” layer and select Copy Layer Style. Select the circle from your Layers Palette, Right-click, and select Paste Layer Style. Repeat these steps for as many inactive dots as you’d like, making sure to use the layer style from the “left arrow” layer.  Step 11 – Label it With a RibbonWe need to let our visitors know exactly what we are showcasing here. We’ll create a ribbon using the exact same technique as we used for the “active nav” layer, which was outlined above in Step 7. |
How to Make a Melting Camera Scene
|
In this tutorial, we’ll use the Layer Mask Tool and Liquify filter to "melt" the camera. I recommend you work with a tablet for this one (it makes your work easier), but if you don’t have one it is also possible to go through this tutorial. Let’s start!
Final Image PreviewTake a look at the image we’ll be creating. Want access to the full PSD files and downloadable copies of every tutorial, including this one? Join Psd Plus for just $9/month. You can view the final image preview below.
 Step 1Open the camera file by bennorz, double-click on the layer to unlock it and create a new one beneath. Fill the new layer with a red (#ff0000) color. Now you have a red background beneath the camera layer and it makes it easy to see borders of the object when masking. It is not necessary to use red, but it is better to use a color which is not in the object. Apply a layer mask to the camera layer. Be sure to have it selected when masking.  Step 2Masking is the non-destructive way of removing parts of the image especially the background. That’s because erasing is done on the mask not on the image so you can create a mask and then delete it and the image stays untouched. Other great things of masks are that you can use a variety of tools to create it such as the Pen Tool or brush. This time we will use the brush technique. Select the Brush Tool and set its Hardness to 93% – a mostly hard brush creates better borders on objects. Now we are ready to start masking.  Step 3You can start whenever you want in the image, just bear in mind that if you use a "Black color" the brush will start erasing the image and if you use a "White color" or eraser (E) the image will start appearing back. So mask everything except the camera – just paint around the camera, zoom in and out and resize the brush to get the adequate effect. Pay more attention to corners – the most critical ones are shown in white circles below. Here you should be most precise. It may take you some time practicing before you are used to it.  Step 4Create a new document that is 1600 px wide and 1200 px high at a resolution of 72 pixels/inch and fill the "Background" layer with a gray (#dfdfdf) color. Put the masked camera image into this document. If you have the document with the camera still open, then you can just drag it with the Move Tool (V). It will create a new layer with the camera in the workspace. There is still the mask which we won’t need to edit so right-click on it and choose Rasterize Layer.  Step 5Now we have the camera ready. So duplicate the layer, then resize it as shown below.  Step 6Now it’s time for the Liquify filter. You can find it in Filter > Liquify filter (Shift+ Command + X). Then just drag parts of the camera image the way the arrows show. Bear in mind that the camera is laying on the plane and the effect should have a little perspective so you have to play with the technique a little bit to get adequate results.  Step 7Grab the Eraser Tool (E) and set the Hardness to 0%, then select the “camera” layer, not the melted one. Now erase it to almost fit the melted copy. Then select both layers, the not melted and the melted ones, then merge them. You can merge layers by selecting them and press Command + E.  Step 8Now open the Liquify filter and polish the melting effect on the merged image. Then duplicate the layer and move it to the bottom, just above the background layer. Then go to Edit Menu > Transform > Flip Vertical, and adjust the position of the result. |
Create a Watercolor-Themed Website Design with Photoshop
|
“Watercolor in graphic design has become very trendy the last couple of years, many websites and incredible designers are using this style and taking it to another level. Even knowing the technique is important in this kind of design, is more about creativity and experimentation. You will learn how to use the Art History Brush and combine it with watercolor custom brushes to create a nice background header image and more. Let’s get it started!”Alvaro Guzman
Here is a link to the written version of the tutorial Create a Watercolor-Themed Website Design with Photoshop and the video version is below. |
|
Create a Watercolor-Themed Website Design with Photoshop Posted: 07 Dec 2009 07:03 AM PST Watercolor in graphic design has become very trendy the last couple of years, many websites and incredible designers are using this style and taking it to another level. Even knowing the technique is important in this kind of design, is more about creativity and experimentation. You will learn how to use the Art History Brush and combine it with watercolor custom brushes to create a nice background header image and more. Let’s get it started!
Final Image PreviewTake a look at the image we’ll be creating. Want access to the full PSD files and downloadable copies of every tutorial, including this one? Join Psd Plus for just $9/month. You can view the final image preview below. Tutorial Details
 Video TutorialOur video editor Gavin Steele has created this video tutorial to compliment this text + image tutorial. Before Getting StartedThis tutorial should not be followed as a step by step guide, many of the steps are descriptions of the creative process involved on the making of this particular design style. Even though this isn’t a basic tutorial, it can be easily followed by any level of Photoshop user, but I’ll skip the explanation of very basic instructions like adding a Guide or creating a Layer mask. As a full time web designer I have experience dealing with clients which need a design finished in a matter of days or even hours, and when you’re running out of time every minute is precious gold, so I’ll try to give you some time saving tips that will come in handy later. Not all designers knows CSS, if you’re one of them you must know from the very beginning that you’re designing something that will be sliced and put into pieces; repeating backgrounds, text layers, and large image backgrounds must be perfectly placed into the design to avoid undesired changes. Imagine What You Want to AchieveIt’s a good practice to start with a sketch or a wireframe in order to have an idea of where to put the elements in the canvas. Here is my rough draft:  For this design I’ll go for a fixed width and center aligned elements. Let’s start designing! Step 1 – Setting Up the TemplateWe will download a PSD template from 960 Grid System, open the 12 columns template. This isn’t mandatory, you can start creating a 960px width document and draw some guides on it, but downloading the template will save a couple of minutes. Open it and Save it with any name you want. You’ll need to expand the image’s width in order to see how your design looks on wider resolutions, for this go to Image > Canvas size and set the width value to 1420 pixels, from the center to the sides. I’m putting all the template’s built-in layers into a folder named "Template."  Step 2 – Main Repeating BackgroundFind a good paper texture, I’m using this one. This image will repeat all across the page background but it needs some previous editing. Select a square from the paper texture using the Rectangular Marquee Tool, Copy the area and paste it into a new document (You can chose Clipboard from the Preset dropdown). Then, go to Filter > Other > Offset and there change the Horizontal and Vertical values in order to put the borders’ offset close to the center. Next using the Clone Tool fix the hard lines in the middle. Once you have finished the cloning, Select All (Command + A) and copy the edited image on the clipboard.  Step 3 – Set up the Repeating BackgroundPaste the piece of paper and paste it into the main document. Using the Free Transform Controls paste the right side of the image over the middle Guide and the left side over the first Guide from the left and the Top border matching the top of the document. Once you’ve perfectly place the first piece of paper, duplicate it and place it to the right, this way you’ll be covering the actual 960px area. Then duplicate the Paper pieces twice to the left and right of the 960px bounds in order to cover the entire canvas surface, then grab the 4 paper layers and duplicate them vertically and place them below the existing ones, do it as many times as needed until you cover all the canvas. Finally put all the Paper layers into a folder named "Background Texture," and if you want it for easier manipulation duplicate it and Merge the Group then hide the original folder.  Step 4 – Header BackgroundNow let’s add the header’s background, for this I’m using this image of a mountain landscape. Using the Marquee Tool select a wide portion of the image and paste it into the main document and name the layer something like "Landscape." Now we will give this picture a fake HDR style, that will make it look more like a painting than a photography. Duplicate it and hit Command + I to invert the colors, set the Saturation to -100 in the Hue/Saturation panel (Command + U) and then change its Blending Mode to Overlay. Finally Select both layers "Landscape" and "Landscape copy" into one.  Step 5 – Using the Art History BrushNow we will use the Art History Brush to make our picture look like a painting, select the Art History Brush by Clicking and holding over the History Brush Tool (Y) in the Tools Panel. To make this wonderful feature work, you will need to create a Snapshot first to work with, for this go to Window > History to show the History Panel, and click over the New Snapshot button at the bottom. Then in the Options Panel, chose any irregular Brush Tip (I’m using a 36px Chalk tip) set Mode to Normal, Opacity to 25% Style Tight Short, Area 25px and Tolerance 0%. Then paint over the "Landscape" layer, you will see how the image turns into a painting fairly easily. After that, you just need to change the Opacity, Area and Brush Tip values according your needs, e.g. I’m using a larger Brush Tip and increasing its area to paint over the borders.  Step 6 – Watercolor Layer MaskCreate a Layer Mask > Reveal All to the "Landscape" layer, now we will try to merge the image better with the repeating background using some watercolor Brushes. I’m using this Watercolor brushes set by mcbadshoes. Keep this brush set handy since we will use it during the entire process. Grab any of the brushes, set the foreground color to Black and paint some marks directly over the Layer Mask, which is important. These brushes have different opacities so you can play with them; in case you’re using another brush set, you must change the Brush Opacity and Flow values every time you paint a mark. The idea of this step is to melt down the image’s borders with the paper background, try to place your watercolor marks all across the border with some spots inside the image. It doesn’t matter if the landscape is out of the template Guides, you can slice the header as a large background image when coding.  Step 7 – Add a Top GradientJust to make the coding a little bit more difficult (just kidding) we will add a vertical Gradient Fill Layer (#96AFCE – #FFFFFF) and set its Blend Mode to Linear Burn.  Step 8 – Content BackgroundUsing the Rounded Rectangle Tool, set the Corner Radius to 15px in the Options panel and draw a rectangle from the second Guide from the left to the penultimate Guide at the Right side. I often use those guides just in case I need to add a drop shadow or some other effect to the background later. In this case we will leave the Rounded Rectangle as is, just changing its Fill value to 35% and adding a 1px Inside Stroke style. Changing the Fill Opacity makes the Layer Effects retain plenty of color so the stroke look really good and you can still allow some watercolor background through the fill. You can name this layer "Content Bg." It’s important to set every stroke effect Inside the object, adding a stroke outside will increase the element’s dimension and we don’t want that.  Step 9 – Think Like a CoderEven our translucent background looks pretty good, coding it will be a little bit hard, yet not impossible. It’s easier to code a plain color background than a transparent one, so duplicate the Rounded Rectangle and place the copy above it. Set the Fill to 100% again and hide the Stroke Style. Now add Layer Mask > Hide All to it and fill it with a Linear Black to White gradient in order to hide the top of the new Rounded Rectangle. You can help yourself with a couple of extra Horizontal Guides. How does it work? This content must be vertically scrollable, so the repeating white background should be easy to expand to the bottom; let’s try it!. Grab the Direct Selection Tool (A) and select the bottom points of the Vector Rectangle, then using the Cursors move the points a few pixels down, it should work fine.  Step 10 – Pages NavigationUsing the Rounded Rectangle Tool, add a blue (#3F5060) rectangle at the top of the design, set its Fill value to 50% and add a 1px blue (#3F5060) Stroke layer style to it. Using the Type Tool, type the pages over the navigation background layer, I’m using "Futura Std" typeface this time, but feel free to change it. Next, paint a small white watercolor mark behind the text as a hover effect and change the selected word’s color into dark blue (#223A54).  Step 11 – Melting BackgroundsNext rasterize the "Content Bg" layer or convert it into a Smart Object, add a Layer Mask > Reveal All to it and using a black, soft Brush paint some spots over the Layer Mask. This process will melt down the "Content Bg" with the Watercolor landscape giving the design a polished look.  Step 12 – Page TitleLet’s add the Page Title. I’m using the "Futura Std" Typeface. I’m using these colors for the type: #F2F6FC and #E1EDFF. Now for the background, paint a single blue (#112C37) watercolor mark into a layer below the logo layers and change its Blend Mode to Soft Light. It’s a good idea to organize our layers into folders, so we will put all the involved layers into a folder named "Logo."  Step 13 – More Watercolor MarksIn order to increase the visual impact of the background, add more watercolor marks using several colors, place them all across the top border just above the "Landscape" layer. Then change its Blending Mode to Overlay. Finally add a big sky blue (#51D3D3) watercolor mark into a new layer just above "Landscape" and below "Content B.g" Then change its Blend Mode to Overlay as well.  Step 14 – How About Adding an Actual Paintbrush?Using real life objects in web design is very trendy, we will add an actual paint brush image to our design. Open this picture extract a part of the paint brush and paste it into the main design across the header with its tip close to the watercolor mark created in the previous step. You can use a Layer Mask and a little, soft, black brush to feather the brush tip. |
31 Icon Design Tutorials
|
Icons can come in incredibly handy for both web and print design. They are a great and very simple way to add graphics to text areas, overall making it a much easier and better experience for the user.
There are a lot of icon tutorials on the web that are specifically for Adobe Illustrator, mainly because its vector image capabilities allow you to scale your finished icon up and down to the size of a pin-head or the muscles of the Incredible Hulk. However, if you know what the purpose for your icon is going to be (i.e. you know you’re not going to want it any bigger than, lets say, 128×128px) designing it in Photoshop is not a problem, in fact, in some cases, it’s a lot easier! Therefore in this article I have collected 31 magnificent icon tutorials specifically for those who know the purpose of their icons, only have Photoshop to work with or are simply more confident and skilled in Photoshop. Enjoy! 1. USB Hard Drive Device Icon Difficulty: Intermediate 2. How to Design Mini Icons Difficulty: Easy 3. Skype Icon Design Difficulty: Intermediate 4. Create a 32×32px Social Media Icon Difficulty: Easy 5. How to Create a Basic House Icon Difficulty: Intermediate 6. Vintage Mac Icon Difficulty: Easy 7. Leather Textured, Realistic Briefcase Icon Difficulty: Advanced 8. Unique and Funny Digg Icon in a Bottle Difficulty: Intermediate 9. Postal Packet Logo Icon Difficulty: Easy 10. Vintage Radio Icon Difficulty: Advanced 11. Detailed Compass Icon Difficulty: Advanced 12. Animated RSS Feed Icon Difficulty: Intermediate 13. Traffic Cone Icon Difficulty: Advanced 14. RSS Icon Difficulty: Easy 15. XP Style Monitor Icon Difficulty: Intermediate 16. Hand-Drawn Social Media Icons Difficulty: Easy 17. Glossy RSS Icon Difficulty: Intermediate 18. Shiny Lock Icon Difficulty: Intermediate 19. Watercolor Social Networking Icons Difficulty: Easy |
How to Create a Magician’s Hat in Photoshop
|
In this tutorial, you’ll learn how a magician’s hat can be designed in Photoshop. The tutorial involves a simple use of the Pen Tool and other Shape Tools. It shows a distinct use of different blending modes and focuses on other lighting techniques. Shadows are also explained in the tutorial and we’ll reveal some great beginner techniques. Let’s get started!
Final Image PreviewTake a look at the image we’ll be creating. Want access to the full PSD files and downloadable copies of every tutorial, including this one? Join Psd Plus for just $9/month. You can view the final image preview below.  Tutorial Details
Step 1Create a 450 px by 450 px document with a white or transparent background. Drag out two guides at the center of the document (for your own convenience). Now use the Pen Tool to make a shape like the one shown below.  Name this layer as “body.” Make sure you place this layer and all layers constituting the hat in a single layer-set (call it “Hat”). While creating an irregular shape like the one above, it’s hard to keep symmetry on both sides. The easier way is to create half of the shape first.  Now grab the Path Selection Tool (A) and click on the shape. Press Command + C to copy the path and then press Command + V to paste it on the same shape layer. The copied path will be selected spontaneously. With the Path Selection Tool (A) still selected, go to Edit > Transform > Flip Horizontal and move the path rightward until you get the required shape. Click and drag a selection to select the two paths simultaneously then click the Combine button located in the Options bar.  Step 2You can now add some reflections to the “body” layer. To do so, duplicate the “body” layer (Command + J) and reduce it’s fill to 0%. Go to it’s Layer Style and give it a Gradient Overlay.  When you’re done with the settings, don’t click OK. Before doing so, move the gradient leftward so that you have something like that shown below.  Step 3With the duplicate “body” layer selected, go to Layer > Add Layer Mask > Reveal All. Grab the Gradient Tool (G) and drag a black to white gradient as directed.  Step 4Duplicate the “reflection” layer and go to its Layer Style. Move the Gradient leftwards while applying the following changes.  Step 5It’s time to add a shiny band on the hat. Create a shape of any color using the Pen Tool.  The band should not be flowing outside the hat’s body. Command-click on the “body” layer and go to Select > Modify > Expand, type 1px and click OK. With the “band” layer selected, click the Add Layer Mask button.  Step 6Give the “band” layer the layer styles shown below. Move the gradient rightward before closing the Layer Style window.  Step 7Duplicate the “band” layer and remove all its layer styles except the Gradient Overlay. Reduce its fill to 0% and make the following changes to the Layer Style. Note that this gradient is placed leftward.  Step 8It’s time to make the top part of the hat. Use the Ellipse Tool (U) to make an ellipse like the one shown below and name it “top.” |
The Making of “Constant Slip”
|
Today I’ll take you through the creative process of making intriguing light effects and applying them in your work. This is more a process description of making this illustration, than a detailed step by step how to. I’ll give you some good guidance on how to deal with an illustration like this and cover the overall workflow. Let’s get started!
Final Image PreviewTake a look at the image we’ll be creating. Want access to the full PSD files and downloadable copies of every tutorial, including this one? Join Psd Plus for just $9/month. You can view the final image preview below or view a larger version here. Tutorial Details
 PreparationThis is an advanced piece, I mean there are no hard to do techniques, but this kind of work requires a lot of good taste, some color experience and casting shadows knowledge. So I do not recommend this tutorial for beginners. I’ll skip basic pointers and go straight to the main point. Basically, I want you to get the idea of how to create an illustration like this and follow your own way with these effects. Before we start, I wanted to show you how the concept changed during the whole session:
 So you see each project changes when you work on it, so before you get into this tutorial remember to work flexible, not everything needs to look the same way as you planned. Take your time and use your imagination. Step 1Before we start, you need to know that the shining effects work best on a black background. The darker the background is, the more visible and contrasted shine you will achieve. So I started with a black background of the canvas around 900px by 1100px (this should work for you fine).  Step 2Now is the first hard part, searching for the right image. I know many people are unhappy with buying pictures, but well, the truth is: if you want good quality, you need to pay for it. I’ve nothing against free stock photos, if you have the time to search for a good image among mixed quality free pictures it’s OK. Anyway, if you have the right image, then extract the person (or object) from the image of your choice. The biggest problem of all cut-outs is always the hair. But, as you can see in the image below, I had a short haired man. In this case I simply used the Pen Tool to deal with short hair. And because we have a black background in our main project document, we can easily blend this black hair with the background. To do this I used the Burn Tool with Range set to Midtones and burned the hair edges a little.  Step 3Now, in the Layers Palette I added two adjustment layers: Levels and Gradient Map to make a better blending between this person and the black background. I used a gradient from black to white and set the Gradient Map layer’s Blending Mode to Soft Light, then lowered the Opacity just a touch.  Step 4OK, next we’ll create ground. I used a Gradient Tool and on a new layer created a radial gradient from white to transparent (as you see in the first picture below). Then this big white dot needed some perspective, so here I hit Command + T to Distort (second image below). The dot was blurred using Gaussian Blur at around 40 pixel Radius. Then I duplicated this blurred dot, stretched it a little bit (Command + T) and made two more copies to enhance the ground effect. If necessary, the opacities of these ground layers can be lowered just a touch. It means that this surface shouldn’t be too bright, as this will kinda destroy the concept of having the whole background black.  Step 5Now, as you can see in the first image below, I started adding shadows under the shoes. It’s not suppose to be great and totally pimped shadow. I just needed to make an accent that this man is standing on something. This always works pretty well, as you start to see how your illustration is shaping up, even thought the shade will change, it’s good to have it sketched. To do the shadow I used a black brush with Flow set to 2% and Hardness to 0%, then I slowly started creating it click by click (don’t hold the left mouse button while doing this, as you may make a very ugly kind of shadow that way). Individual brush clicks did the job just fine. Now let’s focus on the second image below. Something didn’t work for me in this piece, so I decided to add the first dynamic touch to this illustration, so I selected all the layers and used Command + T to rotate them at a small angle (for now it looked kinda like a slip).  Step 6I zoomed out and positioned this man and ground to the right. I kinda wanted to avoid the center focus of illustration. Sometimes it’s good to move the main object/person to the side, looks more dynamic and original to me. OK, then I decided that this position works perfectly for this piece and started touching up shadows. Looking at this man it’s visible that few sources of light hit him (for example his left hand shows that light reaches it from left and right). So in this case I decided to give this man a soft shadow, only underneath him by using the same technique as previously. I only want you to pay attention to his shoes which are the closest objects to the ground. Shoes stick to the surface, this means they need more shadow around them. The farther the objects are from the ground, the more they start to disappear (and the shadow starts to soften, then slowly vanish). |
How to Create a Stylish Media Player in Photoshop
In this tutorial, we’re going to teach you how to replicate Apple’s iPod Nano. Not only will we recreate it’s signature body form, but also the headphones and put them in a unique setting that makes it pop. This an easy to follow step-by-step tutorial, and altering the final appearance should be a piece of cake, especially if you’re a Plus member! Changing the appearance is only a metter of picking a few different colors or adding your own textures as skins!
Final Image Preview
Let’s take a look at the image we’ll be creating. Want access to the full PSD files and downloadable copies of every tutorial, including this one? Join PSDTUTS PLUS for just $9/month.
Step 1
Create a new document with these settings like 1a. The first layer, call it “background” and fill any color. Then Open the Blending Options and settings (1b).
Step 2
Create a new folder, call it “ipod”. In this folder, create a new layer, call it “ipod” as well. Select the Rectangle Tool (U) to draw a rectangle shape like the one below (2a). Select the Pen Tool and click on the shape. After that, create four nodes of the shape as shown. At the top line, click to make a node between two top nodes. Then correct the top line of the curve by holding “Command” down, and clicking and dragging the node upward by a little (2b). Do the same with bottom line, but downward this time(2c). Then press Command + Enter to make the selection and fill that with color (2d).
Step 3
Open the Blending Options menu for “ipod” and adjust the settings like in image 3a. Create a new layer on top, call it “light ipod”. Use the Rectangular Marquee Tool (M) to make a rectangle selection and fill it with white (3b). Then reduce the Opacity to 30% (3c).
Step 4
Create a new layer on top, call it “screen bg”. Use Round Rectangle (set Radius: 5px) to draw a shape like one below and fill it black color (4a). Then open Blending Option and setting (4b).
Continue Learning…