Step 1: Add the 960 grid

Alignment is essential for any sort of design. We will use 960s Grid system which you can download it from here. Once file is downloaded open 960_grid_12_col.psd which is within photoshop folder. Usually the document size is 1080 X 1080 px but we need 1200 X 1100 px for our template. To change the template size go to Image -> Canvas size, input 180 width and 80 height and select top arrow. This will make the template 1200 X 1100 px. To fill the background layer with white color, select background layer, press Shift + backspace and fill it with white.

Step 2: Folder structure

I like to maintain structure while designing anything and like you to do so. Divide this design into 3 part (Header, Body and Footer). To implement this create three folder with name Header, Body and Footer in layer palette. We will work on each section step by step: first on header, then body and finally on footer.

Head Section

Step 3: Add gradient background on header

Before adding gradient background we will add guide lines. Click View -> New Guide, select horizontal and input 100 for position. Repeat same step to add guide line of 140px and 180px.

To add gradient background on header section create a new layer called Header bg. Using marquee tool create a selection of 1200×140px then click Shift+Backspace and fill it with any color. Then right click the Header bg layer and select blending options. Apply following settings for gradient overlay according to the following image.

Step 4: Add two pixel lines

About 80px from top add we will add two one pixel lines. Create a new layer called Line 1px dark, select marquee tool and select 940 x 1 px as shown in the image below.

Fill the layer with #A54E0F, repeat same for other 1px line, call it Line 1px dark and fill it with #E37D1E.

Step 5: Clean up time

Its good habit to start organizing your file right from the beginning. If you have been working on the same folder (Header bg) all layer we created till now should be in it. Even if you didn’t no need to worry. Lock your Background layer.

Using marquee tool drag selection from outside of the document so that three layer Header bg, Line 1px light and Line 1px dark are selected. Now in layer palette drag the selected layers to Background folder. From now onwards I will not explain this step to organize file instead just refer to Step 5.

Step 6: Insert your logo

Type in PORTFOLIA just above 1px lines, right click the portfolia layer and add blending option with the following settings.

Now we will add fade light behind logo to do so create a new layer call Fade, set Layer mode to Overlay. Using Rectangle Marquee Tool select a rectangle just to cover the logo then choose a soft brush of 175px and set the color to #FFFFFF. Click on the layer few times to give it a fade effect. You should have a light effect behind the logo.

Step 7: Call to action button

Select Rounded rectangle tool and set radius to 15px. Drag to create a 225 x 30 px round rectangle, name it Orange rectangle. Add layer style with the following settings.

We need to add white/grey gradient round rectangle on right hand side of call to action button. We cannot use rectangle tool in this situation so we will use pen tool to create our custom round rectangle. Select pen tool draw semi circle shape as shown below.

Add following layer settings to the layer.

Write a phone number and give a outler glow in the layer style setting.

Add call us text and use following setting.

We are almost finished with call to action button but need last bit to be added. Add two 1px lines between call us text and phone number.

Create a folder called “Call to action button” and follow step 5

Step 8: Add navigation

Select round rectangle tool with radius set to 10px. Draw round rectangle of 100 x 40px dimensional.

Add text to navigation menu.

• Font-family: Verdana
• Font-size: 14pt
• Font-style: Regular
• Font-color: #FFFFFF

Lets add some shadow below menus to do so create a new layer called Nav bottom shadow. With the help of rectangle tool draw a rectangle of 1200×40px and add drop shadow with the following settings

We are done with Header section so place all the layers and folders inside Header folder except Background layer.

Body Section

Step 9: Image slider

Download three images from SXC

• Sunflower and coriander
• CGI waves
• Delicate Floral Background 4

Place the downloaded images on the document. Resize the Sunflower and coriander image to 300×200px and place it on the middle of the document. Resize other 2 images to 240×158px and place it left and right of the document. After aligning images, blur the two small images. Go to Filter-> Blur-> Motion Blur. Set the angle to 180 and distance to 6px.

Now its turn for shadows. Using Rectangle tool create a rectangle of 300 x 120px and fill it with #000000 (black) color.

