DESIGNING A WEBSITE LAYOUT IN PHOTOSHOP CS4. Step 1

Transcription

1 DESIGNING A WEBSITE LAYOUT IN PHOTOSHOP CS4 Step 1 We ll be using the 960s Grid System (download here) to keep everything aligned. Once you have it, open the included Photoshop document called: 960_grid_24_col.psd. And then hide the group called 24 Col Grid. We ll be using guides quite a bit, so we need to view our rulers. To do so go to View Rulers. Also we need to make sure that Guides are visible. Go to View Extras.

2 Our final design is a bit taller than the current height. So we need to adjust our canvas size. Go to Image Canvas Size, Height: 1500px. Step 2 We need to set lower borders to our header area, by dragging a new horizontal guide after 100px. Go to View New Guide. Orientation: Horizontal, Position: 100px.

3 Using the Rectangular Marquee Tool (M) make a selection of 1020x100px. Click Shift+Backspace to fill it with any color then call this layer header_bg. Add a Gradient Overlay to your header background ( header_bg ) layer. Use the image below for reference.

4 Step 3 Write your website title, with the following character settings: Font Family: Rockwell Font size: 35px Font weight: Regular Anti-aliasing setting: Smooth Color: Won t matter, we ll add a Gradient Overlay Also make sure to align your text according to the following image.

5 After you ve written your website title, add a Drop Shadow to it: Then add a Gradient Overlay:

6 In order to align our website title correctly, select its layer and the header_bg layer. Click on Align vertical centers while you have both layers selected.

7 Step 4 With the Line Tool (U) create a 1px wide vertical line like the one below and then add a Gradient Overlay to it. Use the image below for reference. Create another 1px wide vertical line. Also give it a Gradient Overlay according to the following image.

8 And you should have a nice looking separating line!

9 Before we move on to the next step, just make sure you organize your layers. Mine looks like this: Step 5 Write the navigation text, with these character settings: Font Family: Rockwell Font size: 40px Font weight: Regular Anti-aliasing setting: Smooth Color: #d9800e #301d17

10 Make sure you align your text this way. Check the image below: Duplicate the separating line you created in step four, make three copies of it (depends on how much pages you have in your navigation) and place them like the in following screenshot: Step 6

11 Using the Line Tool (U) Create a 3px line like the one below: Give it some layer styles according to the following image:

12 Before we start creating the featured designs area, make sure to keep your layers grouped and well-organized. Here s how mine looks:

13 Step 7 We ll start this step by dragging a new horizontal guide according to the following image: With the Rectangular Marquee Tool (M) create a selection of 1020x350px. Click Shift+Backspace to fill it (with any color) and call this layer featured_bg.

14 Add some layer styles to it. Use the image below for reference.

15

16 You should have something like this: Using the Single Row Marquee Tool, create a 1px selection and click Shift+Backspace to fill it with white: #ffffff. That makes a pixel perfect detail!

17 Step 8 Big typography always look nice, so let s work on that. Using the Horizontal Type Tool (T) type some text (I personally wrote: WE MAKE DESIGN THAT ROCKS! ) with these character settings: Font Family: Rockwell First Line: 55px Second Line: 132px Third Line: 132px Font weight: Bold Anti-aliasing setting: Sharp Color: #e18611 #e4e4e4

18 Add a Drop Shadow to your text. Check the image below:

19 You should have this nice big typography! Align your text horizontally according to the following image:

20 In order to get right vertical alignment, Select the featured background ( featured_bg ) layer and the text layer, then click on Align vertical centers while having both layers selected. Step 9 Get this wood texture form istockphoto. (Note: You can skip this step by getting a large size version, otherwise save your money and stick with me! ;))

21 In order to place your texture in your document, go to File Place Locate to where you ve downloaded it and click Place. Make sure that the wood texture layer is underneath featured_bg layer.

22 Select the wood texture s layer, right-click on it and choose Duplicate Layer. Make two copies of it, and put them all next to each other.

23 Select the one in the middle, go to Edit Free Transform and make your width negative. (in my case W: %). As you can see it s fading smoothly now! In order to make the three copies one single piece, select the three layers of the three copies, Right-click Convert to Smart Object.

