Six Revisions » Tutorials

Create a Clean and Professional Web Design in Photoshop

Jacob Gube — Thu, 18 Feb 2010 02:49:50 +0000

In this Photoshop web design tutorial we are going to design a smashing, clean, and professional website layout in Photoshop. The layout we are doing in this tutorial can be used as personal or corporate website design.

Final Preview

Have a look at the layout that we’ll be creating in this tutorial. You can see the final preview of the image below or click here for a full size version.

Prepare your Photoshop document

1 Create a new document in Photoshop (Ctrl/Cmd + N) using the settings from the following image.

Set the units and rulers settings

2 Make sure that you are working in pixel units, which is the standard fixed unit for web design. Set up the following settings for your Rulers from the Preferences dialog window (Ctrl/Cmd + K); click on Units & Rulers and ensure that you have everything set as shown in the figure below.

Add guides to designate the content area

3 Activate Photoshop Rulers from View > Rulers. Toggle the visibility of the rulers by pressing "Ctrl/Cmd + R". Also open the Info panel from Window > Info (shortcut key: F8). The Info panel gives useful information depending on the selected tool. By pressing "M", choose the Rectangular Marquee Tool and create a box that is 120px wide from the left corner of the canvas. You can adjust the size by looking into the Info panel while making the selection. Now click on the left ruler and drag a guide to the right of the marquee selection as shown in the image below.

4 Move this selection on the right edge of the canvas. Assign another guide to the left side of the selection.

Your canvas now should look like this:

Creating the logo

5 Now we are going to create the logo for our website. The logo is going to be very simple and it will have a color gradient effect. Create a new group (Layer > New > Group) and name it "logo".

6 Select the Horizontal Type Tool (T) and type "SMASHING" (or the name of your website) in capital letters.

7 Then in the Character panel, set the font to Arial, the style to Bold and the size to 42pt. Also set the anti-aliasing method option to Sharp and use the color #101112. You can also set these options in the Options bar when the Type Tool is the active tool.

8 Double-click to open the Layer Style dialog box. Select Gradient Overlay, click the Gradient Editor and use the settings as shown below.