Then right click on the rectangle and select perspective.

Drag the anchor from one of the top end to make it similar to image below. Now go to Filter-> Blur-> Motion Blur. Set the angle to 180 and distance to 6px. Then go to Filter-> Blur-> Gaussian Blur, set the radius to 5.5 px. During blurring the image a pop up window will ask to rasterize the shape first, click ok.

Move the layer behind the image and it should look like the image below.

Repeat same steps with smaller rectangle for other two images.

Step 10: Slider bar

Draw a slider bar for the slider by using a Rounded rectangle tool with radius set to 20px. Again using Rounded rectangle tool with radius set to 8px draw a rectangle of 70 x 26px. Apply following blending option settings to the slider.

Time to add some slider grip to the slider button. Using Rectangle marquee tool draw a 1 x 13px and fill it with white. Next apply gradient overlay setting to the layer, name it 1px gradient line. Replicate the layer 4 times and move copied layer to adjecent sides.

Step 11: Content area

Add two new guides at 480 and 520 px. Then download icons from Pixel-mixer basic set and Pixel-mixer basic set 2. Drop setting tool icon from basic set 2 from the downloaded icon.

Write some text for the title with following settings

• Font: Arial
• Font size:18px
• Color: #E5932A
• Font style: Italic

Do similar for main text with following settings

• Font: Arial
• Font size:13px
• Color: #79807C
• Font style: Regular

Repeat this step with different text and icons. Then it should look like the following image.

Time to organize file again. Create folder call “Main content” and repeat Step 5.

Step 12: Testimonial

Add two new guides at 620 and 660 px. Using Rounded rectangle tool create rectangle with radius set to 10px (Width: 940px and height: 140px). Apply following setting to the layer.

Using pen tool add two points on the rectangle then using direct selection tool drag the right point as show on below image to create kind of arrow.

For quote sign type ” with following settings

• Font: Arial
• Font size:80px
• Color: #6E6C6C
• Font style: Italic

Do similar for main testimonial with following settings

• Font: Arial
• Font size:13px
• Color: #79807C
• Font style: Italic

Then add name with same settings except Font style: Regular and for the website link use Color: #E5932A.

Step 13: Footer

Draw a rectangle by using a Rounded rectangle tool with radius set to 8px of 920 x 170px and color #E37DLE. Apply following stroke option settings to the rectangle. Name this layer “Box frame”.