24 Step 10 Needs to be a bit darker, right? Let s do that! We ll start by making a selection of about 1020x55px over the wood texture. Now create a new layer and call it overlay then fill your selection with this color value: #2d1a14.

25 Set your layer opacity to 40% and Blend Mode to Overlay.

26 Step 11 Using the Ellipse Tool (U) create an ellipse of 20x20px and fill it with Black: # It will work as a sliding button. Give it some layer styles according to the following image.

27

28 You should have something like this: Duplicate your ellipse, but this time fill it with white: #ffffff. Make three more copies of the ellipse and put them all in one group.

29 In order to leave equivalent spaces between our ellipses, select the five of them and click on Distribute left edges in the control bar.

30 Step 12 We ll start creating the content area by dragging a new horizontal guide according to the following image. With the Rectangular Marquee Tool (M) create a selection of 1020x550px and fill it with any color. Add a Gradient Overlay to it. Use the image below for reference:

31 With the Single Row Marquee Tool create a 1px selection like the one below and fill it with white: #ffffff.

32 Pixel perfection! Step 13 To be more accurate we ll drag two new horizontal guides according to the following image.

33 Write some heading with the following character settings: Font Family: Rockwell Font size: 30px Font weight: Regular Anti-aliasing setting: Smooth Color: #e18610 Write a sub-title with these character settings: Font Family: Arial

34 Font size: 15px Font weight: Regular Anti-aliasing setting: Smooth Color: #2d1a14 Drag two new horizontal guides according to the following image. Write a text paragraph with these character settings: Font Family: Arial Font size: 15px Font weight: Regular Anti-aliasing setting: None Color: #2d1a14

35 Step 14 Drag two more horizontal guides according to the following image. Make a selection of about 480x100px like the one below and fill it with this color value: #f2f2f2. Call this layer bg.

36 While selecting the same layer ( bg ) click on Add layer mask (look at the bottom of the layers panel, can you find a rectangle with a circle inside of it? Yep, that one!)

37 Make a Black, White, Black gradient; and with the Gradient Tool (G) (linear gradient) start dragging from right side and end dragging at the left side.

38 With the Line Tool (U) create a 1px line, fill it with this color value: #ababab and place it like the following image: Use the same instructions and add a layer mask to it, and drag with the gradient tool. You should have something like the image below! Make another copy of your line and place it like the following. Step 15 Write a heading (i.e. a featured service or something like that) with the following character settings: Font Family: Rockwell Font size: 25px Font weight: Regular Anti-aliasing setting: Smooth Color: #e18610

39 Then write some text with these character settings: Font Family: Arial Font size: 15px Font weight: Regular Anti-aliasing setting: None Color: #2d1a14 Download this icon set: Function Free Icon Set from WeFunction and place the icons like on the following image. To make sure it s vertically aligned, select its layer and bg layer, then click on Align vertical centers in the control bar.

40 Make sure to keep your layers organized. Like this:

41 Make two copies of what we ve created in the previous two steps, and you should have this: Finally, your content area layers should look like this: Step 16 Again create another heading, just like the one on the left.

42 Write some text with these character settings: Font Family: Arial Font size: 15px Font weight: Regular Anti-aliasing setting: Smooth Color: #e18610

43 Using the Line Tool (U) create a 3px line, about 440px width and fill it with this color value: #2d1a14. With the Polygonal Lasso Tool (L) create a selection like the one below and fill it with this color value: #2d1a14.

44 Have you organized you layers? Using the Rectangular Marquee Tool (M) create a selection of about 205x55px place it like the following and fill it with any color. Call this layer image_holder.

45 Give it a stroke use the image below for reference.

46 Place an image of a featured design. Make sure it s above the image_holder layer, right-click on the image layer and choose Create Clipping Mask.

47 Make three copies and place them like in the following image: Make four layer groups and put each of the images in an individual group.

48 Step 17 Drag a new horizontal guide after 30px. Then write a heading with the following character settings: Font Family: Rockwell Font size: 25px Font weight: Regular Anti-aliasing setting: Smooth Color: #e18610 Write some text with these settings: Font Family: Arial Font size: 15px Font weight: Regular Anti-aliasing setting: None

