This tutorial will guide you through the process and ideas behind the designing a professional website with a funky flair in Photoshop. The tutorial will read much like a "choose your own adventure" novel in the hopes it will encourage creativity and uniqueness in your design with a little advice and instruction along the way. Adventure time!
One thing you will notice as you proceed through this tutorial is how easily this website could be transformed to a blog about design, a software company's homepage or an open source community. All of the modules on the right and left sidebars could be swapped and moved around with ease and the content is designed to be flexible.
Throughout this tutorial you will see a big emphasis on the design principles and useful Photoshop methods to improve your workflow and design of web sites. While this site has its own style, the main aim of this tutorial is not to replicate that style exactly, rather the hope is that you gain a better perspective of web design in Photoshop that can improve your approach and quicken your production.
Final Image Preview
Take a look at the image we'll be creating.
Step 1 - 960 Grid System
If you aren't already, skip over to 960.gs and familiarize yourself with the 960 grid system and why it is going to be so useful for this tutorial. While you are there be sure to download the template.
Once you have downloaded the file, unzip it, and open "960_grid_12_col.psd" which can be found under 960_download > Templates > Photoshop. When you open up the file it will be evident how quickly this will allow you to create and maintain structure in your web designs. Take special note of the guide lines, they will allow you to create objects that snap perfectly aligned with the grid.
If you follow the guides up to the ruler, then you can clearly see the exact pixel dimensions of the grid - with 60px wide columns and 10px on either side (creating 20px between each column). If you do not see the ruler or wish to get rid of it, then you can toggle it with Command + R.
The guides are almost overpowering; once you start designing they will really get in the way. You can toggle them by clicking View > Extras or simply using the shortcut Command + H.
You will need more space on your canvas for this tutorial. Expand the canvas (Command + Alt + C) to 1400px by 1340px. You can delete everything except the background layer. Double-click on your background layer and press OK to unlock it. Rename it "BG."
Save (Command + S) this file as "my_web_tut01.psd" in its own folder named "my web tut" After every step in this tutorial you should hit Command + S and every couple of steps hit Command + Shift + S and save a new copy "my_web_tut02.psd," "my_web_tut03.psd," etc... Saving seems like a no brainer to a lot of designers, but I've found that still doesn't stop a lot of professionals from slacking on this.
Step 2 - Working with the Grid Part I
OK, you have prepped the canvas, now you need to draw in the background and top area. Drag on the top ruler to create a new guide; bring it down to 120px. This will be the lower boundary of the header space. Bring down two more guides to 130px and 140px. Now there is the same width of space between the header and content as we have between columns. It's starting to look like a proper grid!
Use the Rectangle Tool (U) to draw a black rectangle across the header area. This assumes you have the default black set as your foreground color, if not you can simply press D to reset it. Start your rectangle outside of the canvas along the guide and end it outside to the other side as well. The benefit of extending this element is that you won't see any of the effect applied to the perimeter that you may want applied to the bottom edge of your rectangle, like a stroke, inner glow, etc. Name your rectangle "Header BG."
Step 3 - Working with the Grid Part II
It's time to start blocking out your grid. This design is comprised of three content columns - the left sidebar will span three columns, the middle/main content will span seven columns and the right sidebar will span two columns.
While it works great for the header to put in guidelines, the rest of the design will be a more fluid process, so you won't be drawing horizontal guides between each section. Don't despair! You will still be able to achieve pixel perfect spacing by pressing Shift + Arrow Keys while you have the Move Tool (V) selected. Each time you do that the layer selected will move 10px.
You will be creating rounded corners for this design. Rounded corners make so that your content is very visibly sectioned. Look back to the final image; do you notice how on the "Twitter Feed" module there are many boxes within one box with rounded corners? Now consider if the corners were all sharp - the "Twitter Feed" would not feel like a single module as much.
You must also take into account that colors, gradients and fonts are helping to make this a defined entity, but the rounded corners definitely help. Additionally be aware that just because rounded corners work for this design, there are thousands of beautiful sites that don't use rounded corners. Take a look at Psdtuts+ - every corner is sharp; however, other strategies like contrast and strokes are used to keep the layout clear. Further reading can be found here and here
Enough design talk! Select the Rounded Corners Tool and set the corner radius to 8px. Draw a box in the top of the left and right columns; give yourself some space to add content later.
Step 4 - Typography
First, create a text area in the middle/main content area and fill it in with a catchy one liner like in the final image. Use the font Rockwell or another slab-serif at 40pt with 48pt Leading (Line Height). Rockwell can be downloaded here.
Next, add some dummy text below and set in Verdana at 12pt with 20pt Leading. Also add in a couple sub headers that are Verdana Bold at 17pt with 30pt Leading.
Now that you have the specifics, let's talk typography. One general rule that you will find repeated throughout the web design community is that a website should only utilize two fonts. In this layout I have chosen to use the fonts Rockwell and Verdana. Verdana is a web safe font while Rockwell is not. Because of this, all instances of Rockwell will need to be images when this design is converted to XHTML/CSS.
This means two things for you. First, to keep the load time low, you should consider a minimal use of non web safe fonts. The final image contains fewer than ten instances of Rockwell, the majority of them sit over top of some graphical element like a button that will already be an image when coding. Second, you can add effects like drop shadows and gradients to the text. These two reasons combine with the inclusion of Rockwell, which is best suited for the traditionally more decorated elements of a design like headers, titles, and buttons.
There is one last consideration that may or may not apply to your design and that is taking into account any future Search Engine Optimization (SEO) work. All text that is image based - any instances of Rockwell for this web design - are not crawled and analyzed by the Google bots. This means that you will need to design so that there will be plenty of web safe fonts where keywords can be picked up by Google.
The next point on typography, and web design in general, is consistency, consistency, consistency! If you use Rockwell for a button, use it for all buttons! If you make some links pink, make all the links pink! Being consistent will allow your design to look sharp and cohesive.
Lastly, a word about usability and typography. Your copy needs room to breathe, give it a decent line height and you'll notice a world of difference. The site ilovetypography.com suggests that your line height should be at least 140% of your font size. Also, you should be aware that a text area wider than 600px is a strain on the eyes, but if you are going to go wider it would be a good idea to increase the line height proportionally. There is always more to learn about typography - here is a good start.
Step 5 - Color
Black and white is boring, time for some color! The colors of this design were inspired by the Hash One Wordpress theme
I could show you how to create a custom swatch to load with your site's colors, but I don't use this myself. Instead, using the rectangle tool, you can just draw a grid of big squares in the margins of your canvas and fill them with the colors you will be using. I find this method quicker and more accessible.
The colors selected provide a great contrast to give the website some depth. Feel free to use any combination that you would like, but, please consider contrast, readability and harmonies when choosing your colors. If you're having trouble with you colors, try using the Color Scheme Designer.
The colors of this tutorial are (from left to right, top to bottom):
- Dark Grays are #090909, #232323, and #4f4f4f
- Pnks are #f35455, #ff7c7d, and #ffb9ba
- Cyans are #49afe9 and #67c8ff
- Light Grays are #afe2ff, #a8bdc4, and #eaf0f1
Add all of these rectangles to a folder and name it "SWATCHES." Using all caps for folder names makes it visually easier to find folder layers when the layers start getting muddled. Now would also be a good time to start your "HEADER," "LEFT SIDEBAR," "MAIN CONTENT," and "RIGHT SIDEBAR" folders. One more good practice to get into is coloring your layers to improve your workflow. Simply right-click on the eye icon next to each layer to select a color.
Step 6 - Gradients Part I
Gradients can really improve your design; however, if you're not careful, gradients can really disable your design. Here is my suggestion: Go crazy with your gradients, just make them all very subtle.
Double-click on the "Header BG" layer and select Gradient Overlay. Click on the gradient that comes up to open the Gradient Editor. Delete all the swatches except the first two - foreground to background and foreground to transparent. Now create a gradient from the darkest gray to the middle gray and press new to add it to the Presets. Repeat this until you have eight new gradients - four darks to mids and four mids to darks. Click on save to save these in a new folder called "Assets." Then place it in the root folder for this project. Now whenever you come back to this project or you will have all the gradients right there.
For your "Headers BG" layer, use the mid to light gradient from the dark gray swatches.
Step 7 - Gradients Part II
For your gradient on the "BG" layer you're going to want to create a bit more complex gradient. There will actually be two gradients in the "BG" gradient. When it comes time to code they will be separate image files, but for us we just need to make one complex gradient.
Notice how there is a small section of the gradient that is going to be the same color? This will be the background color of your HTML file and will allow the web page to grow, but the gradient at the top to stay at the top and the gradient at the bottom to stay at the bottom.
Step 8 - Working with Illustrator Part I
Photoshop is an amazing program, but if I find out that you are creating logos in Photoshop I'm going to report you to Adobe. Logos should be created in a vector program - for this tutorial we'll be using Illustrator.
Open a new file in Illustrator and create your logo (Note: In real projects you should never be starting your web design before you have a logo). While the logo in this example uses Rockwell, having a third font for your logo is not much of a concern. Save your logo in the "Assets" folder where you put the gradient file.
Once you have this logo, we must bring it back into Photoshop for some styling. Simply bring up Illustrator and Photoshop next to each other and drag the pieces of your logo over to Photoshop. Since each piece will have a unique styling, dragging them over individually as opposed to as a whole will help when you start styling.
To align the separate pieces bring in one version of the whole logo, lower the transparency and use as a guide for matching. Delete it when you're done. Shift-click all the layers of the logo and press Command + G to group them in a new folder. Rename this folder "LOGO" and place it inside the "HEADERS" folder.
Each piece will automatically transform into a smart object. This means they will still act as a vector object like in Illustrator - you can use the Transform Tool (Command + T) freely without losing quality.
Step 9 - Effects
After you've sized and placed your logo, you'll need to style it. Use the gradients that you created before to give the logo some depth - mix the colors up, but keep the darker color of the gradients on the bottom for both of the words.
Next add a drop shadow to one of the pieces. Set the Blend Mode to Multiply at 100%. Make sure you have Use Global Light selected and set it to 120 degrees, with 1px distance, 0% spread, and 1px size. By enabling Global Light you will set all effects with shadows to be the same degree - remember consistency, consistency, consistency!
I've read around people showing how to copy and paste a layer's style, while that's a good method for layers that are very far apart, here are some quick ways to move and duplicate effects. Just like when you want to multiply a layer on the canvas and in the Layers Palette by holding down Alt and dragging a new copy of that layer - you can duplicate effects with the same method.
Alt-drag on the fx symbol in the source layer to the new layer and you will replace the new layer with all of the effects of the first layer. If you only want to duplicate the Drop Shadow though, instead of the fx symbol, then Alt-drag the individual effect on to a new layer and you will only replace that one effect, or add it on if the new layer doesn't have it enabled. Use this method to ensure that all layers of the logo have the same drop shadow.
Step 10 - Graphics
Select the "Header BG" layer. Open the effects and add in a 1px black border with the position set to Inside. Next, give it an Outer Glow that has the blend mode: Multiply, Opacity at 40%, Color of black, and Size of 9px.
Go back into Illustrator and create some interesting and creative shapes that will be used as the light background for the header area. Color the shapes white, drag them over to Photoshop, set their blend mode to Screen and their Opacity in varying amounts from 2-10%. Take another look at the final image, you will notice there are many circles and strokes of circles used, these were all created in Photoshop. For the more complex shapes, Illustrator is faster, but for circles you'll actually save time just creating them in Photoshop.
Now we'll make a circle with just the white stroke showing in Photoshop. Create a black circle with the Ellipse Tool, then open the effects for that layer and give it a white stroke. Close the effects and then set it's Blend Mode to Screen, you will see everything but the white stroke disappear. The biggest advantage of this is the ability to change the width of the stroke by simply opening the effects and editing it.
Spend some time messing around with this, experiment with different opacities and compositions - create some funky shapes that can help you individualize this design. Don't worry if some of your shapes are visible below the header, we'll take care of this in the next step.
Step 11 - Masking
Select all of the shapes and put them into a folder above the "Header BG" layer. Command-click on the vector mask (the gray box) of "Header BG" to see the entire header selected on the canvas. Now, select the folder you just created and click on the little button at the bottom of the layers window called "Add Layer Mask"
Masking is something I really don't see enough of in my professional practice, it's very useful and quick, and the best part is that it is a non-destructive method. Consider that you could have just flattened the shapes into one layer and deleted the area sticking out. But then you wanted to change some part of the composition or the stroke on one of the circles - masking makes going back and making changes faster.
Step 12 - Graphics Part I
Below the header you'll notice some graphics that resemble upside down rolling hills. Utilizing your swatch colors and playing with the transparency you can achieve this look. Eventually, these will need to be tweaked to tile horizontally.
Let's consider for a second these and the rest of the non-functional elements of the design. There are a decent amount of, well, just somewhat random graphics. What contribution do these add to the design? First, graphics like this are a great way to direct the feel and mood of a website, a great way to help a brand propagate.
While I don't nearly have the expertise to be explaining branding, I will attempt to give you a quick rundown so you can put this all in perspective. A brand is everything about a company that a consumer feels - the emotions, memories, sounds, colors, experiences, etc. Marty Neumeier, in his book The Brand Gap explains extremely clearly that "A brand is not what you say it is. It's what THEY say it is." So what does this all have to do with the graphics? Well, while you can't construct a brand, you can help it grow in a customer's mind by continuously providing visuals that are evocative of the essence of your company.
OK, so take a look at the final image, what does it say to you about this company? My focus was to make the colors and shapes translate a sense of fun and funkiness, but the structure and strict grid layout give a sense of professionalism and seriousness. Is this the exact brand that every company aims to build? Certainly not, each company should be unique and each website extrude a differentiated aura.
Step 13 - Working with the Background
Hide everything but the "BG" layer. The background of this design is framed by a large rounded rectangle. This adds a little more structure and depth to your design. Since you won't be giving the main content its own box like the sidebars, this is a good approach to washing out the background graphics and improving readability. The white rounded rectangle has an 8px radius, the same as the boxes - another consistency detail. You'll find more effects details in the image below.
Using the same method as with the header, bring in some shapes from Illustrator and move them around to make little graphics. As you continue designing you'll probably find yourself fidgeting around with them to find a composition that works well. Mix your shades of dark colors and transparency.
You may notice the icon from the logo is used a lot, a kind of subliminal reminder. I had a film professor in college who taught me that an image, color, etc. needed to be repeated at least three times in a film for a user to remember and take meaning from it. I try to use that principle with my design - the logo has been repeated numerous times (tastefully and within reason) with the hope that the user will become familiar with the company and remember the icon.
Step 14 - Links, Hover States and Designing Functions
The navigation of this design is heavily influenced from my current favorite website - aviary.com.
The little home graphic and the word Home are a bit brighter and there is a lighter gray background behind it - this is to improve usability. Think like the user! Let them know easily which page they are on. Common ways of doing this is through tabs, color, underlines, highlights and extra graphics. Think about these options and be creative with your approach.
For links and buttons, a hover state is a huge improvement for your usability. Look back again to the final image and look at some of the links. A well thought out design will consider what these will look like and how they will function. If you don't code your own sites, use a little image of a link cursor to indicate to programmers what is going on. Hidden functions like a drop down menu (pictured below) must be considered and fully designed. Waiting to find your beautiful design is paired with some hideous drop down menu will drive you crazy. If you are the designer, it's up to you to consider all of these.
The link cursor image can be found as a PNG along with some more free design resources here.
Step 15 - Pixel Fonts
Did you notice that NEW! badge? I just broke one of my first rules! Well, we'll make a small exception for pixel fonts! Pixel fonts don't have any anti-aliasing, so it makes them very crisp. This crispness can often be unsightly for a regular sized font, but pixel fonts function wonderfully at small sizes. Take a look at how illegible Verdana and Georgia are at 8pt vs. the pixel fonts, a big difference, yes?
Pixel fonts are popular in Flash, they load faster and maintain that crispness, but they work well in web design too! OK, so now that you know about the joys of pixel fonts, be sure to use them sparingly. For applications like this small NEW! badge it works great, but for the most part you shouldn't be using them for many other applications - no one wants to read more than a few words in a pixel font. The font used in this example is called Uni 5063 and can be downloaded for free from Miniml.
Now, examine the rounded corners of the drop down menu. The white background is actually constructed out of three rounded corner rectangles. The third has been turned inside out with the Direct Selection Tool to make a rounded inner corner.
Step 16 - Text Styling
Turn your sidebars white and create guides that give each of your sidebars a padding of ten pixels. Add in all the dummy text you'll be using and duplicate the sidebars as needed. To extend or contract them vertically use the Direct Selection Tool to select the bottom four anchor points and nudge those down or up with the keyboard. The next step is fine tuning the style of all the text.
All of the text has been arranged in a hierarchy of importance and focus, and this is signaled through the styling of that text. The largest font size and darkest color (read: highest contrast) is reserved for the main content headline. The sub headline is bigger and darker than the main body and the main body is bigger than the sidebar content, and so on. Be aware that all of the colors are from the swatches - consistency, consistency, consistency!
Step 17 - Styling the Sidebars
Now that you've organized all of the sidebar boxes and the text is colored appropriately, you can start styling the boxes. Give each entry a very light background gradient and use the Line Tool to draw a horizontal line at the top of the gradient. These will visually separate each entry. Give the sidebar box a light drop shadow.
For the background of the title area of sidebar sections, draw a rectangle underneath the other styling/shapes and add a Gradient Overlay of pinks and a 1px stroke filled with a horizontally reflected gradient of pink to white. Then give the title background layer a Layer Mask in the shape of the sidebar box.
Repeat these steps for all of the sidebar boxes your design has. If you're interested in creating the newsletter signup box, leave room for it and we will cover it in the next couple of steps.
Step 18 - Working with Illustrator Part II
To create that little graphic at the bottom of each sidebar box it will be much faster if you work with Illustrator just a little more. Illustrator is often set up to be in the color mode CMYK; however, since you are designing for the screen the color mode will need to be changed to RGB. Switch over to Illustrator and go to File > Document Color Mode > RGB Color. Next you will need to draw out your desired footer graphic.
Now switch back to Photoshop, select the three middle swatches of dark gray, pink and cyan - drag them over to Illustrator. Use the Eyedropper Tool (I) in Illustrator to color the graphic as desired. Drag the graphic into Photoshop, size and place accordingly. You can add some effects too, I went with a light Drop Shadow and a subtle Gradient Overlay (black to white, with a Blend Mode of Multiply, and Opacity of 10%)
The advantage of this procedure is having one smart object that is already colored. If you were to drag this into Photoshop and the attempt to color the individual pieces it would be a longer process that would require you to rasterize the smart object and create more than one layer.
Step 19 - Graphics Part II
I won't get too crazy into the ideas behind the graphics and branding like before, but I want to touch on some of the foreground graphics in the site. In the final image there are a number of graphics similar to the one in Step 18, but they're a little more complex. Once you have drawn the shapes of your graphic open up the effects and add a Gradient Overlay.
You can see how the colors are arranged in the gradient to give the appearance of a sharp divide between the lighter shades and darker shades. Keep in mind that there are a number ways to accomplish this, including using white rectangles and layer masks.
These graphics are great for enclosing and personalizing icons. Like the question mark in the main body section Did You Know... any icon or symbol could be placed in there. The examples below use icons from the free pack Simplicio and many more free icon packs can be found at Icon Pot.
Step 20 - Buttons
Surprisingly, for me, one of the hardest parts of web design is creating custom buttons. These buttons follow what has been dubbed "Web 2.0 Design" by the web design community.
First, let's examine some of the buttons on the final image. For consistency the text on every button is Rockwell bold except the login button because of its small size - Rockwell doesn't function well at such small sizes. Additionally, all the styling of the text and the background buttons are the same.
Looking next at the zoomed in button you can see some of the effects more closely. A lot of the effects used are very common to creating that Web 2.0 style, especially a 1px stroke around the button, drop shadows on both the text and the box, icons, something to give the impression of 3D and gradients. You can see the Follow Us button uses all of these. To create the 3D effect an Inner Drop Shadow was applied to the background box. Look closely and you will see that the text has a very sharp drop shadow - this creates the same impression as if you were to duplicate the text. Color the bottom copy black and move it down and to the right one pixel.
Don't feel that there is any right or wrong way to create buttons. Take a look at what is out around the Web, play around with some of the effects and settle on something that you feel both looks like a button and is an appealing match for the web design you are working on.
Step 21 - Breaking the Grid
As important as it is to have your web design follow the grid, occasionally breaking the grid here and there can help give your design some character. The primary place that the grid is broken in this web design is in the header area near the logo. This graphic mashup eases the tension of the grid structure and gives the site a funkier and differentiated feel. It should be noted that the design and the content break the grid visually in this area. The description of the company adheres to the column, but breaks in the row and the graphics are almost random in their placement. The graphic mashup is comprised of shapes, gradients and drop shadows; you should be very familiar with these by now :)
Another place the grid is broken is down at the newsletter signup with a trendy little ribbon wrap. The wrap doesn't do a whole lot to break the grid visual, but it gives the content a little extra room to push the margins of the content out. The desired effect of the ribbon was that it would steal a little focus and give the page a bit more style. The breaking of the grid is small and subtle, but it really helps improve the design.
I'd like to mention one last little thing concerning designing function. Under the Recent Articles you'll notice some more ribbons, one for each article. I've designed these with the idea that when a user hovers over the article then the number of comments slides out. It'll take a little AJAX fidgeting in development, but the desired effect can enrich the experience of the website while providing some additional information.
Step 22 - Advertisements
This design would be easily converted to a blog layout or WordPress theme and a common practice to in the blogosphere is to place advertisements. Ads in general are pretty easy to place and design for. When designing you should use real ads and not just leaving blank areas, especially when presenting to clients. For a good selection of banners, I usually use some of the banners in the portfolio of RightBanners or just visit any number of websites and blogs that have ads like Psdtuts+.
When placing ads, the biggest concern is that it's above the fold, mostly because marketing people and advertisers believe in it religiously. While there is significant evidence that the average user is aware of the illustrious scroll function, it's going to be a while before everyone accepts it. Realistically, if the content is engaging then users will scroll to see the rest of the page. The fold is generally around 570-600 pixels down on a 1024x768 monitor.
While I hope you've learned something from this tutorial, I'd like to take a moment to talk about things I don't like about this design. No website is perfect and there are many factors that are matters of personal taste. Additionally, since this website was designed without a specific brief and no real purpose, the design lacks a strong focus.
In my opinion, this design is a bit too busy and cramped. While I tried to really give the type some breathing room, the padding and margins are still very tight. Sometimes this is a must if your website has a lot of information that must be displayed, but the amount of graphical elements might be a tad too much. While I really am in support of using graphics and color to enhance the mood, feel and emotions of a website, be sure that your content does not get lost.
I think that'll be plenty for now, I'm eager to see what you come up with after reading and following this tutorial!