Now at the bottom of the round rectangle create a rectangle of 940 x 60px (name this layer “Front shape” and apply gradient overlay as shown in image below.

It should look like this.

After creating basic framework for footer, add shadow underneath the framework. To do so draw rectangle of 850 x 70 px name it Shadow. Click Edit -> Free Transform then Right click on the rectangle and select Perspective. Drag the top point on one side of the rectangle towards another point till it looks like the image below.

Go to Filter -> Blur -> Motion Blur and apply following settings.

Again go to Filter -> Blur -> Gaussian Blur

Move the Shadow layer underneath other footer layer.

To add in bit 3d effect add new layer “Box angled shape left” of 26 x 60px color it with #B16117. Click Edit -> Free Transform then Right click the rectangle and select Skew. Holding Alt key drag the top right point in upward direction.

Move the layer just below the gradient rectangle. Do same for the right side except drag the top left point in upward direction.

For the scrolling thumbnails start by adding a new rounded rectangle (name it Image shape) of 175×100px fill it with #FFFFFF and apply 1px stroke of #985414. Download image MAM Chihuly Show 5 from SXC and place it above Image shape layer. Select the image layer then go to Layer -> Create clipping mask, this will mask the image with the rectangle layer below it. Adjust the image as needed. To show a uplift effect on the thumbnail add a Shadow layer and using Ellipse Tool create a small ellipse and go to Filter -> Gaussian blur with Raidus 1.3px you should now have a thumbnail image with shadow like the image below.

Repeat same steps to create two more thumbnail images.

Last step of this tutorial is to add arrows for the thumbnails. Create a circle (name it Arrow circle left) of 19 x 19px, apply following setting to the layer.

Above the circle layer add new layer and call it “Arrow left”. Add a small arrow and apply stroke setting as shown below.

Last but not the least do not forget to organize your layers. This is how mine looks like.

Conclusion

Using simple techniques we can achieve fresh and creative templates. Here is the final image how the template should look like. If you have any queries pour in your precious comments below, till then cheers from my side.

Related posts:

1. How to add Floating share box to your website
2. 20 ways to improve website’s readability
3. Everything a Web Designer Should Know About Google Fonts API

1. Design a Surreal Desert Scene in Photoshop

2. Photo Manipulate a Beautiful Sunrise Landscape

3. Awesome digital bokeh effect in Photoshop

4. Create a Sleek Illustration that Fades from Line Art to Color

5. How to create a Retro-style poster in Photoshop

6. Create an Abstract Underwater Scene

7. Typography Wallpaper in Photoshop

8. Fashion Shot

9. Team Fortress 2 Wallpaper

10. How to create abstract colorful rainbow background

11. How to draw Theatrical Scene Wallpaper using Cute Animal Icons

12. Design an Extreme Grunge Wallpaper

13. Creating the Spoiled Princess Fashion Poster

14. Window Vista Wallpaper

15. Beautiful Rainbow Island Wallpaper

16. How to create Pop Art Style Poster in Photoshop

17. Fantastic Wallpapers

18. Create a September 2008 Calendar Wallpaper in Grunge Rasta Design

19. An iPhone advertising poster

20. Animated Rainbow Wallpaper

21. Ford Mustang Wallpaper

22. Love Wallpaper for the desktop

23. Design a Halloween Pumpkin Wallpaper in Photoshop

24. The Creativity Wallpaper

25. Summer Camp Wallpaper

26. Missing Piece – making of

27. Creating a Mac-Type Background in Photoshop

28. Creating a Typographic Wallpaper

29. Create Smoke Effect on Grungy Wallpaper

30. Green Apple Style Design

31. Abstract Windows 7 wallpaper

32. Design a Sleek Diamond Poster Advert

33. Custom Floral Wallpaper

34. Luminescent Lines

35. Patek Philippe Watch

36. Autumn Wallpaper – Photo Effects

37. Creating an Abstract Watercolor Wallpaper

38. Create Awesome Music Wallpaper

39. Turning a Picture Vintage

40. A Retro Poster

41. Create a Fantastic Abstract Fan Poster

42. How to make celebrity wallpaper

43. Design a Stunning Sneaker Advert

44. Create a Floating Island Scene Similar to James Cameron’s Avatar

45. Create an Intensely Grungy Wallpaper

46. Design a Stylish Retro Game Boy Poster in Photoshop

47. Design a grunge car wallpaper

48. Create a Spectacular Grass Text Effect in Photoshop

49. Create a Poster Celebrating the Passing of Spring

50. Using some free stuff to create a wallpaper

51. Using some free stuff to create a wallpaper

References:

1. Tutorial9
2. Abduzeedo
3. PSD Tuts
4. Adobe tutorialz
5. Photoshop tutorials
6. Eyes on tutorials
7. PSFFAN
8. Our Tuts
9. Photoshop star
10. The graphic design school
11. Online photoshop tutorials
12. HV Designs
13. Elite by design
14. DPHO to news

Related posts:

1. 30 best photoshop text effect tutorials
2. 20 Photoshop photo effect tutorials
3. 35 icon design tutorials in Photoshop and Illustrator

Icon can be grabbed from a free zone or purchased but if you want an icon to match you web page you can get one by creating it yourself. Here are some tutorials that shall help show you how to create beautiful icons and add beauty to your page.

1. How to Make a Professional Buddy Icon in Photoshop

2. Design a Stylish Mail Icon in Photoshop

3. Create a Stylized First Aid Icon in Illustrator

4. Create a Cute Panda Bear Face Icon

5. How To Create a Detailed Apple iPad Icon in Photoshop

6. Creating a Modern, Glossy Mouse Icon in Photoshop

7. Design a Vintage Radio Icon in Photoshop

8. Creating a Toaster-Popping Illustration

9. Beginner Illustrator Tutorial– Create a Vector RSS Icon

10. Create A Vector Art Twitter Bird Character Icon In Adobe Illustrator

11. How to Create a Vector Safari Compass in Illustrator

12. How to Create an Envelope Icon in Photoshop

13. Icon design tutorial:How to make a Calendar icon

14. Icon Design Tutorial: Drawing A Pencil Icon

15. How to Create a Basic House Icon in Photoshop

16. Create an envelpe icon with a satin feel

17. PC Mouse Tutorial

18. Create A Briefcase Icon

19. How to Create a Golden, Vector Compass in Illustrator

20. How to create a Television Icon

21. Create a glossy high tech 3D speaker icon

22. Create a Leather-Textured, Realistic Briefcase Icon

23. Share This Icon

24. Create a Vintage TV Set Icon in Illustrator

25. How to Create a Vector Sketchbook

26. Wii Mote Controller Tutorial

27. How to Design a Set of Multicolored Buddy Icons

28. Illustrating a Business Briefcase in Windows 7 Style

28. Make a 3D Pencil and Paper Icon in Photoshop

30. How to Create a Juicy RSS Feed Icon

31. Monitor Icon Design

32. How To Create An Academy Icon From Simple Shapes

33. Create A Stylish And Sleek Play-Station Portable Icon

34. Photoshop Scissor Icon

35. LG LCD Monitor Icon

Related posts:

1. Logo designing tutorial using photoshop and illustrator plus resources
2. 40 best illustrator tutorials plus websites for illustrator tutorials
3. 15 Photoshop tutorial websites en route for learning

So if you are a person who has passion towards photos and have the desire to make your photo of some worth. Here we have posted some effects of Photoshop which can help your photos stand ahead in the crowd .

1. Create a Funky Perspective of a Model Riding Digital Volume

2. Dance Photo Manipulation

3. Creating an Abstract Watercolor Wallpaper

4. How to Create a Fantasy Landscape Photo Manipulation

5. Creative Photoshop Animal King Photo Manipulation Tutorial

6. How to Turn Humdrum Photos into Cinematic Portraits

7. Expressive lighting effects

8. The Making of Mystic

9. Dramatic Gritty Effect

10. Create a Powerful Mental Wave Explosion Effect

11. Fantastic Disintegration Effect inspired by Watchmen in Photoshop

12. Selective Sepia

13. Add Another Dimension

14. How to Create a Chilling Photo Manipulation in Photoshop

15. Using Photoshop and Your Brain to Produce Diorama Illusions

16. Realistic Spotlight Effect in Photoshop

17. Manipulate Smoke to Create Hyper-Real Images

18. Beautiful Lady Effect

19. Photoshop Water Reflection – Add A Realistic Water Reflection

20. Photoshop Rain Effect – Adding Rain To A Photo

Related posts:

1. 30 best photoshop text effect tutorials
2. 51 photoshop tutorials for creating wallpaper and poster
3. 35 icon design tutorials in Photoshop and Illustrator

1. How to Create Eroded Metal Text with Photoshop

2. Create a Steam Powered Typographic Treatment

3. Typography Wallpaper in Photoshop

4. How to Create Explosive Typographic Effects in Cinema 4D

5. How to make a Typographic, Retro, Space Face

6. Create Smokey Typography in 12 Steps

7. Super Cool Frilly Bits Typography

8. Text in stitches

9. Shiny Calligraphy Text Effect in Photoshop

10. Add Fantastic Color to 3D Text

11. Create a Simple, Professional Typographical Design

12. Incredibly Realistic Water Text in Cinema 4D and Photoshop

13. 3D text

14. How to Design a Stunning, 3D, Sunset Type Illustration

15. How To Create Great Typographic Wallpaper In Photoshop

16. Design an Awesome Geometric Shaped Typography with Grungy Background in Photoshop

17. The new way to create 3D text

18. How to Create a Richly Ornate Typographic Illustration

19. Create 3-D text with some extreme lighting

20. Design a Sin City Style Poster

21. Design a Horror Style Text Effect with Dirt and Splatter Texture in Photoshop

22. Grungy Rusted Carbon Fiber Text Effect

23. Create a Spectacular Grass Text Effect in Photoshop

24. Create an Ancient Typography

25. Create a Unique Burning Text Effect

26. Awesome Grunge Text Effect

27. Dramatic Text on Fire Effect in Photoshop

28. Recreate the ‘Bee Movie’ Text Effect

29. Pimp your text with photoshop

30. How To Create Amazing 3D Type

Related posts:

1. 51 photoshop tutorials for creating wallpaper and poster
2. 20 Photoshop photo effect tutorials
3. 16 tutorials using photoshop to build a website

1. From PSD to HTML, Building a Set of Website Designs Step by Step

2. Design and Code a Slick Website from Scratch

3. Build a Sleek Portfolio Site from Scratch

4. The Design Lab: PSD Conversion

5. Converting a Design From PSD to HTML

6. Coding a Clean Web 2.0 Style Web Design from Photoshop

7. How to Convert a PSD to XHTML

8. Slice and Dice that PSD

9. Design and Code Your First Website in Easy to Understand Steps

Related posts:

1. 16 tutorials using photoshop to build a website
2. Photoshop Web Templates & Layouts Tutorials
3. 35 icon design tutorials in Photoshop and Illustrator

But we are just listing useful tutorials that will help to build a template or graphical form of a website. Yes, below are the list of 16 beautiful tutorials using photoshop to build a website hope you enjoy it.

1. Design a Beautiful Website From Scratch

2. Web Design Professional Layout Tutorial

3. Create a company/business web layout using Photoshop

4. Web Site Design Tutorial: Wellknown.as Case by abduzeedo

5. How to Make a Creative Blog Layout

6. How to Create a Worn Paper Web Layout Using Photoshop

7. Create a Promotional iPhone App Site in Photoshop

8. Hosting Layout

9. Create a photorealistic web layout

10. Create an Apple inpired website layout in Photoshop

11. Create a Magic Night Themed Web Design from Scratch in Photoshop

12. Photoshop Paper Texture from Scratch then Create a Grungy Web Design with it!

13. Create a elegant wordpress theme design using photoshop

14. How to Create a Grunge Web Design in Photoshop

15. Carbon Fiber Layout

16. Design a creative wordpress theme

Related posts:

1. Photoshop Web Templates & Layouts Tutorials
2. 9 Tutorials to convert psd to html
3. 35 icon design tutorials in Photoshop and Illustrator

1. PSD tuts

2. Tutorial9

3. Tutorialized

4. PSD vibe

5. Pixel2life

6. PSD Fan

7. PSD Learning

8. Good Tutorials

9. Adobe Tutorialz

10. Abduzeedo

11. Photoshop Lady

12. MyInkBlog

13. PSD Vault

14. Photoshop Candy

15. Tutorial Outpost

Related posts:

1. Logo designing tutorial using photoshop and illustrator plus resources
2. 15 Free PSD and photoshop resources websites
3. 35 icon design tutorials in Photoshop and Illustrator

We have collected 15 sites where you can download Photoshop PSD Files for free. These resources will help to save you valuable time.

1. Design Bum

2. Deviantart

3. Photoshop files

4. Official PSDs

5. Free PSD

6. PSD tuts

7. PSD freebee

8. PS Galaxy

9. TopTut

10. Download PSD

11. Photoshop Candy

12. Ganato

13. Teehanlax

14. Plastic Case

15. Skateboard

Related posts:

1. 15 Photoshop tutorial websites en route for learning
2. Logo designing tutorial using photoshop and illustrator plus resources
3. 20 sites for free stock images

1. Personal Page

2. Photo Portfolio

3. Cartoon Grunge

4. Talk Mania

5. Model Portfolio

6. Dark Theme

7. PSD vs Net

8. Magic night theme

9. Manilla

10. Grundge web design

11. Interior Design

12. Gamer Corner

13. Talkmania

14. Anna Brad

15. Studio Profile

Related posts:

1. 16 tutorials using photoshop to build a website
2. My favorite templates from ThemeForest
3. Portfolio websites using illustration