49 Color: #2d1a14 Using the Rounded Rectangle Tool (U), create a rectangle of 170x45px 5px radius, fill it with any color and align it like in the following image: Give some layer styles according to the following image:

50

51 Write a word on the button (I put HIRE US just so it s related to the heading above) with these character settings: Font Family: Rockwell Font size: 30px Font weight: Regular Anti-aliasing setting: Sharp Color: #6b3d0c Give it a drop shadow. Use the image below for reference:

52 Make another copy of what we ve created in this step! Step 18 With the Rectangular Marquee Tool (M) create a selection of 1020x450px and fill it with this color value: #2f1c16. With the Single Row Marquee Tool create a 1px selection (*to have the right effect don t make the selection right over the upper edge of the footer area, but nudge it down just a little bit about 1-2px). Now fill your selection with this color value: #6d5c57.

53 Step 19 Drag two new horizontal guides according to the following image. Using the Rounded Rectangle Tool (U) create a rectangle of 250x25px 5px radius, fill it with any color, and place it like in the following image.

54 Call this layer wood_bg. Get this wood texture from istockphoto. Import it, and put its layer above the wood_bg layer, right-click on it and choose Create Clipping Mask.

55 Using the Elliptical Marquee Tool (M) create a selection like the one below, and fill it with black: #

56 Go to Filter Blur Gaussian Blur radius: 2.5px. Make a selection over the lower part of the blurry black shadow, and hit delete. Using the Rounded Rectangle Tool (U) create a rectangle of 223x223px 5px radius, fill it with this color value: #6b3d0c, and align it like in the following image. Call this layer: box_bg. Select box_bg layer, click on Add layer mask. Make a selection over the lower part of the rounded rectangle and click Shift+Backspace to fill it with Black: #

57 With the Elliptical Marquee Tool (M) create a selection like the one below.

58 Click Shift+Backspace and fill it with Black: # Go to Filter Blur Gaussian Blur Radius: 4px. Step 20 Write a heading with these character settings:

59 Font Family: Rockwell Font size: 30px Font weight: Regular Anti-aliasing setting: Smooth Color: #fcf6c4 Add a Drop Shadow to it. Use the image below for reference: Write a sub-title with these the following character settings:

60 Font Family: Arial Font size: 15px Font weight: Regular Anti-aliasing setting: None Color: #fcf6c4 Write some text with the following character settings: Font Family: Arial Font size: 15px Font weight: Regular Anti-aliasing setting: None Color: #c27819

61 Step 21 With whatever tool you like, create a rectangle of about 210x30px, fill it with this color value: #c27819 and place it like the following image. Call this layer: band. Select the band layer and click on Add layer mask at the bottom of the layers panel.

62 Set your gradient editor to a Black/White gradient. Using the Gradient Tool (G) and with a linear gradient, drag from left to right.

63 Step 22 With the Ellipse Tool (U) create an ellipse of 40x40px and fill it with this color: #fcf6c4. Give it a stroke. Use the image below for reference:

64 With the Custom Shape Tool (U) create an arrow, fill it with #c27819 and align it visually. Add some layer styles to it. Use the image below for reference:

65 Write the word READ MORE with the following character settings: Font Family: Arial Font size: 15px Font weight: Regular Anti-aliasing setting: Smooth Color: #2f1c16

66 Step 23 Make a copy of what we ve created in the previous four steps. and align to the right. Use the same techniques shown here to create something like the following. Continue creating the middle box, finally you should have something like this!

67 Make sure to keep your layers well-organized. Here s how the box layers look:

68 And here s how the footer layers look. Step 24 We re almost there! Drag a new horizontal guide after 50px.

69 Using the Rectangular Marquee Tool (M), create a selection of about 1020x115px and fill it with any color. Give it a Gradient Overlay use the image below for reference:

70 With the Single Row Marquee Tool create a 1px selection and fill it with this color value: #482e27. Write your sub-navigation text with the following character settings: Font Family: Arial

71 Font size: 15px Font weight: Regular Anti-aliasing setting: None Color: #c27819 #2f1c16 With the same character settings, write your copyright text and align it to the right. Don t forget to organize your small footer layers. Here s how mine look: Conclusion

72 There we have it! Hopefully you should have something like this: