1. Make a rectangle with the Rectangle Tool (any color) and Rasterize it.

2. Then ad a Gradient Overlay: #252525, #595959 and #9a9a9a

3. And a Stroke: #424242

4. Make a gradient just over the middle of the button and go to Select/Modify/Contract and put 1px, then create a New Layer and fill it with any color, press Ctrl + D and change the fill to 0%

5. Add a Stroke: Transparent to White

6. Your button should look like this:

7. Create a New Layer and make a selection 1px height and fill it with a Radial Gradient, White to Transparent, starting out from the middle and deselect.

8. Now you’re going to do the same you did in the Step 7 but using #4a4a4a for the gradient.

9. And you should have something like this:

10. Create a New Layer and make a selection as shown below and fill it with a Linear Gradient #dadada to Transparent

11. Finally add some text, using Segoe 13 pt.

Also you can make a Navigation Bar like this, using the same steps.

1. Make a rectangle with the Rounded Rectangle Tool (any color) and right click and Rasterize it.

2. Open the Layer Style and add these values:

3. Inner Glow

4. Bevel and Emboss

5. Gradient Overlay: #99b910 to #d1dc42

6. Stroke: #d1dc42

7. You should have something like this:

8. Over a New Layer, make a selection with the Elliptical Marquee Tool as shown below:

9. Make a Radial Gradient white to transparent and change the mode to Soft Light and Fill 40%.

10. Right click over the thumb while pressing Ctrl and go to Select/Modify/Contract and put 2 px, then go to Select/Inverse and press Del once. Ctrl + D to select.

11. Add text using Segoe 25 pt.

12. Then add it a Drop Shadow.

13. Now we’re going to make a Rollover using the same button, duplicate it and change the Gradient Overlay: #2a2e2f to #4a5052 and the Stroke #454b4d. Note: If you want to have both separete, copy all the layers and put them each one into a group.

14. And you’re done.

1. Create a Badge using the Polygon Tool.

2. Right click and Rasterize it.

3. Add a Gradient Overlay: #007cb3 to #00c8ff

4. And you got to have something like this:

5. Click over the thumbnail while holding Ctrl, to select the shape. Then go to Select/Modify/Contract and put 2 px.

6. Create a New Layer and Fill it with any color and change the Fill to 0% then add a 1px Stroke Transparent to Withe.

7. You should have something like this:

8. Create a New Layer, and make a selection using the Elliptical Marquee Tool.

9. Select the border’s layer then go to Select/Inverse and press Del, to delete the bright parts outside of the badge. Then change the Blending Options to Soft Light.

10. Add some text, using Segoe in white and press Ctrl + T to rotate it.

11. Add it Drop Shadow:

12. And Gradient Overlay: #e4e4e4 to #ffffff

13. That’s it, your own Badge 2.0

1. Start by opening a new file: 710px * 210px
2. Create a new layer, select the Rectangular Marquee Tool and set a fixed size of 700 * 40px and place your selection at the top of your canvas. Go to Select -> Modify -> Smooth and use 5px radius, now fill your selection with #157272

3. Apply these layer styles
- Gradient: #157272 to #1b8484

- Stroke: #126464

4. Ctrl+Click over the layer thumb, create a new layer and go to Select -> Modify -> Contract and contract it by 5px. Now go to Edit -> Stroke and apply a 1px solid White(#ffffff) stroke

5. Select the Single Row Marquee Tool and place it at the top of your canvas and delete it

6. Change this layer’s blend mode to Overlay and opacity to 55%

7. Using the Rectangular Marquee Tool select the inside part of the stroke you just made

8. Then make a #157272 to Transparent Gradient in a new layer and change this layer’s blend mode to Multiply and Opacity to 60%

9. Repeat Step 7 and move your selection by 5px up, go to Select -> Inverse, create a new layer and make a White to Transparent gradient like in the image below

10. Repeat Step 7 again, go to Select -> Inverse and press Del to clear the excess of White parts. Now change this layer’s blend mode to Soft Light and opacity to 40%

11. Apply some text to it, I’m going to use Bebas at 18pt and White color

12. Create a new layer, make a small circle next to your text with the Elliptical Marquee Tool and fill it with #78d4d4

13. Apply these layer styles
- Drop Shadow: #0d5858

- Gradient: #78d4d4 to #b0ffff

14. Create a new layer, select the Elliptical Marquee Tool and make a circle selection over the top part of your blue circle, now make a White to Transparent gradient over it

15. Ctrl+click over the blue circle layer’s thumb, go to Select -> Inverse and press Del, now change this layer’s blend mode to Soft Light

16. Now we’re going to add a texture, Ctrl+Click over the first layer thumb(the one that has the basic shape) go to Edit -> Copy Merged and then create a new layer and paste it there. Then go to Filter -> Noise -> Add Noise and apply 10% uniform noise to it, change this layer’s blend mode to Multiply and opacity to 30%

17. Now go and look for an image to use in the header, I’m going to use this one and you can also use it. Place it in your file and move it’s layer to the bottom(under the first layer where the shape is)

18. Select the Rectangular Marquee Tool and set a fixed size of 700px * 210px and place it in the middle of your canvas, go to Select -> Inverse and delete your selection

19. Ctrl+Click over the image layer’s thumb, create a new layer and go to Edit -> Stroke and apply a 2px inside White stroke. Change this layer’s blend mode to Overlay

20. Now we’re going to make the Navigation bar at the bottom of the header. Create a new layer and select the Rectangular Marquee Tool with a fixed size of 700px * 40px, place your selection at the bottom and fill it with #oooooo

21. Apply this layer style
- Gradient: #111111 to #2c2c2c

22. Create a new layer, select the Rectangular Marquee Tool and set a fixed size of 700 * 5px, place your selection at the bottom and fill it with #157272

23. Create a new layer, select the Single Row Marquee Tool and make a selection 1px under the top of the last one and fill it with White, then change this layer’s blend mode to Soft Light

24. Ctrl+click over the layer which has the shape on it(the one you created in step 20) and go to Edit -> Copy Merged, then create a new layer and paste it there. Go to Filter -> Noise -> Add Noise and apply 10% uniform noise to it, change this layer’s blend mode to Multiply and opacity to 30%

25. Create a new layer, Ctrl+click over that layer again and go to Select -> Modify -> Contract and contract it by 1px, then go to Edit -> Stroke and apply a 1px White Stroke. Change this layer’s blend mode to Overlay and opacity to 30%

26. Write in your links, I’m going to use Verdana 12pt #ffffff, and it’s finished!

1. Start by making a 210 * 260 px file. Create a new layer, select the Rectangular Marquee Tool, set a fixed size of 200px * 30px and place your selection in your document. Go to Select -> Modify -> Smooth and apply a 3px radius(be sure that your selection isn’t touching any of the borders of your canvas, if it’s touching them tehy will not be ’smoothed’)

2. Zoom in your document and select the Rectangular Marquee Tool(without any fixed size), press Shift and hold it while you select the bottom rounded corner of your selection

3. Do the same thing to both bottom corners and fill your selection with #ff7f00

4. Now Ctrl+Click over the first layer thumb to select it, then create a new layer and go to Select -> Modify -> Contract and apply 1px. Now go to Edit -> Stroke and apply a 1px White(#ffffff) border.

5. Zoom in again and delete the bottom line of your border, and with the Pencil Tool, using White, fill the space between the border and the end of the orange thing(1px only)

6. Change this layer’s blend mode to Overlay and opacity to 50%

7. Create a new layer, select the Rectangular Marquee Tool and make a selection over the orange part like this

8. Fill it with White and change this layer’s blend mode to Soft Light and opacity to 35%

9. Repeat step 7 but making the selection a little smaller and placing it inside the other selection, change this layer’s blend mode to Soft Light and opacity to 25%

10. Now the text, write anything you’d like. I’m going to use Segoe UI, 18pt and White.

11. And apply this layer style
- Stroke:

12. Create a new layer, select teh Rectangular Marquee Tool and set a fixed size of 200 * 210px

13. Go to Edit -> Stroke and apply these settings

14. Now place again the selection over the border you just did(same size selection) and go to Select -> Modify -> Contract and contract it by 1px, now go to Edit -> Stroke and add a 1px White stroke

15. Zoom in and delete the top part of the border, and place a 1px dot at the end of it with the Pencil Tool, do this to both sides

16. Now change this layer’s blend mode to Overlay and opacity to 50%

17. Now let’s make the inside content, select the white part of the container

18. Create a new layer and fill it with #f9f6ee

19. Create a new layer, Ctrl+Click over the last layer’s thumb to select it. Go to Select -> Modify -> Contract and contract it by 1px, go to Edit -> Stroke and apply a 1px #9c9c9c stroke

20. Now add some text links to it, I’m going to use Verdana 12pt and #3888ca

21. Put some bullets before each link so it looks less empty, I’m going to use one from famfamfam, and you’re done

1. Start by opening a new 800 * 900 px file
2. Create a new layer and make a #4dbce9 to Transparent gradient form top to bottom like in the image below

3. Create a new layer again, select the Rectangular Marquee Tool and set a fixed size of 750 * 30px, now place your selection at the top of the canvas and fill it with #000000

4. Create a new layer, select the Rectangular Marquee Tool and set a fixed size of 750 * 5px, place your selection under your past one and fill it with #444444

5. Create a new layer, select the Rectangular Marquee Tool and set a fixed size of 750 * 100px, place your sleection under the past one and fill it with #26ade4

6. Apply this layer style
- Gradient: #26ade4 to #40c1f6

7. Create a new layer and using the Text Tool write the name of your site, place it as in the image

8. Create a new layer and place it under your text layer, select the Elliptical Marquee Tool and make a selection as in the image below

9. Make a White to Transparent Gradient from bottom to top

10. Duplicate this layer(Ctrl+J), go to Edit -> Transform -> Flip Vertical
11. Change both layer’s blend mode to Overlay and Opacity to 40%-60%

12. Create a new layer and place it over the text layer, select the Rectangular Marquee Tool and use a fixed size of 750 * 3px, place this selection under the blue block and fill it with #000000

13. Create a new layer, select the Single Row Marquee Tool and make a selection 1px under the top of the last one, fill it with #ffffff and change this layer’s blend mode to Overlay

14. Now we’re going to make the menu, using tabs. You can create a new Group of layers to be more organized.
15. Create a new layer, select the Rectangular Marquee Tool and set a fixed size of 60px * 25px, place your selection in the canvas and go to Select -> Modify -> Smooth and use 3px as radius, you will now get the 4 corners rounded, but we only need 2, the bottom ones, select the Rectangular Marquee Tool again but with using a fixed size and press Shift while select the top corners

16. Fill your selection with any color and apply this layer style
- Gradient: #202020 to #444444

17. Duplicate this layer as many times as you need

18. Now add text to each button with the Text Tool and a web-safe font(Verdana, Tahoma, Arial..)

19. Now let’s continue with the main part, where the content is. First start by makin a container for it. Create a new layer(and a new group if you’re using them) and select your Rectangular Marquee Tool, set a fixed size of 750 * 700px and place your selection underneath the whole layout. Fill this selection with #f4f4f4

20. Create a new layer again, select the Rectangular Marquee Tool and set a fixed size of 530 * 650px, go to Select -> Modify -> Smooth and use a 5px radius. Fill it with any color

21.Now apply these layer styles to it
- Inner Glow

- Stroke

22. Here you can start writing your content, first off the heading. I’m using Trebuchet MS, 18pt and #26ade4 as color

23. Write next the content, I’m going to use Lorem Ipsum as fill-up text. Verdana, 10pt and #aeaeae as color, I also added an image to it so it look less empty

24. Now let’s add a list. Write a heading for it(duplicate the last heading layer and change it’s text) and make a new text layer with the list text on it. Make some kind of bullet using the Pencil Tool or use any small icon/bullet you have

25. I added another list next to it and here’s what you should have done so far

26. Now, let’s make the sidebar. Make a new layer group(not necessary) called Sidebar. Create a new layer inside it, select the Rectangular Marquee Tool and set a fixed size of 180 * 650px, go to Select -> Modify -> Smooth and set a 5px radius, place your selection next to the content container and fill it with White(#ffffff)

27. Apply the same layer styles as in step 21

28. Write “Main” using Trebuchet Ms, 14pt and #26ade4

29. Now write a list of links using Verdana 10pt and #aeaeae. After each link place a dotted 1px height line

30. To make this dotted lines you can use a pattern, open a new 2px * 1px file and using the Pencil Tool with a 1px default brush draw 1px inside the file(the following image has 1600x zoom)

31. Now go to Edit -> Define Pattern and name your pattern whatever you want. Select the Rectangular Marquee Tool and set a fixed size of 150px * 1px, place your selection under your first link, create a new layer and go to Edit -> Fill

32. You can add as many links as you need but since this is just an example, I will trow up an ad. This is what you should have so far

33. Now, the last part, the footer. Create a new Layer Group called Footer and create a new layer inside it. Select the Rectangular Marquee Tool and set a fixed size of 720 * 20px, place your selection at the bottom of your template but inside of the grey container, go to Select -> Modify -> Smooth and use 5px as radius and fill it with White

34. Apply the same layer styles as in Step 21

35. Add some links to the footer, or a copyright notice and your done with it

36. Your template should be finished by now, thanks for following this tutorial, I hope it helped you understand the basics of creating a web template and if you have any comment/question, don’t hesitate to leave them below

1. Start by opening a new file: 300*540 px.

2. Make a rectangle with the Rounded Rectangle Tool, using fixed size: 270*452 px and 25 px for Radius.

3. Right click over the shape and Rasterize it.

4. Add Inner Glow using #eceeed as color.

5. Gradient Overlay: #c2c3c7 to #e7e7e7

6. Stroke: #e3e5e4

7. And you should have something like this:

8. Now create a New Layer and make 2 selections like shown below.

9. We’re going to make a Linear Gradient for both, #b0b1b4 to transparent for the firts one and #767b7f to transparent for the second one, then change the Opacity to %70 and press Ctrl + D to deselect.

10. Now while pressing Ctrl, click over the thumb of the first layer then create a new layer and fill with #767b7f, deselect it and go to Filter/Artistic/Film Grain.

11. Change the mode to Soft Light.

12. Now you iPod should look like this:

13. After that we’ll make the Click Wheel, make a circle withe the Elliptical Marquee Tool using 165px as Fixed size.

14. Fill it with #f9fafc as color and deselect it.

15. Now select the first shape, as you did it in the Step 10 and Align the circle with the button Align Horizontal Centers (Be sure you have the Move Tool(M) selected).

16. Then move the circle while pressing Shift until place it as shown below.

17. Add a Stroke, #b2b6b9 as color.

18. Now we’re going to make a smaller circle using the same process we used in the Step 13 but now put 59px as Fixed size and fill it with any color. Deselect it and select the bigger circle (the same way as you did before) and Align it using Align vertical centers and Align horizontal centers.

19. Add it a Gradient Overlay: #e7ebee to #b9bec1

20. And a Stroke: #d5d5d5

21. So far your iPod should look like this:

22. Write Menu, using Segoe 11pt in #a8adb3 and select Strong as a/a (anti-aliasing).

23. Use Align top edges and Align vertical centers to align it then deselect it and while pressing Shift hit the Key Down on your keyboard.

24. Now using the Preset Shapes using 8*6px to Fixed size and #aab3ba as color, then Rasterize it and go to Edit/Transform/Rotate 90° CCW. Duplicate it and move it 6px to the left and press Ctrl + E to Merge Down.

25. Make rectangle 2*9 px and fill it with the same color and Merge it down.

26. Now align it using the same process you used to Align the text and duplicate the layer, align it and make the Play / Pause button using the same technique.

27. Create a New Layer then make a Rectangle using Fixed size 224*168 px and paint it White and align it: Align horizontal centers and move it down until get something like this:

28. Add a Stroke: #000000 4px.

29. Create a New Layer then make a rectangle: 111*14 px and use any color.

30. Add a Gradient Overlay using the following colors: #808789, #9a989b and #fdfdfd.

31. Now you have this:

32. Do the same but now use 111*17 px.

33. Colors: #0062bb, #006bcc, #53afff and #6bc4ff.

34. Now you your display looks like this:

35. Now add some text using Segoe 11pt #000000.

36. Finally add some details, I won’t explain how to do it because I’m pretty sure you already know how to do it but atleast I’ll give you some tips. For the Battery I used these colors: #67b249, #569635 and #bcf984 and for the Stroke #679454.

37. And for the Play icon. Inner Shadow.

38. Outer Glow.

39. Gradient Overlay: #0d589c, #179cdf, #0d589c

40. And that’s it, your New iPod Classic and actually you can make an iPod nano using the same process but others sizes, if you have any questions let me know below in the comments.

1. Start by opening a 500px by 150px file.
2. Write “HALO 3“(yes, in uppercase) using the Halo Font in any color.

3. Apply these layer styles:
- Drop Shadow

- Inner Shadow

- Inner Glow

- Bevel & Emboss

- Gradient Overlay

4. You should have something like this:

5. Now, we’re going to create the rust effect. Create a new layer and paint the top part of your text using the Spatter 59px default brush and #406482 as color

6. Press Ctrl and click over the small halo text layer’s thumb to select it, then go to Select -> Inverse and delete your selection

7. Ctrl+D to deselect and change that layer’s blend mode to Color Burn and opacity to 45%

8. Make again the last 3 steps but brushing the bottom part of the text and keeping Normal as the layer’s blend mode

9. Add your text to an image or a coloured background to make it look better and you’re finished

1. Start by opening a new file with 400px by 400px

2. Create a New Layer and fill it with a Radial Gradient #86d0ff to #3daef5

3. Filter/Artistic/Watercolor and use this:

4. Now you should have something like this:

5. Then go to Filter/Sketch/Chrome

6. Redo the Step 2 and change the Blending Options to Screen.

7. Again redo the Step 2 and go to Filter/Render/Lighting Effects

8. Then go to Image/Adjustments/Brightness/Contrast… and thenchange the Blending Options to Hard Light

9. Now we’re going to use some brushes founded at Deviantart. Pick the last one go to the tab Brushes and deselect Shape Dynamics and Scattering and then change the Blending Options to Color.

10. Create a new layer and fill it with #87d0ff and go to Filter/Render/Lens Flare and change the Blending Options to Linear Burn

11. Add some bubbles with the Brushes and that’s it your own Under Water Effect.

1. Start by opening a new file: 500px * 50px
2. Make a 480px * 30px selection

3. Go to Select -> Modify -> Smooth and apply a 2px radio

4. Create a new layer(Shift+Ctrl+N or Layer -> New -> Layer) and fill the selection with any color
5.Now apply this layer styles:
- Gradient: #313332 to #46474a

- Stroke: #676767

6. Select the top middle part of your nav bar

7. Create a new layer and make a White to Transparent gradient from top to bottom

8. Set layer’s blend mode to Linear Dodge and opacity to 35%

9. Your nav bar should look like this

10. Create a new layer and create a selection one px under the top border of the nav bar using the Single Row Marquee Tool

11. Fill the selection with White

12. Now, Ctrl+Click over the first layer thumb to select it

13. Go to Select -> Inverse and press Del while having the 1px white line layer selected

14. Change this layer’s blend mode to Soft Light and opacity to 60%

15. Now lets make the rollover effect, create a new 130px * 24px selection, go to Select -> Modify -> Smooth and apply a 2px radio

16. Create a new layer and fill your selection with any color
17. Now apply this layer styles:
- Gradient: #000000 to #2f3233

- Stroke: #0f1011 to #575858

18. Create a new layer and Ctrl+click over the layer thumb to select it. Go to Edit -> Stroke and add a 1px White border

19. Change the layer’s opacity to 15%

20. Select the top middle part of the rollover and, in a new layer, apply a White to Transparent gradient from top to bottom

21. Change layer’s opacity to 80%

22. Now let’s add some text. Using Verdana 11pt and White color

23. We need to add some separators between links. Create a new layer, make a selection with the Single Column Marquee Tool and fill it with #1a1b1c
24. Move the selection 1px to the right and fill it again with #5d5f60
25. Move the selection by 1px to the right again, and fill it with #232526

26. Erease the top and bottom parts using a 20px Soft Brush and change this layer’s opacity to 50%

27. Duplicate this layer and move it between the other 2 links

28. Your Vista Style Nav Bar is now finished!