9 Put the "SMASHING" type layer at the distance of 35px from top and 0px from left guide. You can do this accurately using the Move Tool (V) and your arrow keys. Duplicate this type layer (Layer > Duplicate Layer). Move the duplicated layer right next to the "SMASHING" word and edit the text to "Dzine". Repeat Steps 6, 7, 8 but use different gradient colors (Left color stop: #b27625, Right color stop: #e5ad27) for the word "Dzine".

10 Select the Horizontal Type Tool (T) and add a tag line under the logo with following settings.

11 The final logo should look like the image below. To activate/deactivate the guides, go to View > Show > Grid or use the shortcut Ctrl/Cmd + ;

Creating the navigation bar

12 Create a new group and name it "navigation", it should be above "logo" group. Drag a guide from the top ruler, 150px below the top edge of the canvas. Select the Rectangle Tool (U) and draw a horizontal line of 4px height with a color of #e3ab27, across the canvas.

13 Add navigation links at 12px-high from this horizontal line and 20px to the right of the left guide. Select the Rounded Rectangle Tool (U) and draw a box with the size of 72px by 35px. Move this layer below the text links and name the layer "hover". Straighten the bottom rounded corners with the Convert Point Tool. Move the sides of uneven edges below with an 8px margin to make the edges equal to other inner edges at bottom. Double-click the "hover" layer to open the Layer Style dialog box and add gradient colors (Left color stop: #e5ad27, Right color stop: #b27625). Select the Horizontal Type Tool (T), select the text, "Home" and change color to #ffffff (white).

Creating the "call us" section

14 Next we are going to create the "call us" section at the top-right of our design (exactly opposite side of the logo). Download this phone icon and place this near the right guide. Name this layer "phone icon". Select the Horizontal Type Tool (T). Add a phone number on the left of the phone icon using the font Arial, with the size set at 20pt and the color #292929. Add some related text below the phone number using font Arial, set at Bold, with a size of 11pt and a color of #595959.

Creating the header

15 Now we are going to a create the header section. Create a new group and name it "header".

16 Select the Rectangle Tool (U) and create a rectangle shape with the size of 1200px by 440px. Put this rectangle at a distance of 1px below the navigation bar and name this layer "header bg". Double-click the "header bg" layer, select the Gradient Overlay layer style and have these two colors in the Gradient Editor (Left color stop: #2e2226, Right color stop: #7a7556). See the image below for the rectangle position and colors detail.

17 Create another rectangle from the Rectangle Tool (U) with the size of 960px by 360px. Put this rectangle at the distance of 40px from the top of the "header bg" layer and 0px from the left guide. Name this layer "header container". Preview below what we have done until now with the design.

Creating the "featured project" section

18 Next we will create the featured project section. Create a new group inside the header group and name it "fp". Select the Rectangle Tool (U) and create a rectangle with the size of 630px by 340px at the distance of 10px from the top and the left of header container. Give this layer color of #000000 and name it "fp container".

19 Open an image in Photoshop to place here as your featured project. Go to Select > All (Ctrl/Cmd + A), then Edit > Copy (Ctrl/Cmd + C). Come back to the our web design. Create a new layer above the "fp container" layer and go to Edit > Paste (Ctrl/Cmd + V) to paste in your featured project image. Rename this layer to "fp image". Right-click the "fp image" layer and select Create Clipping Mask. Now the image is visible only inside the rectangle ("fp container"). Make adjustments so that your featured project image is similar to the one shown below.

20 Go to Edit > Transform > Scale (Ctrl/Cmd + T). From the Options bar, click in the rotation box and type -4 and press enter twice to adjust the angle. Stay on the same layer ("fp image"), and select Luminosity as the blending mode of this layer.

21 Next we are going to create the title and description bar for the featured project image. Select the Rectangle Tool (U) and create a rectangle shape with the size of 630px by 90px using color #161718. Change opacity of this layer to 90% and name it "title bg". Place this rectangle as shown in the image below.

22 Create another rectangle with the size of 630px by 1px using color #9c9c9c and name it "title horizontal line". Place this rectangle on the top edge of the contents of the "title bg" layer.

23 Add a title and description inside the rectangle we created in Step 21, using the following settings for title and description.

For the title:

font: Arial, color: #ffffff, size: 25pt and anti-aliasing method option: Sharp

For the description:

font: Arial, color: #a4a4a4, size: 12pt and anti-aliasing method option: None

Creating the "quick quote" section

24 Create another group inside the header group and name it "quick quote". Select the Rectangle Tool (U) and create a rectangle with the size of 300px by 340px. Place this rectangle at the distance of 10px to the right of the featured project section and name it "qq container".

25 We will copy a Layer Style from another layer we created in a previous step. Go inside the "navigation" group, right-click the "hover" layer, select Copy Layer Style, go back to the "qq container" layer, right-click and select Paste Layer Style. We have the same Layer Style of the "hover" layer for our "qq container" now.

26 Select the Horizontal Type Tool (T). Write "Quick Quote" inside "qq container" at the distance of 20px from the top and left edges of the containing box. Set the font family to Trebuchet MS (or a web-safe font of your preference) with the color of white (#ffffff) and anti-aliasing method option set to Sharp. We are going use the Rounded Rectangle Tool (U) to create three form fields. Select the Rounded Rectangle Tool (U) and set the radius to 3px. Then create two rounded rectangles with the size 260px by 35px using the color of white (#ffffff). Then name the shape layers as "field1" and "field2" respectively. Create the third rounded rectangle with the size of 260px by 75px using a white color (#ffffff) and name it "field3". Select the Horizontal Type Tool (T) and create labels for each form field.

27 Select the Rounded Rectangle Tool (U) and create a box of 80px by 35px and name it "submit btn".

28 Double-click the layer to open the Layer Styles dialog window and tick the Gradient Overlay checkbox from left. Click the Gradient Editor and change colors of the gradient as shown below.

29 Select the Horizontal Type Tool (T) and type "Submit" using the font Arial, style Bold and size at 13pt. Select both layers in the Layers panel ("submit btn" and "Submit text").

30 Choose the Move Tool (V) from the Tools panel and click Align vertical centers and Align horizontal centers from the Options bar. (Alternatively, you can get the same result by going to Layer > Align > Vertical Centers and Layer > Align > Horizontal Centers).

Creating the main content area

31 Create a new group and name it "content". Select the Rectangle Tool (U). Create a rectangle of 300px by 175px and name it "c01". Place this layer 30px below the header and 0px from the left guide. Double-click the layer and use the settings from the following image.

32 We are going to add content to this box now. Select the Horizontal Type Tool (T) and add the text, "About SmashingDzine". Make a selection of the "About" word using the Horizontal Type Tool (T), and then change its color to #b47825. Then make a selection of the "Smashing" word, and then change the color to #2f2f2f. Add a little description and a link text beneath the title. The following options were used for the title, description and link text. (You can adjust these options as needed).

For the Title:

Font: Trebuchet MS, style: Normal, size: 24pt, anti-aliasing method: Sharp

For the Description:

Font: Arial, style: Normal, size: 12pt, anti-aliasing method: None, color: #767676

For the Link text:

Font: Arial, style: Bold, size: 13pt, anti-aliasing method: None, color: #252525, Underline

33 We will add a square box next to the description now. Select the Rectangle Tool (U) and color #ffffff, hold down the Shift key to maintain the proportions and create a square with the size 88px by 88px. Move this square at a distance of 10px from the left of rectangle ("c01"). Name this layer "border". Double-click the layer to open the Layer Style dialog window, and add a Stroke layer style with the following settings:

34 Create another box with the size of 82px by 82px and place it in the center of the "border" layer. Name this layer "box" and change the color of this square to #d5d5d5. Select all layers in this group ("content" group), go to Layer > New > Group from Layers (Ctrl/Cmd + G) and rename this new group "about".

Note: The inside grey square box is a place holder for an image and can be replaced with any image of your choosing.

35 Duplicate the "about" group (Right-click on the group and select Duplicate Group) and name it "services". Right-click on the "services" group and select Duplicate Group again and name it "portfolio". We have three groups now ("about", "services", and "portfolio"). Move the last group ("portfolio") to the right guide as shown below.

36 Select all three groups in the Layers panel, and then go to Layer > Distribute > Horizontal Centers to space them out equally. Click here to see the full size image of the following image.

37 Change the titles for the "services" group (center) and "portfolio" group (right) as shown below. (You can change these titles according to your requirement.)

Creating the footer

38 Create a new group and name it "footer". Select the Rectangle Tool (U) and create a rectangle with the size of of 1200px by 100px at the bottom of our design layout. Name this layer "footer bg". Use the same Gradient Overlay style as the "header bg" layer by right-clicking the "header bg" layer and choosing Copy Layer Style. Go back to the footer group, right-click the "footer bg" layer and select Paste Layer Style.

39Select the Horizontal Type Tool (T) and add copyright text and footer links text on the left using the font Arial, size of 12pt and a grey color (#dddddd).

40 We are going to add the email subscription section on the right. Create a new group inside the "footer" group and name it "subscribe". Select the Rounded Rectangle Tool (U) and create a rectangle of 85px by 35px. Name this layer "subscribe btn".

41 Repeat Step 26 for adding the form fields and labels.

42 Select the Horizontal Type Tool (T) and type "Subscribe" using the font Arial, style set to Bold and size at 13pt. Select both layers ("subscribe btn" and "Subscribe text").

43 Repeat Step 28 for creating the subscribe button.

44 Select the Rounded Rectangle Tool (U) and set the radius to 3px. Create a rounded rectangle with the size 210px by 35px using a white color (#ffffff) and name this shape layer as "email field". Add a text line above "email field".

Final Result

OK, that’s it and we are done. Here is the final result. Click on the image below to see the full size layout.

Thanks for following along with my tutorial. I hope you all enjoyed and learned something new from this tutorial. Kindly leave your comments below and share your thoughts and opinions, I would love to hear them. You can also share this design tutorial to your friends if you think it could be helpful to them!

Download the source file

You can download the Photoshop file (PSD) of this tutorial from the link below as a ZIP archive.

clean-professional-weblayout (ZIP, 2.4 MB)

About the Author

Waheed Akhtar is a freelance Web Designer from Dubai, UAE. He is the founder and editor of Smashing Share, where he helps the Design Community by sharing tutorials and design resources. You can reach him via Twitter or Facebook.

Create a Slick and Minimalist Web Layout in Photoshop

Jacob Gube — Fri, 08 Jan 2010 10:00:46 +0000

In this Photoshop web design tutorial, we’re going to learn how to create a slick and minimal-looking website layout. We will use the 960 Grid System as a template to make it easy to align the design elements on the layout.

Preview

Here’s a preview of what we’ll be creating together, click the image to enlarge.

Create a new Photoshop document

1 We’ll be using the 960 Grid System (download it at http://960s/) as a starting template. Once downloaded, ppen up the file called 960_grid_12_col.psd and then hide the group called 12_col_grid.

Creating the background

2 First of all, right-click on the Background layer in the Layers Panel and then choose Layer From Background. This will unlock the Background layer so that it’s editable. I named the Background layer as bg.

3 Now select the Gradient Tool (G), set your Foreground color to #efefef and your background color to #cacaca. Select Radial Gradient as the type of gradient in the Options bar. Drag the gradient onto the canvas so that you have something similar to this:

Designing the header section

4 We’ll add a new horizontal guide at the 50px mark from the top of the document to set our top borders. This will mark the location of the layout’s header section.

5 We’ll start adding our title and slogan; select the Horizontal Type Tool (T) and type your site’s name and your slogan. Here are the font settings I used in the layout:

"YourName"

Font family: Nilland font (get it from dafont.com)
Font size: 33pt
Font weight: Bold
Anti-aliasing setting: Strong
Color: #525252

"some awesome slogan"

Font family: Arial
Font size: 14pt
Font weight: Regular
Anti-aliasing setting: Strong
Color: #207687

6 Align the fonts on the left top, using your guides for accurate placement.

Creating our navigation

7 Select the Horizontal Type Tool (T) and type the navigation text (home, about us, services, portfolio, and contact) using the following font settings:

Font family: Arial
Font size: 17pt
Font weight: Regular
Anti-aliasing setting: Strong
Color: #525252

8 Use the document’s guides to align the navigation link text like the following image:

Creating the search bar

9 Now it’s time to create the search bar that’s situated on the right of the navigation links. Select Rounded Rectangle Tool (U), set the Radius option value to 5px, and then draw the rounded layer shape onto the canvas such that it has 155px width and 20px height, and located at the right of the navigation links.

10 Add an Inner Shadow layer style by double-clicking on the rounded rectangle shape layer in the Layers Panel to open up the Layer Styles dialog box. Use the following settings below for the layer style settings:

11 Let’s create the GO button now. Create a new rounded rectangle shape with the same height (20px) and Radius option value (5px), but with a width of 30px.

12 Apply a vertical (90 degrees) Linear Gradient layer style onto the Go button, with the left color stop being #2fa9c1 and the right color stop being #207687.

13 And then write any text like "search…" using the Horizontal Type Tool (T) on top of the search bar; use a white color (#ffffff).

14 Using the Custom Shape Tool (U), create a white arrow and align it to the center. I used the custom shape called Arrow 2, which comes standard in Photoshop CS versions. Look for it in the Shape option dropdown menu in the Options bar.

Our search bar should be looking like this:

15 Before we move to the next step, just make sure that everything is well-organized in our document. Here’s a screen grab of my Layers Panel as I was developing the layout:

Creating the separating lines

16 Using the Line Tool (U), Create two 1px lines on top of each other, with the following color values:

Note: There are many ways to set the colors of the line shapes. The first is by setting the Color option in the Options bar before drawing the lines. The other way, if you already drew the lines, is to use a Color Overlay layer style. I’ll let you decide how to do this.

Adding the sub-navigation

17 Type your sub-navigation text using the Horizontal Type Tool (T) using the following settings:

Font family: Arial
Font size: 17pt
Font weight: Regular
Anti-aliasing setting: Strong
Color: #787878

18 Make sure that the separating line is centrally aligned between the main and sub-navigation. Here’s how it should look:

Creating the featured designs area

19 We’ll start creating the place where the image of a featured design would be, so we’ll select Rounded Rectangle Tool (U), and we’ll create a rectangle of 335px width and 128px height, and a Radius option set to 5px.

20 Apply a gradient Stroke layer style to it by setting the Fill Type option to Gradient. Modify the gradient colors so that it starts at #31aeca and ends at #2b9ab2.

21 Call this newly created layer photo_holder.

22 Well, let’s add an image of a featured design by going to File > Place. This will open up the Place dialog box where you can select an image to place on our canvas. Pick an image, and then press the Place button when you’re done.

23 Make sure that the layer of the image is above the photo_holder layer; if it isn’t, move it. Right-click on the image layer and choose Create Clipping Mask.

24 Modify the size of the image to fit; you can use Free Transform (Ctrl/Cmd + T). When you’re happy with the size, Make sure that your image is aligned according to the image above, flushed to the right of the layout design.

Add some content to the design

25 Let’s add some content to our design, but before we do that, we have to set our boundaries for our content. To do that, drag two horizontal guides like in the following image.

Add a title and a category

26 Use the following settings for the title and category.

Title (in my case it was "Handstand!")

Font family: Arial
Font size: 20pt
Font weight: Regular
Anti-aliasing setting: Strong
Color: #2197b1

Category (in my case it was "Photoshop design"):

Font family: Arial
Font size: 17pt
Font weight: Regular
Anti-aliasing option: Strong
Color: #313131

Paragraph content

27 Add your paragraph text, using the following image for reference.

28 Choose the Move Tool (V) in the Tools Panel and select our three text layers in the Layer Panel (hold down Ctrl/Cmd while clicking on them to select all of them).

29 Give them equal spacing using the Distribute top edges option.

Create the slider control

30 It’s time to create the slider control. Start by duplicating the two lines we’ve created for the navigation, and then resizing them (you can use Free Transform to do this). We’ll make the dark line darker, giving it a color value of #777575.

31 Then create a small box rectangle shape using the Rectangle Tool (15px wide and 15px high) and apply a Gradient Overlay layer style to it.

32 Before we move to the next step, we have to organize our layers. Use the following reference image to make sure the layers are in proper order.

Creating the content boxes

33 First off, we need to set our boundaries. Drag a horizontal guide and put it on the slider line. Leave a 50px gap, and then add another horizontal guide.

34 Now select the Round Rectangle Tool (U). Create a rectangle of 260px width and 170px height and a color of #d0d0d0. Call this layer bg_1.

35 Align the rectangle like the following reference image, using the Move Tool (V) to position them accurately.

36 Right-click on the bg_1 layer in the Layers Panel and choose Create Layer Mask from the contextual menu.

37 Select the Gradient Tool (G), set your foreground and background color to Black and White (press D to automatically reset the colors). With a linear gradient, drag from top to bottom until you’re satisfied with the look.

38 Now let’s create the shadow. Duplicate the bg_1 layer. Name the duplicated layer shadow. Place the layer beneath the bg_1 layer. Then apply a Color Overlay layer style with a dark gray color (#3e3e3e).

39 While having the shadow layer selected, go Filter > Blur > Gaussian Blur. Set the Blur Radius to 5.0px.

40 Using Gradient Tool (G), adjust the layer mask until you have something like this:

41 Add some content to the box. Below, you’ll see what I ended up with.

42 Group the content layers that you created into a group called content.

43 Now we want to align it. Select the content group, hold down the Ctrl/Cmd key, and select the bg_1 layer in the Layers Panel. Choose the Move Tool (V), and click on the Align horizontal centers option and the Align vertical centers option to position them.

44 Now make two copies of this box by duplicating the layers of the original content box we just created. Align them, change the content, and don’t forget to add a horizontal guide at the bottom.

45 Let’s check back and make sure that all of our layers are organized; use the screenshot of my layers as reference.

Creating the main content area

46 Leave a 50px gap and drag a new horizontal guide. Start adding your content and align it according to the following image.

47 Let’s make it look a bit better. We’ll select Rectangular Marquee Tool (M). In the Style option, choose Fixed Size with a fixed width of 15px and a fixed height of 30px. Set your foreground color to #12197b and fill the rectangular marquee selection with the color (Press Ctrl/Cmd + Backspace to fill).

48 Using the same settings, you can add some content in the right side.

49 Drag a new horizontal guide at the bottom. Add a separating line; use the following image for reference.

50 Check back to see all your layers are organized, using the following image as reference.

Creating footer area

51 We’ll start with the footer area creation by (again) creating a new horizontal Guide. Leave a 50px gap between the guide above, and drag a new horizontal guide!

52 Select the Single Row Marquee Tool (M). Set your foreground color to white (#ffffff). Click on the canvas to create the marquee selection. Then press Ctrl/Cmd + Backspace to fill it. Call this layer 1px_upper_line.

53 Select Rectangular Marquee Tool (M) and create a rectangle of 1020px width (it spans the entire width of the canvas, and 160px height. This will be the background of the footer area. Fill it with any color. Apply a Gradient Overlay layer style to it using the following settings.

54 Duplicate the 1px_upper_line layer and move it to the bottom of the footer, call it whatever name you want, but I’ve called mine 1px_down_line. Here’s how it looks.

55 Start adding some content; use the following images for reference:

56 You can download the social media icons from deviantART – they’re called Aquaticus.Social by Junwei.

57 Align them like in the following image:

Creating the small footer

58 Drag a new horizontal guide at the bottom of the big (brown footer), leave a 50px gap, then add a new horizontal guide.

59 Then write your footer navigation text like so:

60 Write the copyright text and align it to the right, add a final horizontal guide.

Adjusting the canvas size

61 Finally, we need to leave another 50px gap between the footer navigation, copyright text and the borders in order to do that, we’ll adjust our canvas size.

Conclusion

And there we have it! We’ve created a clean and minimal layout design!

Download source file

You want a PSD copy don’t you? Here’s a ZIP archive that contains a PSD, and a JPG preview, get it now!

slick-minimal-layout.zip (4.97MB, ZIP)

About the Author

Mahmoud Khaled a web and graphics designer from Egypt. He’s also a blogger and tutorial writer. At a young age of 15, he already shows skills equivalent to his much older counterparts. Send him a tweet @MahmoudKhaled, connect with him on Facebook, and visit his site and blog called mkhaled.com.

Coding a Band Website Created in Photoshop

Jacob Gube — Tue, 29 Dec 2009 13:56:53 +0000

In Part 1 of this tutorial, you learned step-by-step how to design an awesome band website in Photoshop. Now in Part 2, you’ll learn how to take that PSD and turn it into clean, working XHTML/CSS code.

Band Website Series:

Part 1: How to Design a Band Website Layout in Photoshop
Part 2: Coding a Band Website Created in Photoshop

Working Proof

If you follow along with the tutorial, you should end up with the following live demonstration.

Click to view live demo

Setting up the files

1 Start out by creating a new folder on your computer to put all of the site files in; I titled my folder sixrevisionsband. Create another folder in your working folder you just created and call it images; it will contain all the images, including CSS background images, for the site.

2 Now open up your favorite code editor (I use Coda.) Create a new HTML file titled index.html in the root of the folder -this will be our main page template. I like to keep all of my stylesheets in one folder in case I need to add a few different stylesheets. That way they are all kept together neatly. So we’ll add a folder titled css, and a CSS file inside it titled screen.css. screen.css will be the main stylesheet for our template.

I start out the HTML with some basic stuff, making sure to add a title and a link to the stylesheet:






Six Revisions Band Website

My stylesheet also starts out with a few basic styles such as a border, margin, padding reset for all elements and some style declarations for common elements such as headings, lists, paragraphs, and hyperlinks. Then to organize, I break the stylesheet into several logical parts so that when I maintain the stylesheet later on, things will be easier to find:

/***** Global Settings *****/

html, body {
  border:0;
  margin:0;
  padding:0;
}

body {
  font:.9em/1.3em arial, helvetica, sans-serif;
  color:#403d3d;
}

/***** Common Formatting *****/

h1, h2, h3, h4, h5, h6 {
  margin:0;
  padding:0;
  font-weight:normal;
}

h1 {
  padding:30px 0 25px 0;
  letter-spacing:-1px;
  font:2em arial, helvetica, sans-serif;
}

h2 {
  padding:20px 0;
  letter-spacing:-1px;
  font:1.5em arial, helvetica, sans-serif;
}

h3 {
  font:1em arial, helvetica, sans-serif;
  font-weight:bold;
  padding:5px 0 10px 0;
}

p, ul, ol {
  margin:0;
  padding:0 0 18px 0;
}

ul, ol {
  list-style:disc;
  padding:0 0 18px 40px;
}

img {
  border:0;
  margin: 0 0 5px 0;
}

/***** Links *****/

a, a:visited {
  text-decoration:underline;
  color:#403d3d;
}

a:hover {
  text-decoration: none;
}

/***** Wrapper *****/

/***** Header Area *****/

/***** Homepage Content *****/

/***** Footer *****/

/***** Global Classes *****/

.clear { clear:both; }

Starting with the background (in Photoshop)

3 I like to start out from the back and work my way forward (towards the screen). If you downloaded the PSD file from Part 1, you’ll notice the layers are organized into folders: header, home, footer, and back. This helps for the coding process.

You’ll want to turn off all of the groups except for back, which contains all of the layers with the background files. You’ll also want to turn off the content area, and you’ll be left with this:

4 You’ll need to change the canvas size (Image > Canvas Size) to 1600px wide so the background will be wide enough to save as a full-width background. Once we do that, we see that the grid texture has harsh lines that we’ll need to get rid of.

5 We’ll create a mask like we did in Part 1. Select the layer with the grid texture by holding down the Cmd/Ctrl key and clicking on the layer thumbnail in the Layer Panel.

6 Then create the layer mask by clicking on the Add Layer Mask button at the bottom of the Layer Panel.

7 We’ll choose a large soft round brush, like Soft Round 300 and change the Opacity and Flow settings to 50%. Make sure your foreground color is set to black (press D to reset your foreground and background color quickly). Softly brush the sides (not the bottom) a few times until the harsh lines are all gone. Your background should look like this:

5 Our background is ready to save. Choose File > Save for Web & Devices. I like to experiment in here and find the best settings for the image, while trying to keep the file size as low as possible. With this image, I found that a JPG at 40% keeps the file size fairly low but the quality good enough so that it’s not pixilated. Save this to the images folder as background.jpg.

Adding the background to the web design

6 To add the background to your design, use the body element’s CSS background attribute. The style declaration below tells the background not to repeat, to be at the top and in the center at all times, and when the picture runs out, use the tan color #d5d4c2.

body {
  background: url(../images/background.jpg) no-repeat top center #d5d4c2;
}

Next, we’ll need to make sure all of our other items are centered in a 960-pixel wide wrapper. I’ll add a wrapper div in HTML:

And then we’ll need to give it some styles to center it:

#wrap {
  width:960px;
  margin:0 auto;
}

Working on the site’s logo

7 Turn all layer folders back on to see what’s next. I like to code in the order the items will be in the HTML, so the logo is next. I add some guides around the logo to make everything precise and then I crop the logo to the guidelines. I save this out as a JPG at 40% as well.

8 Now we’ll add the logo in with an h1 tag, which tells search engines that this an important element on our page. Then we’ll add an a tag inside of it that will link back to the homepage.

Six Revisions

I like to use a negative text-indent which will hide the text from sighted viewers, but will still be visible to search engines and screen-reading technologies.

And then I add the image in as a background in the stylesheet. We’ll also need it to float it left because the navigation will be floating to the right. Here’s what the CSS looks like:

#logo h1 {
  float:left;
  display:block;
  padding:21px 0 0 23px;
  text-indent:-2000px;
  margin: 0;
}

#logo h1 a {
  width:293px;
  height:100px;
  display:block;
  background:url(../images/logo.jpg) no-repeat;
}

Coding the navigation

9 Moving on to the navigation. First we’ll go in and crop out the hover background, cropping it at 1px wide by 110px tall. We can save it out as a PNG-24. The transparency will work everywhere except in Internet Explorer 6 and below, but it’ll appear as a light grey background there, which I’m fine with.

As a quick note, I do test and make sure my sites are functioning in Internet Explorer, but as you may know, IE6 has several issues, like not supporting certain image types (like PNG-24s) and misinterpreting certain CSS specs. So I find ways to make it work but according to browsers stats by w3 schools in October 2009, only 10.6% of internet users are still using IE6 and it appears to be dropping quickly. So, although the light grey hover background isn’t as classy as the transparent PNG-24, it gets the job done, which is my method for taking care of IE6. Period. Ok let’s move on.

We’ll use a straightforward unordered list, and the HTML will look like this:


  
    News
    Songs
    Photos
    Videos
    Tours & Events

I’ll show you the CSS and then I’ll break it all down:

#navigation {
  float: right;
  display: block;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 1.1em;
}

#navigation a {
  color: #706752;
  text-decoration: none;
}

#navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  float: right;
  display: block;
}

#navigation li {
  float: left;
  display: block;
  padding: 64px 0 33px 0;
}

#navigation li a {
  padding: 64px 14px 33px 14px;
}

#navigation li a:hover {
  background: url(../images/hover.png) repeat-x;
}

First, I floated the navigation to the right to get it into place. Then I added some styles to get the look of the text to be uppercase and bold with a 1.1em font size. Also, I changed the link color to #706752 and told it not to have any underline.

#navigation {
  float: right;
  display: block;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 1.1em;
}

#navigation a {
  color: #706752;
  text-decoration: none;
}

Now onto our unordered list. First, I took away any list-style and zeroed out the padding and margins, and then added another float right to get it placed correctly.

#navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  float: right;
  display: block;
}

Next, I floated the li to the left to get each link to sit next to each other, because the default is to line up vertically. If you float the li right, then your links will be listed backwards. Then, I added padding to the top and bottom of the li with #navigation li to get the links in the right place.

#navigation li {
  float: left;
  display: block;
  padding: 64px 0 33px 0;
}

This padding spaces the li’s out from side to side and also tells the hover action the height.

#navigation li a {
padding: 64px 14px 33px 14px;
}

And finally we add in our hover background, which will repeat horizontally.

#navigation li a:hover {
background: url(../images/hover.png) repeat-x;
}

Coding the content area

10 Moving on to the content area. Back in Photoshop, we’ll turn off these groups: home and footer, leaving back and header group on. We’ll add guides to the top and the bottom of the content area to decide where we’d like to crop it. I find that 960 pixels wide by 710 pixels tall will be a good size and plenty tall enough. Crop it and save it for the web. And again, a JPG at 40% will do the trick.

We’ll clear the float above with:

Then we’ll add a div called #contentarea for the content area and then style it. A simple hack was added here, as IE6 doesn’t recognize min-height. The two lines beneath min-height (height and _height) allow IE6 to recognize the fact that we’d like the #contentarea div to be at least 830px tall. I also added in padding to push all the content inside in the right place easily.

#contentarea {
  background: url(../images/contentarea.jpg) no-repeat top center;
  width: 908px;
  min-height: 684px;
  height: auto;
  _height: 684px;
  margin: 18px 0 0 0;
  padding: 26px 26px 0 26px;
}

11 Next, inside the content area is the feature. You can place a slider here using this tutorial called Create a Slick and Accessible Slideshow Using jQuery or use a flash component. To keep things simple for the code and for the purposes of this tutorial, we’ll just simulate the look of the an animated feature with a simple image for now.

I’ll keep call this section #flash:

And the CSS is basic dimensions and margin definitions:

#flash {
  width: 908px;
  height: 411px;
  margin: 0 0 35px 0;
}

The margin on bottom accounts for the space between the #flash div and the 3 columns that will be below.

Creating the columns

12 Now we’ll crop out the next couple photos to get everything ready for the 3 columns of content below the flash. We’ll need to crop the video (which we’ll simulate with an image for this tutorial, just like we did with the #flash image), and the 6 social media icons.

13 Next we’ll set up the HTML for the columns. The br tag clears the float for the footer that will be below these columns.

Some simple CSS gets the columns all set up and in place:

#column1 {
  float: left;
  display: block;
  width: 233px;
  margin: 0 68px 0 0;
}

#column2 {
  float: left;
  display: block;
  width: 335px;
  margin: 0;
}

#column3 {
  float: right;
  display: block;
  width: 207px;
  margin: 0;
}

14 We’ll add the content to the first column and your html should look like this:


  Latest Videos
  

  Another video to watch here

  And yet another video here

15 For the blog posts in column 2, I could use simple pie or some php script to call in the 3 most recent blog post titles and a couple lines, but for now we’ll just add some simple HTML to column 2 to simulate the look of the blog posts:


  Six Revisions blog
  Lorem ipsum dolor sit amet consectetur adipiscing

			Nunc eu mi risus, nec luctus justo.[...]
  Bibendum est eu gravida cras dui sem

			Venenatis a egestas id, consectetur faucibus nibh.[...]
  Aliquam arcu nisi, sagittis at feugiat quis

			Accumsan ut metus. Mauris rhoncus[...]

16 The third column will be set up using some unordered lists, to get the indent without having to use another div. Here’s our HTML:


  Connect with us

I also had to add some CSS to control the unordered list properly:

#column3 ul {
  list-style: none;
}

#column3 li {
  float: left;
  display: block;
  padding: 0 27px 10px 0;
}

The finale: the footer

17 Almost there! Moving onto the final piece, the footer. Add some simple HTML:


  copy; 2009 Six Revisions Band  |  contact us

And the CSS is pretty simple as well. The line was added with a 6px border at the top and I needed some space above the line (which I created with margins) and some space below the line and above the text (which I created with padding). I also wanted some space below the text and before the edge of the browser window, which I created with padding as well. And the font size needed to be slightly smaller than the other body copy, so I made it .9em.

#footer {
  width: 960px;
  border-top: 6px solid #c4c2af;
  padding: 10px 0 30px 0;
  text-align: center;
  margin: 30px 0 0 0;
  font-size: .9em;
}

And we’re all finished!

Thanks for following along through the full tutorial. I hope you learned some coding techniques and PSD to XHTML/CSS tricks. Feel free to ask any questions and definitely let me know what you think in the comments area.

Download the source files

band-website-html-css (ZIP, 0.22MB)

About the Author

Shannon Noack is a designer in Arizona and the Creative Director of Snoack Studios. Designing is her passion in life and she loves to create websites, logos, print work, you name it. She also blogs regularly at the Snoack Studios blog and you can connect with @snoackstudios on Twitter as well.

Create a Zoomed In Effect in Photoshop

Jacob Gube — Thu, 17 Dec 2009 10:00:03 +0000

This tutorial will walk you through a simple process of giving a zoomed-in effect for your illustrations. This can be used in numerous ways, but primarily for designing instructional visual material.

Preview

Setting up the Photoshop document

1 First, we are going to open up Photoshop and create a new document (Ctrl + N). In the New document dialog box, set the Width and Height units to pixels (if it isn’t already). We’re creating a square canvas; set the width and height to 600 pixels. We’re creating a graphic that’s web resolution, so set the Resolution to 72 pixels/inch.

Adding graphics to the canvas

2 Choose a good resolution graphic (500 x 500px) which has enough resolution and detail to show as the zoomed part. Vector graphics are always great because you can rescale them without loss of quality. Here I am using the Envelope Icon from the free Six Revisions Plastic Iconset. Paste (Ctrl + V) the graphic to the stage and name the new layer Zoom.

3 Duplicate the Zoom layer by right-clicking on it in the Layers Panel and choosing Duplicate Layer (Ctrl + J). Name the duplicated layer Small Graphic.

4 Go to Edit > Transform > Scale and scale down this layer to 40% and place around the top center on the stage. Hide the visibility the Zoom layer.

Creating the zoom effect

5 Choose a dark gray color (#464646), hold the Shift key and using Ellipse Tool (U) to create a perfect (and big) round circle shape. Name this layer round01.

6 Duplicate the round01 layer, rename the new layer round02 and scale it down to 90%. Set the color of the ellipse shape to #707070.

7 Similarly, duplicate round02 and create a round03 with 96% scale down and color set to #ffffff.

8 Select round01 and go to Layer > Layer Style > Gradient Overlay. Click on the gradient and in the Gradient Editor, add color stops in this order: #ffffff at 2% location, #707f82 at 30%, #b5bfc1 at 35%, #536162 at 85% and #ffffff at 95% location.

9 Let us add an outline. Go to Layer Style > Stroke. The Size option should be set at 1px, Position: Inside and Color: #858585.

10 Similarly, select round02 and add gradient overlay in this order: #e3e8eb at 0% location, #ffffff at 15% location, #6b797c at 40% location, #b4bebf at 50% location, and #576264 at 100% location.

Creating the handle

11 Choose the Small Graphic layer in the Layers Panel, add a new layer on top of it (Shift + Ctrl +N), and name the new layer handle. Use the Ellipse Tool (U) and draw another round circle (remember to hold down Shift to make it a perfect circle) covering your small graphic’s main detail.

12 Duplicate handle shape layer, name it handle out, and scale it down to 95%.

13 Rasterize the handle and handle out layers by right-clicking on the respective layer in the Layers Panel and then choosing Rasterize Layer.

14 Create a marquee selection around the shape by Ctrl + clicking on handle out layer’s thumbnail in the Layers Panel. Choose the handle layer in the Layers Panel with the marquee selection still active, and then press the Delete key to delete the area beneath the selection.

15 Select > Deselect (Ctrl + D) to deselect the selection and delete handle out layer (we don’t need this layer anymore).

16 Using Rectangle Tool (U), create a thin rectangle with each end touching the handle and zoom (alternatively, you can use the Line Tool).

17 Rasterize the thin rectangle layer and merge it with handle layer by selecting both the layers in the Layers Panel and then going to Layer > Merge Layers (Ctrl + E).

18 Add some color and outlines to the handle. To change the color, go to Layer > Layer Style > Color Overlay and set the color overlay to #686868. For the stroke, go to Layer > Layer Style > Stroke and choose 2px and a color of #ffffff.

Adding the zoom detail

19 Unhide the zoom layer and move it to the top of round03 layer, in the Layer Panel.

20 Create a marquee selection around the round03 shape by Ctrl + clicking on the round03 layer thumbnail in the Layers Panel. Invert the selection by going to Select > Inverse (Shift + Ctrl + I). Select zoom layer and press the Delete key.

21 Keep the marquee selection active, don’t deselect it yet. Add an outline using a stroke of 3px and color #323232 by doing to Edit > Stroke. Then add an inner shadow layer style (Layer > Layer Style > Inner Shadow): set the Distance option to 0px and Size option to 25px.

22 Create a new layer below round01. Ctrl + click on the thumbnail of round02 to create another marquee selection. Move the selection vertically using your arrow key so that its lower tip touches the lower tip of round01. Fill the color with black (#000000) by right-clicking on the selection in the canvas and selecting Fill. Deselect (Ctrl + D) and add a Gaussian blur (Filter > Blur > Gaussian Blur) with the Radius option set to 15px.

Finished!

I hope you enjoyed this tutorial. Show us your own work by including it in the Six Revisions Flickr group.

About the Author

Himanshu Khanna is a communication designer from the capital city of New Delhi in India. A big follower of visuals and innovation, he is working hard towards becoming an entrepreneur. Additionally, he freelances as a graphic, interaction designer and photographer. You may check his works at www.sparklin.com and follow him on Twitter at @SparklinGuy.

Create a Winter Theme Web Design in Photoshop

Jacob Gube — Wed, 16 Dec 2009 10:00:49 +0000

In this web design tutorial, you will learn how to create a winter blog layout in Photoshop. We will use a photo of a forest for the background and then blur areas of that photo to create other elements like the logo and the navigation bar.

Preview

Click on image to see full size.

Tutorial info

Resources: Winter Photo by heavens-stock
Fonts: Interstate (Regular Condensed and Black Condensed), Georgia, Helvetica/Arial

Setting up the Photoshop document

1 Create a new document in Photoshop (Ctrl/Cmd + N) using the settings from the following image. Then use the Paint Bucket Tool (G) to fill the Background layer with the color #e3f2f6.

Grid settings

2 Open the Preferences window (Ctrl/Cmd + K), click on "Guides, Grid & Slices" and use the settings from the following image for the grid. We will use the grid when creating different shapes for our layout because it’s a very easy way to get the exact size we want. To activate/deactivate the grid, go to View > Show > Grid or use the shortcut Ctrl/Cmd + ‘.

Creating the content background

3 Create a new layer and set your foreground color to white. Activate the grid (Ctrl/Cmd + ‘) and make sure that your Info Panel is opened (Window > Info). When you want to create a shape with a certain size, you can see the exact size of that shape in the Info Panel while you are creating it. Select the Rounded Rectangle Tool (U), set the Radius to 10px and create a rounded rectangle with the width 960px. Note that only the top right corner should be rounded. To make the other two corners straight, expand the rectangle beyond the edges of the canvas. Name this layer content bg. Now you can now hide the grid (again, press Ctrl/Cmd + ‘ to toggle its visibility).

Adding guides

4 Make sure that the Rulers are activated by going to View > Rulers and making sure there is a check on the left (Ctrl/Cmd + R to toggle the visibility of your Rulers), then click on the one from the top and drag a guide towards the top edge of your content background. Then drag another guide from the left ruler to the right edge of your content background.

Note: You can also drag guides to the edges of your Photoshop canvas.

Adding a winter photo in the header

5 Download this photo, open it in Photoshop and use the Move Tool (V) to move it into your first document. Name this layer photo and convert it into a smart object (right-click on it in the canvas and select Convert to Smart Object). Go to Edit > Free Transform (Ctrl/Cmd + T), hold down the Shift key and make this layer smaller. Go to Filter > Sharpen > Sharpen and set the blend mode of this layer to Overlay 80%.

Add a mask to this layer by going to Layer > Layer Mask > Reveal All. Set the foreground color to black, select the Gradient Tool (G) and drag a black to transparent gradient from the right edge of the photo to about 100px to the left.

Creating the logo

6 Now we are going to create a logo for our web layout. We will take a small part of the winter photo, blur it, add some color over it, create a subtle stroke and finally add the text. Create a new group (Layer > New > Group) and name it "logo". Create a new layer, then go to Image > Apply Image and click OK. This will merge a copy of all the layers you have into the new one. Use the Rectangular Marquee Tool (U) to create a selection with the size 380px by 90px in the left side of the header. Then go to Select > Inverse (Ctrl/Cmd + Shift + I) to inverse the selection and hit the Delete key. You may not deselect the marquee selection by going to Select > Deselect (Ctrl/Cmd + D).

7 Now we want to blur this layer without modifying the rectangle shape. To do this, first, convert this layer into a smart object (right-click on it and select Convert to Smart Object). Then Ctrl/Cmd + click on the thumbnail of this layer in the Layers Panel to load the selection of the rectangle. Go to Layer > Layer Mask > Reveal Selection. Now your layer has a mask and only what is white on this mask will be visible.

Go to Filter > Blur > Gaussian Blur and use a radius of 5px. As you can see, the layer is now blurred but the rectangle shape did not change because of the mask. And this is what we want.

Add a little bit of noise to this layer by going to Filter > Noise > Add Noise. Use the settings from the following image. Then go to Filter > Sharpen > Sharpen. Name this layer gaussian blur.

8 Go to Layer > New Adjustment Layer > Brightness/Contrast, tick the Use Previous Layer to Create Clipping Mask option and use the settings from the following image.

9 Use the Rectangle Tool (U) to create a rectangle with the same size of 380px by 90px using the color #9dd8ed. Double-click on this layer and use the settings from the following image. Then name it blue rectangle and set its blend mode to Multiply and lower the layer Opacity to 25%.

10 Now we are going to add a subtle stroke to the logo. Use the Rectangle Tool (U) again to create another rectangle with the same size of 380px by 90px. Put this layer beneath the gaussian blur layer, double-click on it to open the Layer Style window and use the settings from the following image. Name this layer stroke.

11 Select the Horizontal Type Tool (T) and write the name of your web layout using the color #f2feff and the font Interstate Condensed Black (if you don’t have this font, feel free to chose any other one you think is suited for this layout).

Double-click on this layer to open the Layer Style dialog box and use the settings from the following image.

Creating the navigation bar

12 Create a new group and name it navigation bar. Then hide the content bg layer because we want to copy an area of the photo that is beneath this white rounded rectangle. Create a new layer inside the "navigation bar" group. Then go to Image > Apply Image and click OK. Now a copy of every layer has been merged into this layer.

Ctrl/Cmd-click on the vector mask of the content bg layer to load a selection of the white rounded rectangle. Show the grid using the shortcut Ctrl/Cmd + ‘. Then select the Rectangular Marquee Tool (M), from the option bar select the Intersect with selection option and create a new selection over the active one. Make sure that the intersected area has a height of 50px (that means 5 squares on the grid).

Now inverse the selection (Ctrl/Cmd + Shift + I) and hit Delete to erase everything but the navigation bar. Press Ctrl/Cmd + D to deselect. Then make the "content bg" layer visible again.

Note: click on the following image to see a larger version.

13 Now we are going to blur the "navigation bar" layer and again, we don’t want to change the shape of this layer. For the logo we have used a mask to keep the rectangular shape intact. Now I’ll show you a different technique. Make sure that the navigation bar layer is active, then click on the Lock transparent pixels button from the top of the Layer Panel. You should see now a white lock in the right side of your layer. Locking the transparent pixels means that any change you do to this layer will affect only the existing pixels. This way we can blur the layer without modifying its edges.

Now we’ll add the same filters which we have used for the logo. First add a 5px gaussian blur. Then add a 0.2% noise, distribution: uniform and the monochromatic option ticked. Finally go to Filter > Sharpen > Sharpen.

14 Double-click on the navigation bar layer to open the Layer Style window and use the settings from the following image.

15 Go to Layer > New Adjustment Layer > Brightness/Contrast, tick the Use Previous Layer to Create Clipping Mask option and use the settings from the following image.

16 Set the foreground color to #b1e3f3, select the Rectangle Tool (U) and create a rectangle over the whole navigation bar. Then right-click on this layer and select Create Clipping Mask to make it visible only on the navigation bar. Set the blend mode of this layer to Multiply and layer Opacity to 25%.

17 Select the Horizontal Type Tool (T) and add the name for your navigation menu items using the color #f2feff.

Creating the search bar

18. Now we are going to create a search bar in the right side of the navigation bar. Create a new group and name it search bar. Select the Rounded Rectangle Tool (U) and set the radius to 6px. Then create a rounded rectangle with the size 250px by 30px using the color #f0f7f9. Name this layer search bar.

Select the Horizontal Type Tool (T) and write something inside your search bar using the font family Georgia with the italic style and the color #a1c6D0.

Creating a featured post area

19 Now we are going to create an area where can be shown some featured blog posts. Create a new group and name it featured. Select the Rectangle Tool (U) and create a rectangle with the size 600px by 250px using the color #ebf3f5. Put this rectangle at a distance of 30px from the left edge of the document and at 20px from the bottom edge of the navigation bar. Name this layer rectangle, double-click on it to open the Layer Style dialog box and use the settings from the following image.

You should also add more guidelines so you can align everything easily.

20 Open any image you like in Photoshop and move it into your document. Put this layer above the rectangle layer, right-click on it and select Create Clipping Mask. Now your image is visible only inside the rectangle.

21 Use the Custom Shape Tool (U) to create a white arrow in the right side of the rectangle. Double-click on this layer and use the settings from the following image for Drop Shadow. Name this layer right arrow.

22 Duplicate the right arrow layer (Ctrl/Cmd + J), go to Edit > Transform > Flip Horizontal and move the new layer in the left side of the rectangle. Double-click on this layer to open the Layer Style window and change the angle of the shadow to 180 degrees.

23 Create a new group and name it squares. Then select the Rectangle Tool (U), hold down the Shift key to maintain the proportions and create a square with the size 100px by 100px. Move this square at a distance of 10px from the bottom of the big rectangle. Name this layer square 1. Then copy the layer style of the rectangle layer and paste it to this layer.

Duplicate the square 1 layer four times and number each one. You should have five squares now. Next, I’ll show you how to align all the squares. First, move the square 5 layer to the right side of the big rectangle and leave all the other ones in the left side. Then select all five layers, select the Move Tool (V) and click on the Distribute horizontal centers button from the option bar (Alternatively, you can go to Layers > distribute > Horizontal Centers).

24 Use the Pen Tool (P) to create a small triangle at the top of your first square using the color #d2d2d2. Name this layer arrow.

Adding the content

25 Create a new group and name it content. Then select the Line Tool (U), set the weight to 1px and create a horizontal line with the width of 600px using the color #eeeeee. This line will separate the featured area from the content. Put this layer at a distance of 15px from the bottom of the squares and name it separator.

26 Select the Rectangle Tool (U) to create a rectangle with the size 280px by 120px. Move this rectangle at a distance of 15px from the separator. Then right-click on this layer and paste the layer style which you have copied from the featured area rectangle. Select the Type Tool (T) and add some text beneath the rectangle. For the heading I have used the font Georgia (with the color #153d48 and the italic style), and for the text block I have used Helvetica (with the color #333333).

Note: if you don’t have the font Helvetica, you can use Arial.

27 Duplicate the rectangle layer and the text layer by selecting them and dragging them over the Create a new layer button from the bottom of the Layers Panel. Then select the Move Tool (V) and move these two new layers in the right side of the content area. Continue to duplicate these layers until you have six blog posts. Take a look at the following image for reference.

28 Select the Line Tool (U) and create a vertical separator between the posts using the color #eeeeee.

Creating the sidebar

29 Create a new group and name it sidebar. Then select the Rectangle Tool (U) and create a rectangle with the width of 300px using the color #f5f9fa. Name this layer sidebar bg.

30 Select the Line Tool (U) and create one vertical line in the left side of your sidebar using the color #d1e2e6. Name this layer 1px left line. Duplicate this layer (Ctrl/Cmd + J) and move it to the right side of the sidebar. Then name this layer 1px right line.

31 Create a new group and name it ads. Use the Rectangle Tool (U) to create four squares with the size 125px by 125px. Then you can use the Horizontal Type Tool (T) to write the word AD in the middle of every square.

32 Use the Type Tool (T) to add some content in the sidebar. For the headings I have used the font Interstate Regular Condensed (with the color #3f4e52), and for the lists Helvetica (with the color #525657).

Creating a Flickr group area

33 Create a new group and name it flickr. Then use the Rectangle Tool (U) to create a square with the dimensions 80px by 80px. Right-click on this layer and paste the layer style which you have copied from the featured area rectangle. Duplicate this square eight times and then use the Move Tool (V) to arrange all these layers.

Creating the footer

34 Create a new group and name it footer. Select the Rectangle Tool (U) and create a rectangle with the height of 40px at the bottom of your layout using the color #e0e6e8.

35 Select the Line Tool (U) and create a horizontal line at the top of the footer using the color #d1d6d8. Name this layer 1px top line.

Then create a small vertical line in the right side of the footer. Name this layer 1px right line.

36 Select the Type Tool (T) and add a copyright statement in your footer using the color #afb5b7.

Final Result

Well, that’s it! We have just finished creating a winter blog layout in Photoshop. To see the full size layout click on the following image.

Click on image to see full size.

I hope you enjoyed this tutorial and you learned some new things. I wish you all a Happy Holiday!

Show us yours!

If you found this tutorial useful and you followed along with it, why don’t you share your work in the Six Revisions Flickr group pool and show it off to the rest of the community?

About the Author

Ionut Ciursa is a freelance designer based in Romania. Photoshop is one of his passions and he has been using this wonderful program for about four years. He loves to share his knowledge with others through his tutorials. He is also the founder of PSDBURN.com where he writes Photoshop tutorials.

Create a Slick Business Card Design with Stunning Typography

Jacob Gube — Wed, 09 Dec 2009 22:50:27 +0000

Whatever profession you’re in, there’ll come a time when you’ll need your own business card. This graphic design tutorial will show you a way to create a standard two-sided business card design in Adobe Photoshop that you can take to your printer.

Final Result

Click image to enlarge.

Set up the Photoshop canvas

1 Open a new Photoshop document that is 3.75 x 2.25 inches. Make the resolution 300 pixels per inch and set the color mode to 8-bit CMYK. A typical business card is 3.5 x 2 inches; however, to optimize the card for printing, there needs to be a quarter of an inch space along each edge called a bleed. Whatever is located in this area will not be shown in the final print.

Apply a radial gradient overlay

2 Fill the canvas with a radial gradient overlay. To add a gradient overlay layer style, double-click on the Background layer, make it editable and then double-click on it again to open the Layer Styles dialog box. Check the box beside Gradient Overlay, and in the Styles option dropdown, select Radial. Use white for the lighter, innermost color, and #c6c5c5 for the darker, gray color.

Creating the red warped rectangle shape

3 With the Rectangle Tool (U) from the Toolbox, draw a long, thick rectangle on the canvas like shown in the following figure. The color doesn’t matter since we will be applying a layer style to it.

4 With the rectangle shape layer selected in the Layers Panel, push Ctrl + T to enter Free Transform Path mode (alternatively, go to Edit > Free Transform Path) and right-click inside the transform box that appears. Choose Warp from the contextual menu, and from the Warp Options bar, choose Rise as Wrap type dropdown menu. Warp the rectangle shape using the transform controls until you have something similar to this.

5 Apply a linear gradient layer style to the warped shape. Use #841618 for the darker color in the gradient and #e82d33 for the lighter color. Once that’s done, use the Move Tool (V) to move the shape near the bottom of the canvas.

6 Duplicate the rectangle shape by pushing Ctrl + J on your keyboard. Then drag the duplicated layer below the original layer to move it behind. On this new duplicated shape layer, apply a linear gradient overlay layer style to the new shape. Use black (#000000) for the darkest color and #2b2b2b for the lighter color. Use the Move Tool (V) on this duplicated warp layer to move it so that only some parts of the top is showing.

Creating the person’s name

7 Use the Horizontal Type Tool (T) and type "John" and "Smith" (or your own first and last name) in black on two different layers near the upper left corner of the canvas. Use 25 pt, bold, Myriad Pro for "John" and 25 pt, Myriad Pro Condensed for "Smith". This font family comes with newer versions of the Windows operating system, but if you do not have this font, use something clean and professional (a sans serif font family will do the trick).

8 Apply a gradient overlay and stroke layer style to "John" text layer. On the gradient overlay, use #df1f26 for the lighter red color and #811517 for the darker color.

9 Also apply a Stroke layer style on both the "John" and "Smith" text layers. The stroke size is 1px and its position should be Outside. For the Fill Type stroke setting, choose Gradient from the dropdown menu. The gradient used for the stroke can be found in the Metals gradient preset, to access it, click on the rightward pointing arrow in the Presets box inside the Gradient Editor dialog box, this will show a contextual menu where you should be able to find Metals. Replace the dark gray color stops with the color #838484. For the "Smith" layer, just apply the same stroke settings, but don’t apply the gradient overlay.

Creating a text dropshadow

10 Select both name text layers in your Layers Panel (hold down Shift and click on each on of them) and duplicate the selected layers by right-clicking, and choosing Duplicate Layers from the contextual menu that appears.

11 Right-click on these new duplicated layers and choose Rasterize Type from the contextual menu that appears. Right-click once again and choose Merge Layers to combine them into just one layer. Push Ctrl + T to enter Free Transform mode and shrink this layer vertically using the transform controls until you have something similar to shown. This will become the text shadow.

12 Double-click on the text shadow layer to enter the Layer Styles dialog box. Apply a black (#000000) color overlay to the text shadow layer and move it behind the original name layers.

13 Apply Gaussian Blur by going to Filter > Blur > Gaussian Blur. Set the blur Radius to 4px. Then, set the layer’s opacity in the Layers Panel to 30%.

You should have something similar to this:

Creating the text reflection

14 Duplicate the original name layers again. Rasterize and merge the duplicated layers like before (see Step 11). Push Ctrl + T to enter Free Transform mode, right-click inside the transform box that appears, and choose Flip Vertical from the contextual menu. Move this layer just a few pixels underneath the original text on the canvas using the Move Tool (V) and your arrow keys. Select this layer in the Layers Panel, and then drag it behind the original name layers and shadow layer. This will become the text reflection.

15 Get the Gradient Tool (G) from the Tools Panel. In the Gradient Tool Options bar, choose the gradient preset called Foreground to Transparent and select Linear as the Style setting. Set your foreground color to black (you can do this by simply pressing D on your keyboard to reset the foreground and background color to the default). Make sure the reflection layer is the active layer in the Layers Panel, and then press Q on your keyboard to enter Quick Mask mode. Drag the gradient from the top of the reflection layer to the bottom, then press Q once again to exit Quick mask mode. A selection will appear. Press the Delete key five times on your keyboard, then Ctrl + D to end the selection.

16 Change the reflection layer’s opacity to 20% to finish off the text reflection.

Entering the rest of the business card information

17 In black (#000000), bold Myriad Pro, type "marketing expert" (or your own job title) under the name on your canvas using the Horizontal Type Tool (T).

18 Off to the right of the name, type some of the things you specialize in (see example in the figure below) using black, 9pt, bold, Myriad Pro Condensed Italic. Each line should be a distinct text layer.

19 Type the contact information below the previous layers. Use Myriad Pro bold for the beginning word and Myriad Pro Condensed Italic for the following words.

20 With the Line Tool from the Toolbox, draw a small 2px vertical line on your canvas to the left of the information that was just typed.

The back of the card

21 To make the back of the card, first turn the visibility off in all the text layers, leaving only the business card background. Select the entire canvas by pressing Ctrl + A (or Select > All). Choose Edit > Copy Merged (Shift + Ctrl + C).

22 Now, Create a new document (Ctrl + N) with the same settings as the front of the card. Paste the copied selection into the new document. Go to Edit > Transform > Flip Horizontal to flip it so that it’s oriented a different way as the back of the business card.

23 Add your company name and website using the text effect techniques we’ve discussed above. You can use Steps 7 – 16 for the company name.

Share your own work on Flickr

If you followed along the tutorial, we’d like to see what you ended up with. Please include it in the Six Revisions community group pool on Flickr.

Your thoughts? Need help?

What did you think about this tutorial? How was the difficultly level? Did you get stuck on any part? Please let us know in the comments.

Download Source Files

slick-business-card-typography (0.86MB, ZIP)

About the Author

Dave Martinez is an internet entrepreneur living in Dallas, Texas. He is the current owner of Card Observer, a blog exclusively for business card design. Submit your own business card through his site and show it off. Also, you can connect with Dave by following him on Twitter.

Create an Animated “Call to Action” Button

Jacob Gube — Tue, 08 Dec 2009 03:00:49 +0000

In this web design and development tutorial, you’ll get a walkthrough for creating a "Call to Action" button sprite in Photoshop as well as how to use jQuery to animate it. This tutorial is broken up into three sections: Photoshop, HTML/CSS, and JavaScript.

Introduction

This tutorial is divided into three sections:

Section 1: Photoshop
Section 2: HTML/CSS
Section 3: JavaScript (jQuery)

If you enjoyed the tutorial, please express your appreciation by including images/screen shots of your work in the Six Revisions Flickr group – we’re trying to build up the collection there so that we can all have a nice community showcase.

Final Result

Click to see live demo.

Demos

Section 1: Photoshop

The first section will deal with the graphic creation of the Call to Action button.

Set up the Photoshop document

1 Our button’s dimensions will be 200px x 50px, but since we’ll be creating a CSS background sprite for the two different states, we’ll make the height of the canvas 100px. To begin, create a new Photoshop document (Ctrl + N) that has a canvas width of 200px and a canvas height of 100px.

2 To make drawing the button easier, we’ll set up some guides. If it isn’t turned on yet, turn on your rulers first (Ctrl + R to toggle it on and off) by going to View > Rulers and making sure that it’s checked. To create a guide, simply click on a ruler on the edge of the Photoshop workspace and drag towards your canvas. We’ll make 5 guides: 4 at the edges of the canvas, and 1 horizontal guide at the 50px mark (which effectively divides our canvas into two equal parts).

Creating the button shape

3 Now we’ll create a rounded rectangle shape. Get the Rounded Rectangle Tool from the Tools Panel. Adjust the Radius option in the Options bar to 8px. The foreground color doesn’t matter because it will be overridden by the layer styles that we’ll soon apply.

4 With the Rounded Rectangle Tool ready to go, created the rounded rectangle shape at the top half of the canvas by dragging from the top left corner to the bottom right corner of the 50px mark.

Adding layer styles to the button

5 We’ll now add a series of layer styles to the rounded rectangle shape that we just created. To start, double-click on the shape layer in the Layers Panel to open the Layer Styles dialog box.

6 First we’ll add a gradient overlay. Click on the Gradient Overlay to apply the layer style. Then click on the Gradient option to open the Gradient Editor dialog box to choose the colors we want.

7 In the Gradient Editor, change the left color stop’s color by clicking on it (this will be the color at the bottom of the button). I’ve decided to use a dark olive green color for the left color stop (#85928a). Change the right color stop to a lighter green color (#d3e1d8) – this will be the color of the button at the top. Then slide the Color Midpoint to 40% so that the light green is slightly more dominant.

8 Add an Inner Glow layer style next, this will give the button a subtle white border. Set the Opacity option to 100% and change the color of the glow to white (#ffffff) by clicking on the small box to open the color picker and then changing it there. Then under the Elements option set, change the Size option to 3px.

9 The final layer style we’ll add to the normal state button is a 1px dark green (#74857a) stroke to add a narrow border around the shape. Set the Size option to 1px. Set the Position option to Inner so that it draws the border inside the button shape. Finally, change the color of the stroke by clicking on the Color option to open the Color Picker dialog box and entering a dark green color (#74857a).

Typing in the text

10 For the text of our button, we’ll use a simple and familiar font family: Arial. You can use any font that you wish, but typically, the text effect we’ll be applying is best suited for bold and sans serif fonts – keep that in mind when selecting the font family. Grab the Horizontal Type Tool (T) from the Tools Panel. In the Options bar, set the font family to Arial, the font style to Bold, font size to 24px, and anti-aliasing method to Sharp. Don’t worry about the font color since it will be overridden by the layer styles we’ll be applying later.

11 Click anywhere in the canvas to start typing, and type your call to action; the call to action used here is "Sign Up" but yours might be "Buy Now" or "See Demo", it’s up to you.

Centering the text

12 Depending on where you started typing, your text may not be centered in the button, so we need to center it precisely. First, create a marquee selection around the button by Ctrl + clicking on the button shape layer’s thumbnail in the Layers Panel; this will automatically create a marquee selection around the edge of the button.

13 Now click on the text layer in the Layers Panel to make it the active layer (don’t deselect the selection yet). Then go to Layer > Align Layers to Selection > Vertically Center to position the text layer vertically centered on our button.

14 With the marquee selection still around the button and the text layer still the active layer in the Layers Panel, go to Layer > Align Layers to Selection > Horizontally Center to locate the text in the middle of the button.

Applying Layer Styles to the text

15 Double-click on the text layer to open up the Layer Styles dialog box. We’re going to create an inset text effect similar to the How to Create Inset Typography in Photoshop tutorial I wrote a while back.

16 Apply a gradient overlay by checking the checkbox beside it. click on the Gradient option to open the Gradient Editor. For the left color stop, choose a dark olive green color (#425047). For the right color stop, choose a slightly lighter green color (#94ad9d).

17 Next, apply an inner shadow layer style. Set the Angle option to 90 degrees, Distance to 1px, and Size to 2px. Keep the inner shadow color to black (#000000) and the Opacity option to 75%. This will create a subtle inset/stamped-in effect.

18 To finish off the text layer styles for the normal state, we’ll add a subtle drop shadow at the bottom of the text. Change the Blend Mode option to Normal and the color of the shadow to a light green color (#d1dfd7). Set the Opacity to 100%. Make sure that the Angle option is also at 90 degrees to keep it the same as the inner shadow’s light source. Finally, set the Distance option to 1px and the Size option to 2px (equal to the inner shadow’s settings).

Creating the hover state button group

19 The hover state will fill up the bottom of our canvas. We’ll just duplicate the normal state button, move it down the lower part of the canvas, and tweak the layer styles to make a slightly different look. To keep things organized, we’ll group together the normal state button layers. To create a group, click on the Create a new group icon at the bottom of the Layers Panel (it looks like a folder).

20 Change the group’s name to something more intuitive than the default Group 1, such as Normal. Then drag the two normal state layers in the newly created group.

21 If you’ve turned off the guides that we created earlier, turn it back on to help us position the hover state button accurately; the shortcut is holding down Ctrl (or Cmd) and then pressing ; (alternatively, go to View > Show > Guides).

22 Duplicate the Normal group by choosing the group in the layers panel. Name the group to something that makes sense like Hover.

23 With the Hover group active in the Layers Panel, click on the Move Tool (V) in the Tools Panel and use your down arrow key to move the Hover group to the bottom of the canvas so that the top edge of the button is right on the middle guide. Use the Zoom Tool (Z) in the Tools Panel to help you position the Hover group if you’re having a hard time seeing the edges. If you use the Zoom Tool (Z), just press Ctrl/Cmd + 1 to go back to 100% view.

Changing the layer styles of the Hover group

24 Since we just need to tweak a few settings, creating the hover group button will be quicker. Inside the Hover group, double-click on the button shape layer in the Layers Panel to open the Layer Styles dialog box. We will keep everything the same except the gradient overlay layer style colors. Edit the settings so that the left color stop of the gradient is a dark green color (#515753) and the right color stop is a slightly lighter green color (but still dark – #7d837f).

25 Next, double-click on the text layer in the Hover group to open up its Layer Styles dialog box. Change the Drop shadow color to a darker color (#7a807c).

26 Finally, edit the gradient overlay layer style colors. Set the left color stop to a dark green color (#5d615e) and the right color stop to a slightly lighter green, but still dark, color (#606462).

Section 1: Photoshop done

We’re now done with the Photoshop portion of this tutorial (Section 1). If you followed along, you should now have something like this:

This will be our CSS background sprite. Don’t close the Photoshop document yet, since we still have to save it for the web in Section 2.

Section 2: HTML/CSS

Now, we’ll make our Call to Action button functional using HTML/CSS.

1 Start by creating a folder that’s designated as our working directory. I called this directory "Call to Action Button" but feel free to name it something else. We’ll save all of our assets in this folder.

2 FWe’ll save our CSS background sprite (the button we created in Section 1). Go back to Photoshop, choose File > Save for Web & Devices. Save it in JPG file format (PNG or GIF works too) inside the Call to Action Button folder as call_to_action_sprite.jpg.

3 Next, we’ll create the HTML document – the best way to do this is with your favorite source code editor (I use Dreamweaver), but a simple text editor will suffice. Create a standard HTML document, and save it inside the Call to Action Button folder as index.html.

4 For the HTML, we’ll use a hyperlink element nested inside a paragraph element (

) with a class of cta-button. Here is the code to place inside the of index.html. For web accessibility, we type out the text in our call to action button, which is "Sign Up".

Code block 1:

View of p.cta-button a element in Google Chrome.

5 Now we need to style it, so create a stylesheet called styles.css and save it in the Call to Action Button folder.

6 In index.html, link to your stylesheet.

Code block 2:


  href="styles.css" type="text/css" media="screen"  />

7 We need to display the p.cta-button element as a block element so that we can give it a set height and width equal to our call to action button (width:200px, height:50px). We also set it so that its background is the bottom part of our CSS sprite (the hover state). Later on, we’ll reveal it by moving the background of the element by styling the a:hover pseudo-selector. To center the button on the browser viewport, we use the margin:0 auto technique, which works for most browsers including IE5.5 and above.

Code block 3:

.cta-button {
  display:block;
  width:200px;
  height:50px;
  background:url(call_to_action_sprite.jpg) no-repeat 0 -50px;
  margin:0 auto;
}

View of Call to Action button with background sprite set.

8 Next we’ll style the element inside the p.cta-button paragraph. We also need it to be a block element so that we can use the text-indent CSS background image replacement technique to move the HTML text ("Sign Up") outside of the browser’s viewport; we do this by setting an extreme value of -9999px to its text-indent attribute. With set the width and height to 100% so that it’s equal to the width and height of p.cta-button. Finally, we position the background sprite to the top left of the image sprite, which is the normal state.

Code block 4:

.cta-button a {
  display:block;
  width:100%;
  height:100%;
  background:url(call_to_action_sprite.jpg) no-repeat 0 0;
  text-indent:-9999px;
}

View of Call to Action button with CSS finalized. Sign Up HTML text is indented out of the viewport.

9 At this point, we want to reveal the hover state when the user mouses over the button, so we’ll use the :hover psuedo-selector to hide the background.

Code block 5:

.cta-button a:hover {
  background-position:0 50px;
}

Section 2: HTML/CSS finished

All together, here’s our HTML and CSS.

Code block 6:

Code block 7:

.cta-button {
  display:block;
  width:200px;
  height:50px;
  background:url(call_to_action_sprite.jpg) no-repeat 0 -50px;
  margin:0 auto;
}
.cta-button a {
  display:block;
  width:100%;
  height:100%;
  background:url(call_to_action_sprite.jpg) no-repeat 0 0;
  text-indent:-9999px;
}
.cta-button a:hover {
  background-position:0 50px;
}

Demo of HTML/CSS

Example 1: Call to Action button with HTML/CSS.

Section 3: JavaScript/jQuery

Let’s animate our button, shall we?

1 First, download the jQuery library and save it in the Call to Action button folder. If you’re interested in studying the library, download the uncompressed version, but if you’re going into production, download the minified (smaller file size) version.

2 In the of index.html, right below the link reference to styles.css, reference the jQuery JavaScript library.

Code block 8:

3 Create a blank JavaScript file and save it as cta-javascript.js inside the Call to Action button folder.

4 Reference cta-javascript.js in index.html, right below the jquery library reference.

Code block 9:

5 Switch over to cta-javascript.js, then we’ll start coding. First, let’s set up the .ready() method which is a jQuery method that allows us to run our code as soon as the DOM is ready to be worked on.

Code block 10:

$(document).ready(function(){
  ...our code goes in here...
});

6 The first thing we need to do is to remove the :hover style because it will affect the animation effect. Doing it this way (via JavaScript) ensures that our button degrades nicely – even with JavaScript disabled, there will still be a hover effect. We can use the .css() method to remove the style.

Code block 11:

$('p.cta-button a')
  .css({
    'backgroundPosition':'0 0'
})

7 Next, we chain the .hover() method, which is an event helper that deals with the mouseover event to the $() element selection. The hover method can take in two functions: the first function executes code for the mouseover event, and the second function executes code for the mouseout event (when the user removes the mouse pointer out of the element).

Code block 12:

$('p.cta-button a')
  .css({
    'backgroundPosition': '0 0'
  })
  .hover(
    function(){
      ...code to execute on mouseover...
    },
    function(){
      ...code to execute on mouseout...
    }
)

8 The code we want to execute on mouseover and mouseout is the .animate() method, which smoothly transitions CSS properties from the current value to the desired value. In this case, we want to transition the opacity to 0 when on mouseover (to reveal the hover state), and 1 when the mouse leaves the p.cta-button a element. The .animate() method also takes an integer as a parameter that dictates how fast the effect transisition should occur, in millisecond units. I found that 650ms was a good speed, but feel free to experiment here. And on a final note, we use the stop() JavaScript method on the element we’re transitioning so that if the user mouses in and out quickly before a transition is finished, it stops it before executing the new animation event.

Code block 13:

.hover(
  function(){
    $(this)
      .stop()
      .animate({
        'opacity': 0
 	  }, 650);
  },
  function(){
  $(this)
    .stop()
    .animate({
      'opacity': 1
 	}, 650);
  }
);

Section 3: JavaScript (jQuery) done!

We’re now done with the entire tutorial. Here’s the JavaScript in one go:

Code block 14:

$(document).ready(function(){
  $('p.cta-button a')
    .css({  'backgroundPosition': '0 0' })
    .hover(
      function(){
        $(this)
          .stop()
          .animate({
            'opacity': 0
          }, 650);
      },
      function(){
        $(this)
          .stop()
          .animate({
            'opacity': 1
          }, 650);
      }
    );
});

JavaScript demo

Example 2: Call to Action button with jQuery animation.

Download the source files

animated-call-to-action (ZIP, 0.57MB)

Questions or comments?

Were you able to complete the tutorial? How was the difficultly? Did you get stuck in any way? Please pose your questions and provide us with your feedback on how we can make tutorials on Six Revisions better.

About the Author

Jacob Gube is the Founder and Chief Editor of Six Revisions. He’s also a web developer/designer who specializes in front-end development (JavaScript, HTML, CSS) and PHP development. If you’d like to connect with him, head on over to the contact page and follow him on Twitter: @sixrevisions.

How to Make Beautiful Gradient Typography with Photoshop

Jacob Gube — Mon, 30 Nov 2009 23:55:58 +0000

In this Photoshop type treatment tutorial for beginners, you’ll discover a quick and easy process for making captivating gradient text. Be sure to check out the Gradient Typography in Web Design showcase for inspiration.

Final Result

Below, you can see what we’ll be creating together. You can click on the image to see the full-resolution version.

Set up the Photoshop document

1 To start, let’s set up the Photoshop document. In Photoshop, Press Ctrl + N to create a new document (this should open the New Document dialog box). We’ll create a rectangular canvas that’s 600px wide and 300px tall.

Design the background of the text

2 We’ll use a dark blue background. First, we’ll need to make the Background layer editable because it’s locked by default. Double-click on the Background layer in the Layers Panel to open the New Layer dialog box. By default, the Name option is set to Layer 0, but to keep things organized, name it to something more descriptive like Background.

3 We’ll apply a color overlay layer style onto the Background layer. Start by double-clicking on the Background layer’s thumbnail in the Layers Panel to open up the Layer Styles dialog box. Check the Color Overlay box to apply the layer style.

4 Change the color overlay by clicking on the Set color of overlay option which will open the Select overlay color dialog box for you to choose your colors in.

5 In the Select overlay color dialog box, choose a dark color. I’ve chosen a dark blue color (#032d50).

Create a lighting effect in the background

6 The background should now be a dark blue color. Let’s make it a little bit more interesting by creating some lighting. First, create a new layer by clicking on the Create a new layer icon at the bottom of the Layers Panel. Then rename the new layer (by default it’ll be Layer 1) to something intuitive like Lightsource.

7 Set your Foreground color in the Tools Panel to white (#ffffff). Grab the Brush Tool (B) from the Tools Panel.

8 In the Options bar, open the Brush Preset picker by clicking on the downward pointing arrow. Scroll down and select the Soft Mechanical 500 pixels Brush (or choose any brush tip that has a soft edge). Adjust the Master Diameter option to a large value, 700px will do the trick.

9 In the Layers Panel, make sure you’re still on the Lightsource layer. With the Brush Tool, click somewhere in the middle of your canvas to apply the brush. It’s OK if the brush edge is outside of the canvas, it’ll create a nice effect that way.

10 The brush is too prominent so we’ll want to lower the layer opacity to make the lighting effect subtler. Lower the Opacity of the Lightsource layer to somewhere around 35% in the Layers Panel.

Placing the text on the canvas

11 Let’s type in the text that will have the gradient effect. We’ll use a bold sans-serif font–Arial–which really works well with the gradient typography style. Begin by choosing the Horizontal Type Tool (T) in the Tools Panel. Then in the Options bar, select Arial, set the font size to 72px, set the anti-aliasing method option to Sharp, and choose a color that we can easily see, such as white (#ffffff) (it doesn’t matter what color we choose now because the gradient overlay that we’ll be applying later on will take care of this).

12 Type some words onto the Canvas like "Gradient Type". Don’t worry where it is on the canvas because we’ll center it in the next step.

Centering the text

13 To center the text horizontally, first create a marquee selection around the entire canvas by pressing Ctrl + A (or going to Select > Select All).

14 With the Gradient Type text layer the active layer in the Layers Panel, go to Layers > Align Layers to Selection > Horizontal Centers. This should center the text in the horizontal middle of your canvas.

15 Next, we’ll want to center our text vertically as well. The rectangular marquee selection around the canvas should still be active, but it not, make sure it is (and press Ctrl + A if it isn’t) and then go to Layers Align Layers to Selection > Vertical Centers.

Applying the layer styles for the gradient type effect

16 Time to actually create the gradient type effect. Double-click on the Gradient Type text layer in the Layers Panel to open the Layer Styles Dialog box.

17 First layer style we’ll add to our text is a gradient overlay. We’ll want a color transition that’s white at the top and light gray at the bottom. It will be a subtle gradient type effect. So click on the Gradient Overlay checkbox to apply it. By default, it will be a Black to White color transition, so we’ll need to modify it.

18 Click on the Gradient option to open the Gradient Editor dialog box.

19 In the Gradient Editor, click on the left color stop to open the Select stop color dialog box. Change the color to a light gray color (#d7d7d7). Make sure that the right color stop is white (#ffffff), by the default it’s white, but in case you have changed the settings, you should verify.

20 Next, we’ll add a drop shadow layer style. Check the box beside Drop Shadow. Lower the Opacity of the drop shadow to about 50% so that it’s subtler. Change the Angle of the drop shadow to 90% so that our light source comes from the top of the canvas. Set the Distance to 3px (which means the drop shadow is offset by 3px at the bottom of the text) and the Size to about 8px. Play around with the settings to see what works best for you.

21 The final layer style we’ll apply is a white inner stroke. This is a subtle effect but really helps complete the whole gradient text effect. Open the Layer Styles dialog box again by double-clicking on the Gradient Type text layer. Check the box beside Stroke. Set the Stroke Size option to 2px. Set the Position option to Inner so that it’s applied at the inner edge of the type. Finally, lower the Opacity percentage just a tad, to about 90% So that the stroke is not too overpowering.

We’re done!

That’s it, below, you’ll see what I ended up with. I hope you enjoyed this tutorial and learned a trick or two!

Contribute to the Six Revisions Flickr group

If you liked this tutorial and you followed along with it, please show your appreciation by including a screen capture of your final result in the Six Revisions Flickr group – we’re trying to build the collection so that we, as a community, can see each other’s work.

Download the source file

If you’d like to download the Photoshop source file used in this tutorial, grab it as an archived ZIP file below.

gradient-typography.zip (ZIP, 0.2MB)

About the Author

Create the Call of Duty: Modern Warfare Type in Photoshop

Jacob Gube — Sat, 21 Nov 2009 23:18:35 +0000

In this step by step tutorial, you’ll learn how to recreate the modern/futuristic text effect in the Call of Duty: Modern Warfare video game using some simple Adobe Photoshop techniques. You’ll learn two text effects in this tutorial.

With the recent release of Call of Duty: Modern Warfare 2, a popular and record-breaking video game, we thought it would be a fun activity to show you how to remake the text used in the game’s logo.

In this tutorial, you’ll learn two text effect techniques, both featured in the video game.

Final Result

This is what our work will look when we finish.

Text Effect 1

Text Effect 2

Before you begin

Get the Bank Gothic Lt BT font and install it in your computer if you don’t have it.

Create the Photoshop canvas

1 Open a new blank canvas using Edit > New (Ctrl + N) in Photoshop. Use a large canvas to give us plenty of room: 1600px width and 500px height will do just fine (knowing that we can easily rescale our work down later on if we need to).

Fill the Background layer

2 Now we have a brand new canvas to work with. We fill the Background layer with black (#000000) by setting the Foreground color to black (#000000) in the Tools Panel, choosing Edit > Fill while the Background layer is active in the Layers Panel, making sure that the Use option is set to Foreground Color, and pressing OK. That will fill our Background layer with the desired color.

Working on the text

3 Next we create our text. Choose the Horizontal Type Tool (T) from the Tools Panel. In the Options bar, set the font to Bank Gothic Lt BT and change the color to white (#FFFFFF). Also, set the font size to 30pt or so.

4 We then type our chosen phrase or slogan in the Bank Gothic Lt BT font onto our canvas. We should now have something that looks like the following figure.

Adding the Outer Glow layer style

5 We now change the settings of the text layer by choosing it in the Layers Panel, and then clicking on the Add a layer icon (it’s the "fx" icon) at the bottom of the Layers Panel. In the contextual menu that will appear upon clicking the Add a layer icon, choose Outer Glow. This will then open the Layer Style dialog box. Change the settings of the Outer Glow layer style to the settings you can find below. The color used is #7DFF6E.

Creating a repeating pattern

6 To complete the effect, we must create a Photoshop pattern that we’ll apply to our text. To do this, first create a new Photoshop document with the following settings. Note that the dimension of the canvas is very small, 1px wide and 3px high.

7 By default, the Background layer of the new document will be locked an un-editable. Double-click on the Background layer to open the New Layer dialog box. Press "OK", and the background layer will be unlocked and renamed to Layer 0.

8 Since the canvas is small, use the Zoom Tool (Z) to zoom in as close to the canvas as possible.

9 Set your Foreground color in the Tools Panel to black (#000000). Then we use the Pencil Tool (B) to draw a 1px square box right in the middle of the canvas.

10 Select the entire canvas using Select > All (Ctrl + A). Choose Edit > Define Pattern, and name it something intuitive, like modern warfare. Now we can switch back to our original canvas with our text and apply the repeating pattern we just created.

Applying the repeating pattern

11 You should have now switched back to our original Photoshop document (and you can close the pattern document after defining it, we’re done with it). Get out the Clone Stamp Tool (S) from the Tools Panel.

12 In the Options bar, change the Clone Stamp Tool’s option to the setting below. Make sure that you change the pattern to the one we just made.

13 We then create a new layer on top of everything that will host the pattern we’ll apply to the text. With the Pattern Stamp Tool, draw/paint over your text.

14 Finally, lower the opacity of the pattern layer to around 80% or to something that you like, finishing off the first text effect.

We’re now finished with the first text effect, and it’s time to move on to the second text effect.

Part 2: The second text effect

1 The second text effect will be simpler. Create a new canvas to work with, and you can use the same settings as the first text effect above, also changing the Background layer to black (#000000).

2 Use the Horizontal Type Tool with Impact as the font family and the font size to around 70pt. Type out the desired text in all caps; in this tutorial, I used "SIX REVISIONS" as the text.

Add layer styles

3 We will now apply several layer styles. To do this, double-click on your text layer’s thumbnail in the Layers Panel to open the Layer Style Dialog box. First, we’ll add an Inner Shadow layer style. Change your settings to the same values as shown below and it’s worth noting that you should feel free to play around with the settings to get the effect you like.

4 We now click on Bevel and Emboss to apply a beveling effect onto our text. You can use the settings shown below to get the perfect Call of Duty effect.

5 We’ll add a contour to our bevel effect; you can do this by checking the Contour checkbox below Bevel and Emboss. You may use the settings shown in the following figure.

6 We now add a Gradient Overlay layer style. Double-click on the Gradient option to open the Gradient Editor dialog box and use the settings below. The left color stop’s color is #91FD83 (light green), the middle color stop is white (#FFFFFF), and the right color stop is (#314834) which is a dark/olive green color.

7 Change your gradient overlay settings (shown below). Switch the Blend Mode to Normal, and change the angle to 90 degrees, and reduce the scale of the gradient to 86%.

You finished product should look like this:

We’re done!

Text Effect 1

Text Effect 2

Video Version

I hope you learned a trick or two in this Photoshop tutorial. If you’d prefer a video tutorial of what we’ve done above, check out my screencast below.

About the Author

Deivid Colkevicius is a young creative designer who enjoys creating design tutorials for everyone. He maintains his web presence on Cimg, short for Creative Ice Media Group where you can see his blog posts and design work. You can find video tutorials on his YouTube channel, CreativeIceDesigns. Catch up with him on Twitter as @deividjc.

How to Design a Band Website Layout in Photoshop

Jacob Gube — Thu, 19 Nov 2009 13:54:44 +0000

In this tutorial, you’ll learn step-by-step how to design an awesome band website that any rock and roller would be proud to call their own. The theme is grungy and worn-and-torn and we’ll use a handful of freebies along the way.

Final Result

Clicking on the image below to see a full-scale version of the band website we’ll be creating.

Create the Photoshop document

1 Start out by opening a new document in Photoshop, 1200 pixels wide by 1000 pixels tall.

2 Then drag your guides from the Ruler (press Ctrl/Cmd + R if you don’t see your rulers) so that the middle content area is centered and 960 pixels wide, my preferred width to work with.

Working on the rough background

3 Start by filling your Background layer with a nice warm gray color, I chose #C4C2AF. To do this, set your Foreground color to #C4C2AF in the Tools Panel. Then, with the Background layer selected in the Layers Panel, choose Select > All and then Edit > Fill, which will open up the Fill dialog box. Make sure that the value under Use option is set Foreground Color, and then press OK.

4 Now we’ll add a texture and start to build up some layers in the background. Find a cool rock-like texture. For this tutorial, I used the SR_Rough_Texture_13 that’s part of the Free High Resolution Rough Texture pack. Download it, open it in Photoshop, and drag it into your canvas; it should automatically create a new layer on top of the Background layer.

This image isn’t quite wide enough to fill the background space (I like a full image background to be 1600 pixels wide and this one doesn’t quite cut it). So we’re going to create some new layers. Then we’re going to make a layer mask and fade the sides of the image in order to get a nice texture that doesn’t have an ugly/jarring edge.

5 To make the layer mask, you’ll need to select the whole image, which you can do by choosing the image’s layer in the Layers Panel and then going to Select > All.

6 Then click the Add layer mask icon towards the bottom of the Layers Panel. This won’t change a whole lot yet but we’ll brush away the edges to make it nice and smooth. But first, change the layer’s Blend Mode in the Layers Panel to Overlay.

Your work should look like this:

7 Click on the mask of your rock layer (not the thumbnail of your layer). Get the Brush Tool (B) from the Tools Panel and choose a nice large soft brush tip, like Soft Round 300. Make sure your foreground color is set to black (#000000) and set the Opacity and Flow to 50%. Brush away the edges until you can’t see a hard line anymore. Then enlarge the image using Image > Image Size to about 128% so it fills more of the space, and move it to the left side of the canvas.

Here’s where we’re at now:

8 Now find another cool background texture, something like Grunge Extreme 08 from the Six Revisions Grunge Extreme set in the Freebies section. Download it, open it in Photoshop, and drag it to your workspace.

9 We’ll do the same thing with this texture as we did with the last one. Create a layer mask, and this time, change the layer’s blending mode to Screen. Then brush away the edges with a large soft brush (Soft Round 300 works here as well) with the Brush Tool (B) to make them smooth. Finally, move this texture a bit off the right side of the canvas.

10 Now, we need something just a touch bolder than, this so duplicate the layer (Layer > Duplicate Layer).

Here’s what we have now:

11 We need one more texture for the background, a rusty metal texture with a grid, something like Grunge Extreme 06 from the Grunge Extreme set. Download it, open it in Photoshop, and drag it into your canvas.

12 Resize it to take up about 310 pixels in height (you can use the Free Transform Tool).

13 Now duplicate the layer so that they line up next to each other and flip it horizontally using Edit > Transform > Flip Horizontal so they repeat nicely.

14 Then, repeat the first one to make the grid go all the way across the document.

15 Now we’ll link all three layers. Select all three layers in the Layers Panel, right-click, and then choose Merge Linked.

16 Then change the blending mode to Overlay. Here’s where we’re at now:

Adding some header stuff

17 Where would a band be without their logo at the very top? We need a fun and funky font for this, so I chose Tiza from Dafont. I made it a dark warm gray color and changed the layer blending mode to Multiply.

18 We also need a navigation in the header area. Add some links to the upper right hand side using the Horizontal Text Tool (T), just about even with the logo on the left. I chose to use Arial so that it looks similar on all browsers, bolded and in all caps. I made it a dark warm gray color to match the logo.

19 I also like to determine hover actions for the main navigation in my mockups. This one will extend from the top of the page to below the navigation links. Create this by making a box using the Rectangular Marquee Tool (M) and filling it with white (#FFFFFF) via Edit > Fill (Shift + F5). Next, set the Opacity of the layer to 28% so that we can see the text link below it.

Moving on to the content area

20 Create a rectangle using the Rectangular Marquee Tool (M) that’s 960 pixels wide by about 750 pixels tall, and fill it with a warm gray color that is a bit lighter than the logo. I used #9A9686.

21 Create a layer mask by clicking on the Add layer mask icon, just as we did with the textures in the background and choose a large soft round brush. Again, make sure your color is set to black (#000000) but this time set your Opacity and Flow to 100%. Click on the mask of the layer and brush away the bottom of the content box unevenly. It should look something like this:

22 Now we need a bit of grunge for the top. Find a nice grungy brush, or download the Rough Edges Photoshop brush set from Brusheezy. I used rich horizontal from this pack and brushed away the top of the layer mask until I was satisfied with the look. Change the layer blending mode to Multiply and you should have something like this:

Let’s add some content

23 Most musicians like to see their photo up top, so we’ll set them up with a rotating banner filled with some sweet band pictures. To simulate the banner in our mockup, create a 908 pixel wide box using the Rectangular Marquee Tool (M) and fill it with a similar color to the logo, I used #49453A.

24 We’re going to need some texture in here to match the rest of the site, so bring the second texture (Grunge Extreme 08) we used on here back up and drag it into your workspace again, above the flash banner box you just created. Then select your banner box by holding down Ctrl (or Cmd) and clicking on the layer thumbnail.

25 With the box selected, click on the texture in the Layers Panel and hit the Add layer mask icon at the bottom of the Layers Panel. You should have something like this:

26 That’s a bit too loud for me, so I changed the layer blending mode to Multiply and I now have a nice box to build on.

27 Now we need to add our musician’s photo to the flash banner, and I pushed it over to the right side to make room for text on the left. I downloaded a cool rocker dude from sxc.hu, a great free stock photography site.

28 He needs some shadow behind him, if you double-click on the layer, the Layer Style dialog box pops up.

29 Turn on outer glow, changing the Glow Color to black (#000000).

30 Next, change the Blend Mode of the layer to Multiply. I think this gives a much more subtle and realistic looking shadow than the Drop Shadow in Photoshop does.

31 Add some text on the left side, giving users multiple links and places to go on the site. I used Tiza again for the headline. I do want the body text here to match what I’ll be adding later, so I used a standard font for the links, in the same size that the body text will be.

32 We’re going to add three columns below the banner to give the users some content to read and show off the most important parts of the site. We’ll start with the Latest Videos on the left, establishing the header styles for the rest of the site. I chose Arial for the text, and the headers will be all uppercase and bold. I added an opaque white triangle using the Polygon Tool with the Sides option set at 3 for a play button on the video, and some text links below where more videos can be accessed.

33 Blog posts will be in the middle column, calling in three recent blog posts with a headline that links to the full article.

34 6 social media icons are in the far right column, giving fans other avenues of contacting and connecting with the band members. The icons used are from the A Life in Pixels set here on Six Revisions.

And finally, the footer

35 A simple footer is all that’s needed here. I added a thick light gray line, #C4C2AF, across the full 960-pixel content area, as well as copyright info and a contact link.

We’re all done!

Thanks for following the full tutorial. I hope that you learned some tips and tricks that you can use in Photoshop and that you had fun following the creation of a band website in Photoshop. Let me know what you think in the comments area below.

Download the source file

If you’d like to grab the Photoshop file (PSD) used in the tutorial, get it from the link below.

band-website-design.zip (ZIP, 12.7MB)

Share your work on Flickr!

If you want to show us your work, be sure to post it on the Six Revisions Flickr group.

About the Author

Shannon Noack is a designer in Arizona and the Creative Director of Snoack Studios. Designing is her passion in life and she loves to create websites, logos, print work, you name it. She also blogs regularly here and you can connect with her on Twitter as well.

Six Revisions » Tutorials

Create a Clean and Professional Web Design in Photoshop

Final Preview

Prepare your Photoshop document

Set the units and rulers settings

Add guides to designate the content area

Creating the logo

Creating the navigation bar

Creating the "call us" section

Creating the header

Creating the "featured project" section

For the title:

For the description:

Creating the "quick quote" section

Creating the main content area

For the Title:

For the Description:

For the Link text:

Creating the footer

Final Result

Download the source file

Related Content

About the Author

Create a Slick and Minimalist Web Layout in Photoshop

Preview

Create a new Photoshop document

Creating the background

Designing the header section

"YourName"

"some awesome slogan"

Creating our navigation

Creating the search bar

Creating the separating lines

Adding the sub-navigation

Creating the featured designs area

Add some content to the design

Add a title and a category

Title (in my case it was "Handstand!")

Category (in my case it was "Photoshop design"):

Paragraph content

Create the slider control

Creating the content boxes

Creating the main content area

Creating footer area

Creating the small footer

Adjusting the canvas size

Conclusion

Download source file

Related Content

About the Author

Coding a Band Website Created in Photoshop

Band Website Series:

Working Proof

Setting up the files

Starting with the background (in Photoshop)

Adding the background to the web design

Working on the site’s logo

Six Revisions

Coding the navigation

Coding the content area

Creating the columns

Latest Videos

Six Revisions blog

Connect with us

The finale: the footer

And we’re all finished!

Download the source files

Related Content

About the Author

Create a Zoomed In Effect in Photoshop

Preview

Setting up the Photoshop document

Adding graphics to the canvas

Creating the zoom effect

Creating the handle

Adding the zoom detail

Finished!

Related Content

About the Author

Create a Winter Theme Web Design in Photoshop