Here is what we will be making, click on the image for full preview:

Resources for this tutorial

• Rims
• PSD File

Step 1: Setting up the Document

Start by creating a 1400px x 1850px document in Photoshop.

Ruler Tool is very useful for this tutorial make sure that rulers and guides is turned on.

• Rulers: Ctrl + R
• Guides: Ctrl + ;

Also one thing important in using Ruler Tool is the Info(Information) Panel. When you are measuring using the ruler the information will be shown in the information panel. Make sure that this is shown in your panels at the right. If it is not shown you can access this by going to Windows – Info.

The total width of your site will be 960px. So, let’s create our first guide by going to View – New Guide, set the value to 220px. Create a second guide with a value to 1180px, this will make a total of 960px to the center of our canvas.

Step 2: Creating the Header

Now that we have set up our workspace time to create the layout. Start by creating a 100% by 200px using Rectangle Tool.

Add this Blending Option

• Drop Shadow

• Gradient Overlay

• Stroke

Result

Add another shape at the very top of the canvas using Rectangle Tool size 100% by 40px, color #000000.

Add this Blending Option

• Drop Shadow

Result

Using Text Tool add Signup and Login link at the top-right corner.

Step 3: Creating the Site Logo

This will be the site logo. Now to start, create a 80px by 80px shape using Ellipse Tool.

Add this Blending Option

• Drop Shadow

• Gradient Overlay

Result

Now, Contract the shape by 5px. To do this Ctrl + Click the thumbnail of the layer in the layers panel, next go to Select – Modify- Contract and the value to 5px. Create another layer at the top of the shape layer and fill it with any color.

Add this Blending Option

• Inner Shadow

• Gradient Overlay

• Stroke

Result

Using Text Tool add GD text. I used Myriad Pro 36pt bold.

Add this Blending Option

• Drop Shadow

• Gradient Overlay

You should have this result

Now let’s add some highlights to our logo. Create a new layer above the text and name it highlights while the layer is selected make a selection of the inner shape. Select Elliptical Marquee Tool and make a selection while pressing Alt Key as shown in the screenshot provided below. Note that while holding Alt key this will hide the selection that you have selected.

Select Linear Gradient Foreground(#ffffff) – Transparent.

Refer to the screenshot below for the final result.

Step 4: Creating the Navigation

Using Line Tool create a #000000 1px line and below it create another #444343 1px line. All our navigation will be placed here.

Using Text Tool let’s add our navigation links. “HOME, ABOUT US, SERVICES, COMMUNITY, APPOINTMENT”. Each link should have 40px distance from the right. Then, between our links create two 1px line using Line Tool.

Let’s style our home as an active link. Using Rectangular Marquee Tool make a selection as shown in the screenshot below. Use Linear Gradient Foreground(#ffffff) – Transparent to fill the selection then, set the layer mode to Screen Opacity to 30%.

The Result

Step 5: Creating the Search

As you can see in the preview above there is a input field and a search button. First thing we need to do is to create two shapes using Rectangle Tool and make sure it is centered.

To make the left part of the first shape slanted we must select the input field shape layer and use Free Transform (Ctrl + T), right click on the stage and select Distort. Now you will have the option to drag the top right point from the right. For the search button drag the left point to the right.

Add this Blending Option – Input field

• Inner Shadow

• Gradient Overlay

Add this Blending Option – Search Button

• Inner Shadow

• Gradient Overlay

Using Text Tool add text label for the input field and button.

Step 5: Creating the Slider Gallery

Select Rectangle Tool and set the radius to 10px. Create a 600px by 340px and label the layer base, create another shape above it 600px by 50px label it control base.

Right click to control base and choose Rasterize. Using Rectangular Marquee Tool make a selection as shown in the screenshot below and delete it.

Add this Blending Option

• Gradient Overlay

• Stroke

Result

Now we will add next and previous controls. Select Shape Tool and find an arrow that looks the same as in the screenshot below.

Add this Blending Option

• Drop Shadow

• Gradient Overlay – For Hover purpose

Result

Create three circles using Ellipse Tool align it as shown in the screenshot below.

Add this Blending Option – First Circle

• Drop Shadow

• Gradient Overlay – For Hover purpose

Add this Blending Option – second and third Circle

• Drop Shadow

• Inner Shadow

• Gradient Overlay

Result

Using Rectangle Tool create three shapes as shown in the screenshot below label them first, second ,third and set the opacity to 90%.

Add this Blending Option – first, second, third

• Gradient Overlay

Result

Fill each layer with dummy text using Text Tool. Create also a read more button, just refer to the screenshot below.

Let’s add some separation between each tab. Using Line Tool create a line as shown in the screenshot below.

Result

Step 6: Creating the Login Panel

Select Rounded Rectangle Tool and set the radius to 10px. Create a 340px by 170px shape.

Add this Blending Option

• Inner Shadow

• Gradient Overlay

• Stroke

Notice that the login and search look the same. But for the login input field remove the Inner Shadow and for the login button add a #a5150 Stroke.

Using Rounded Rectangle Tool with the same radius. Create a shape as shown in the screenshot below.

Add this Blending Option

• Gradient Overlay

• Stroke

Create another shape using Pen Tool.

Add “User Login” text using Text Tool

Step 7: Creating the Appointment Box

Using Rounded Rectangle Tool with a 10px radius create a 340px by 140px. 20px distance from the left and top.

Add this Blending Option

• Gradient Overlay

• Stroke

Result

Notice that For Free button in the preview above. To do that create a shape as shown in the screenshot below and copy the layer styles of the login button and place the same arrow shape as we used for our slider controls.

Add a For Free text using Text Tool size 14pt Myriad Pro.

Add this Blending Option

• Inner Shadow

• Gradient Overlay

• Stroke

Result

Add dummy text using Text Tool size 24pt Myriad Pro Bold Italic, place it as shown in the screenshot below.

Add this Blending Option

• Drop Shadow

• Gradient Overlay

Result

Finally open the rims image that you have downloaded and place it as shown in the screenshot below.

Step 8: Creating the Services

Create a 960px by 205px base shape using Rounded Rectangle Tool.

Add this Blending Option

• Inner Shadow

• Gradient Overlay

• Stroke

Result

Let’s add previous and next controls. Using Rectangle Tool and Pen Tool create a shape as shown in the screenshot below.

Add the same Blending option as we did in our base shape.

Now that we have the control and base layer we will add our services. Create a #141414 280px by 160px using Rounded Rectangle Tool. Place it as shown in the screenshot below, when you’re done contract the shape by 5px.

Add this Blending Option – Base layer

• Drop Shadow

Result

Create a shape as shown in the screenshot below color must be black. When you’re done set the layer opacity to 80%. Add text using Text Tool and grab a copy of read more shape as we did in our slider gallery place it as shown in the screenshot below.

Group all the layers we have made and duplicate it twice for our other services. Place it as shown in the screenshot below.

Result

Step 9: Creating the Latest News / Blog

The base and the header of our blog section is the same as our login. Duplicate a copy of it and change the header text to Latest News.

Grab a sample 125px by 125px image for our thumbnail post. I will not go into detail about how to do this, just refer to the screenshot below.

Step 10: Creating the Testimonials

Still the same header but different base style. For the base style copy the blending option we applied on the base of our services. Refer to the screenshot below for the thumbnails, text format, and line colors.

Step 11: Creating the Footer

Using Rounded Rectangle Tool create a shape as

Step 12: Creating the Background

Select the background layer and fill it with #bbbbbb. Using Rectangle Tool create a shape as shown in the screenshot below.

Go to Filter – Blur – Gaussian Blur

Finally we’re done. Wooo! I hope you didn’t get bored following this tutorial and I hope that you’ve learned something in doing this. If you have questions or comments just post it below and don’t forget to tweet and share this tutorial with others. Cheers all! :)

Today, one of the main references for this purpose is definitely Dribbble. Dribbble is not only an awesome place to be inspired by many talented designers. You can actually stumble upon some fantastic free PSD files and examine them and learn more.

This collection includes some fantastic UI kits, a lot of assets for web and graphic design, as well as a few cool icons. These PSDs are as perfect for learning as they are for your future projects. Personally I haven’t practiced learning from PSDs lately but by checking out some of these I surely realized how much you can learn from a well-built PSD.

How it works

Everyone can follow the sign-up process and create an account. As soon as you sign up, you will be considered a spectator and you can follow players (designers) and like their shots (work), however, in order to post shots you have to declare yourself as a prospect, but not everyone will be able to. To become a player and upload your own shots you need to get known in the community and be drafted by a Dribbble member. So basically you need to interact with other designers since being followed by a member will work as a recommendation within the community.

This is indeed a new work process in the social media world but it definitely works to keep and maintain quality within the community. Dribbble basically tells you that everyone can watch the concert but not everyone can or know how to sing. However that doesn’t mean you shouldn’t give it a try, does it? These PSDs are perfect way to start out. Examine them, play with them, reconstruct them and, who knows, maybe one day you’ll be the next rockstar of Dribbble.

1. Chutzpah UI Design Kit by Morgan Allan Knutson

Clean and smooth UI kit that you can nicely implement in subtle– colored websites as well as some mobile apps. PSD comes with grouped layers so you can learn about layer styles applied to various elements.

2. Facebook like UI for Miro by Morgan Allan Knutson

Facebook like button recreated in Photoshop. It’s a great asset to have for various web design projects.

3. Blaubarry Free UI kit 2 by Mikael Eidenberg

Sleek UI kit including sliders, buttons, scrollbars and form elements made with only shapes, text and layer styles. Get to know how an efficient UI kit is made.

4. Plane free psd file by Jeremy Sallée

Extremely detailed PSD you can learn a lot from. You can also use this artwork as an icon or illustration.

5. Little green ribbons by Shegy

Cool ribbons in 3 angles that you can either use for web designs or some banners.

6. Flip Clock PSD by Max Di Capua

Fully editable and scalable (except noise layers) PSD. It’s suitable for under-construction pages as well as some stylish countdowns.

7. DDFreebie – Macbook PSD by Dany Duchaine

A fully layered PSD Macbook Pro. Suitable for web designs

8. Chrome UI Kit by Todd Hamilton

Very useful Google Chrome UI kit since there are only a few of them around.

9. Free shopping cart by Jonno Riekwel

Lite and pixel-perfect shopping cart perfect for small online shops.

10. Free Iphone Template in 5 angles by Mikael Eidenberg

This is a free layered PSD with a iPhone from five different angles, reflections, shadows and glossiness can be adjusted and the display content is the same smart object for all angles.

11. Facebook Connect Buttons PSD by Murat Mutlu

Handy PSD of the Facebook connect button.

12. Your cart widget by Pawel Kadysz

Two little widgets perfect for almost any kind of store. Re-sizable and vector.

13. Delight Icons by Jeremy Sallée

Find out how a classic web 2.0 icon is made. A set of seven icons in PSD format so you can play around with them.

14. Log In (+ free .psd) by David Cristian

Stylish and trendy login form well suited for pixel-perfect web designs.

15. Lion Mini Gui Kit (+psd) by Kamil Khadeyev

Lion OS is just out and some of might be already looking for it’s GUI. So here it is – mini, yet high-quality UI kit.

16. iPhone icons by Pontus Johansson

17. Shopping Tags (free .psd) by Jeremy Mansfield

18. Free Buttons Psd by Johnny Waterman

19. Map free psd by Mathieu Brg

20. Download Buttons Free PSD by jackietrananh

21. Free buttons, yaay! by Daniel Sandvik

22. Watermelon slice by Ioan Decean

23. Cameras psd file by Jeremy Sallée

24. Milk Release by Dom

25. Radio player freebie by Charlie

26. Shiny Blue UI by Kevin Andersson

27. UI Oink by James ⚓

28. Browser & Magnify with Free PSD by Liam McKay

29. Dark UI by Jeff Broderick

30. Mini Clouds Set PSD by jackietrananh

31. Dribbbles by Kevin Andersson

32. iPhone 4 GUI PSD by Rich Hemsley

33. Gaston-Louis Vuitton Wallpaper & PSD by Robert Padbury

34. Social Icons PSD by Umar Irshad

35. Notepad PSD by Christian Baroni

36. Clean Minimalistic Portfolio Snap by Daryl Ginn

37. FREE Icon Set by Joe Prince

38. Super Mario Bros by jackietrananh

39. Twitter Follow Button PSD by Vin Thomas

40. Compact Music Player Freebie by Daryl Ginn

41. Audio Player by Jonathan Moreira

42. Blixt Freebie #2 – Search by Andree Blixt

43. Old cassette by Ioan Decean

44. iMac.psd by Mantas Sutkus

45. Simple Buttons Resource by Jan

46. Google+ icon by Kyee 

47. 20 Coloured pencils with notes by Regina Casaleggio

48. Login Form – PSD Freebie by wpscientist

49. Pokemon Free Psd by jackietrananh

50. Date Flipper by Enon Avital

Creativity and inspiration play a big role on having a successful design, especially when it is seen on the web. One of the resources where we can get techniques with, of course, is from the experts. Good thing that in the online community today, people, especially those who are already well-experienced are sharing their talents by uploading their designs and letting other people use them either for inspiration or for commercial or non-commercial use.

PSD (Photoshop Document) files are one of those. As these are supported by Adobe Photoshop, the tool itself makes it very easy for users to observe how its features and functionalities can greatly affect a design. In this way, you can study how a certain design is created. To add, it also allows you to edit, experiment and customized your downloaded files.

Below are PSD files you can use on your design, especially for web design such as text effects, icons, templates, etc. If you want to download the PSD file, just click the image or the title name of each design to bring you to the website. Make sure to read the owner’s terms and agreements first before using.

Have fun learning and designing!

1. Ilumina – Glowing Text Styles

by: ArtoriusGothicus

This icy glowing text would be perfect for your banner or design.

2. Striking Photoshop Text Effects

by: Rafi

This PSD freebie comes with a package of text effects such as milk font, golden effect, blubber look text effect, gothic and waxy plastic look of text that you can use on your design.

3. Metal Text Styles

by: Rafi

Looking for shiny metal, gold and chrome text effects? Then this one is for you.

4. Fancy Neon Text Effects

by: webdevtuts

Give your design a fancy look with these neon text effects.

5. Six Styles Effects

by: Folksnet

If you are looking for different kinds of text effects, try to download these six styles of text effects.

6. Gel Text Effects

by: Premium Pixel

Want to know how to create a gel effect on your text? Click on the picture below to download the sample PSD file.

7. Share Buttons

by: brokodil

Let your friends advertise your website, blog or products on different social networking sites through these share buttons.

8. Social Icons

by: Tyzyano

Does your website has a Facebook, Twitter or Flickr account? you may place these icons beside the links on your website.

9. Abstract Web Buttons

by: psdGraphics

Let these web buttons that consist of ten different styles be an inspiration. Try customizing them to practice your designing skills.

10. Glass Encased Icons

by: manoluv

Aren’t these glass encased icons cool and unique? Try downloading these free icons and make your own.

11. BluePrint 20 Social Icons

by: Tyzyano

These blue print social icons are awesome to combine with a green, yellow or orange background.

12. Colorful Coming Soon Page

by: amandhingra

You may use this creatively done notice to your users that your website and online services will be back as early as possible.

13. Modern Web Buttons

by: ArtoriusGothicus

These free buttons already comes with hover image and very easy for you to customize it.

14. Button Template

by: Sed-rah-Stock

Give uniformity on your template with this one. You may use this one for print or commercial use and don’t forget to link back on the owner.

15. Up, down, left and right arrows, blue web icons

by: psdGraphics

Simple, blue icons you may use for navigation.

16. Web Icons

by: eel886

Putting these icons will make your website look professional.

17. Miscellaneous Icons

by: sultan-design

I find these high-quality icons really cute and in style.

18. Custom Navigation Menu

by: amandhingra

These custom navigation menus are good for an online shopping website, even for companies who want their website to look very simple yet professional in style.

19. Drive Icon

by: borislav-dakov

Use these cute little freebies to customize your drive icons.

20. Shiny Price Badges

by: Free PSD File

Are you looking for price badges for your website? I would love to recommend this one for you, they are so nice and very attractive.

21. Black and white pricing table

by: psdGraphics

Three columned, gray color background and glossy white buttons with great text effects to organize your offers.

22. Blue login box

by: psdGraphics

This free blue login box template comes with customizable HTML and CSS source.

23. Midnight Sun Template

by: Bevel and Emboss

This Midnight Sun free template from Bevel and Emboss is best suit for technology-based company website.

24. E-commerce Website

by: Rafi

This sleek and clean look template is very appropriate for an e-commerce website.

25. Template – Web Designer

by: mavermedia

I find this template professional with a touch of creativity with the icons and how the creator organizes the elements. Since this template is for personal use only, you can use this when practicing your designing skills or for inspiration.

26. Green Template

by: mavermedia

A nice, green template by Brad Maver to give a fresh look on your website.

27. Organic conference

by: Bevel and Emboss

This template is good for your personal blog or personal website. It is simple but elegant in look.

28. GigaSpace

by: gerbengeeraerts

The color of this template suits a website that sells gadgets, laptops and other techy things.

29. Environmental Template

by: Free PSD

This kind of template is designed for a website that intends to save our Mother Earth.

30. Blue Template

by: mavermedia

Why not use this on your personal or business website to give it a refreshing look?

31. Resort Template

by: FreePSD

If you are trying to build a website for your resort, you can get ideas by downloading this PSD.

32. DelliStore: Professional PSD Template

by: Dellustrations

Be inspired with this beautiful template for your restaurant or store’s website.

33. Orange Template

by: uniQsDesigns

Don’t have any idea for your blog template? Try this orange template made by uniQsDesigns. Just put a little touch of yours to personalize it.

34. Portfolio Website

by: peewee1002

A black, simple but professional looking template that you can use for your website. Try customizing to give improvements or personal touch on the template.

35. Black and Blue Template

by: uniQsDesigns

I never thought that black and blue makes a good looking template. I find this very cool.

36. My Designs Portfolio Template

by: FreePSD

If you are trying to create your online portfolio, check this sample template to get an idea.

37. Apple Logo

by: zandog

Use this as an inspiration in creating your own logo with this smooth, simple effect.

38. Gold and Black Shopping Card Template

by: psdGraphics

Seldom that we can search a shopping card template, so I have posted this one for you. Thanks to psdGraphics!

39. Progress Tracker Bars

by: Free PSD File

I got here five nice progress tracker bars for your website. These are guides for your users on processes such as signing up an account.

40. 4 Step Process Panel in 2 Colors

by: Rafi

This PSD file offers a four-step process to show users a website process.

41. Satisfaction Guarantee Wax Seal

by: Rafi

For those who are looking for satisfaction guarantee seal, this seal with wax effect will look good on your website. It also captivates the attention of your customers when seeing it because of their colors.

42. Awareness Ribbons

by: Xiang Fey

You may use these free awareness ribbons to put on your website to show your support on a certain disease act or movement.

43. Mail Feedback Form

by: Free PSD File

Why not put a bit of creativity on your feedback forms like this free mail feedback form by Free PSD File.

44. Fully Layered Calculator

by: Free PSD File

This full layered calculator template is more useful with flash websites. Download and modify this calculator the way you want it.

45. Wraps and Ribbons

by: plakkert

Are you looking for free PSD file of wraps and ribbons? This one is for you. You may change the color of each to blend it on your design.

46. Old book

by: moka107

This one is good for templates if you would like your site to have that vintage look. Don’t forget to credit it to moka107 :)

47. Webdesigns PSD Pack

by: majareq

This one comes in five beautiful web template designs made by Majare Q. You may customize each to give a personal touch depending where you will use them. Don’t forget to put credits to the owner.

48. Samsung Galaxy

by: Zandog

Try downloading this Samsung Galaxy template and use it as an inspiration.

49. 21 Cute PSD files

by: naturalemotions

For cute, girly look on your site or blog, you can use this 21 cute PSD files.

50. Water Wave

by: arEa50oNe

Try this water wave effect if you are trying to create a sleek-ish web template.

Remember, the effects or designs you use already give impressions to your users on what you intend to show them, so choose your design wisely and appropriately.

Some of the listed websites will be well known, but you’ll be surprised that they provide free PSD files. I hope you will like this collection and find it useful.

1. 365psd

365psd.com is one of the best free PSD files provider on the web, I think. They share highest quality and pixel-perfect PSD files.

2. Free PSD Files

Another professional and clean looking website sharing PSD files. Really worth checking.

3. Design Instruct

Design Instruct mostly known for sharing creative tutorials, but they let you download all the tutorial files, that means you can download final result shown in the tutorial.

4. psdGraphics

psdGraphics shares very nice PSD files, templates and even tutorials. Very clean and elegant website design helps you to find everything very fast.

5. Official PSDs

A lot of PSD files available for free download. You have to register to download their files.

6. Photoshop Files

Photoshop Files is a PSD files community, where you can download files after registering or upload your own work.

7. Download PSD

Showcase style website sharing PSD files, very creative use of Photoshop environment used in this website design.

8. FreePSD

FreePSD is another great source for downloading free PSDs. If you want premium quality they also have something to offer.

9. Tutorial9

Elite tutorial blog in design community. They provide wonderful and original tutorials and the best part – they share PSDs.

10. deviantART

deviantART has definitely the biggest PSD files collection on the web. All the files are created by DA community members.

11. GraphicsFuel

Design blog shares a lot unique and unusual but useful PSD files, check this out.

12. Ps Galaxy

Another one PSD graphics showcase style website with voting system. Sharing PSDs, gradients, custom shapes, Photoshop actions and much more.

13. Six Revisions

Check Tutorials category on Six Revisions and you’ll see how much quality tutorials they have, the best part is – they let you download source files.

14. PSD Vibe

Clean and modern style tutorials with free PSDs available.

15. Abduzeedo

Abduzeedo mostly known for inspirational posts but they also provide high quality tutorials and of course free PSDs.

16. DeviseFunction

Professional web designer blog where he shares his knowledge in tutorials. You can download tutorial files for free.

17. PSDhome

PSDhome collects psd files, that’s designers give from everywhere to a single website. PSDhome gives everyday free psd files, which are buttons, icons, text effects, themes, graphics and many more.

18. FreebiesPress

Minimalist style design freebies blog. Perfect place for downloading fonts, icons, brushes and of course PSDs.

19. PSD Collector

A lot of useful resources and free PSDs at design and development blog called PSD Collector.

20. FreePSDTheme

FreePSDTheme is a collection of themes designed by Dany Duchaine and some other web designers from Themeforest. Dany now gives away high-quality top of the line premium themes for free to spread his talent, time, and inspiration.

21. web3mantra

Very nice PSD files collection created by web3mantra team.

22. Net-Kit.com

Net-kit provides free PSD files, mostly web related graphics.

23. FZWP

FZWP – very strange name, old and not attractive design but they have big library of PSD files, your decision to visit this or not.

24. Aaron Ovadia

All PSDs are free to be used in personal projects or commercial projects. Created by Aaron Ovadia.

25. ForDesigner.com

PSD files collection by ForDesigner.com team. Free PSDs covering full illustrations and single objects.

26. Free4Photoshop

Another “redesign needed” PSDs archive. Free PSDs from Free4Photoshop.

27. FrooWeb

FrooWeb.com provides free PSDs such as web templates, video player skin psd, buttons and much more.

28. Dezignus

Elegant design and attractive freebies – PSDs. Dezignus offers wide range PSD files for free.

29. Artfans Design

Clean website design with clean and professional free PSD files.

30. Smashing Magazine

Definitely one of the best source for designers, they also provide free PSDs, just check this out.

31. Free PSD Files

Simple and “straight to the point” PSD files gallery.

32. Dezinerfolio

A lot of great design resources like vectors, icons, themes and free PSDs.

Step 1

Open your Adobe Photoshop. Create a new document with 1000px x 1000px size.

Step 2

Select Pen tool (P) and draw like this.

Right click on the object which you drawn in previous step and select Make Selection. Then you need to fill this object with Gradient tool (G) colors i used #fbfcfc for light ash and #d9dcde for little bit ash.

Step 3

Next is side of monitor. Create a new layer under layer1. Draw an object with pen tool as below.

Then fill that object with the color of #a7a7a7. So you will end up with a picture similar to this.

Step 4

Next step is create new layer under the layer2. Draw an object like below. This is going to be stand for the monitor

Then fill with #c5c2c2

Step 5

OK, now draw an object for a shining effect to right side of the monitor. So draw an object like this,

Then fill black color with a opacity of 50%.

Apply Gaussian Blur effect with the value of 2.6 hint : Filter > blur > Gaussian Blur…

Step 6

Next We will repeat the same job as we done in previous step. But white color.

Step 7

Now create new layer and draw a white color object to get shining effect to bottom of the monitor.

Step 8

Ok lets give some details. Drawing some lines will make our monitor beauty. So take Pen tool (P) and draw these three lines as bellows. Use #787979 for your line.

And then draw white lines very closed to the lines which you drawn before. Please see this picture.

Step 9

Now friends, we shall give shining effect to monitor’s stand. Create new layer and draw a white color object like this.

Then take Eraser (E) and erase the border of that object.

Ok now create next layer and draw this with Pen tool (P).

Fill white color to that object.

Then apply Gaussian Blur filter to that object. hint : Filter > blur > Gaussian Blur…

Step 10

Create a new layer under the all shining layers and create this object. We are trying to make shadows in the stand. Draw this object with Pen tool (P) fill black color and reduce this opacity to 50%.

Then apply Gaussian Blur to this object as well. hint : Filter > blur > Gaussian Blur…

Create another new layer

Step 11

Draw a bottom border to monitor’s stand. Fill color with #737373.

Step 12

Now create new layer and draw display borders. First draw two white borders. You can use Pen tool (P).

Then draw black lines like this.

Step 13

Ok now get any picture to put on the screen. I used 1stwebdesigner.com screen shot as my screen display. So i got a screen shot and put in top of all other layers.

Then adjust shape of your picture to match with monitor screen. You may use Warp tool. hint Edit > Transform > Warp

Then we will give some shining effect to the monitor’s screen. So draw an object with Pen tool (P), right click, and select Make Selection… then OK. Make sure that feather radius is 0.

Once you get selected area you will be able to fill with Gradient tool (G). Use white color for shining.

So you end up with a picture similar to this.

Step 14

In this step we create shadow to this monitor. Take Pen tool (P) and draw shadow, and fill with black color.

Then apply Gaussian blur effect.

Step 15

Draw two buttons to this monitor. Select Rounded Rectangle tool (U). Draw a rectangle and fill with #9d9d9d. Then apply styles.

Step 16

Ok our monitor almost done. At the end we will give Gradient background to this picture. That’s All !!!

All the gadgets are categorized in 7 categories so that you can easily find the resource you are looking for (clicking on the category will navigate you to it):

1. Phones
2. Screens & Monitors
3. PC, Laptops & Tablets
4. Media Players
5. Mouses, Keyboards, Headphone & Speakers
6. Video Games Consoles
7. Misc Gadgets

Phones

1. Apple iPhone 4G

2. Htc Dream

3. HTC EVO 4G

4. Motorola Droid

5. HTC Touch 2 Smartphone

6. Wall Phone

7. Phone: DC-660i

8. RIM Blackberry

9. Nexus One by Google

10. Tv Mobile

11. Motorola Droid

12. Motorola Droid X

13. HTC Dream Android

14. HTC HD2 Smartphone

15. HTC Incredible Smartphone

16. HTC Eris Smartphone

17. Nokia 5310

18. Nokia 3500c

19. HTC Diamond

20. LG KS360

21. HTC Mondrian Concept

22. Nokia N96

23. NOKIA 5800 XpressMusic

24. Samsung Corby S3650

25. BlackBerry Storm

26. Fully Layered PSD Abstract Phone

27. iPhone 3G

28. Old Telephone

Screens & Monitors

1. LCD UltraHD 350dpi PACKandPLUS

2. iMac

3. PLASMA TV

4. Flat Screen Television

5. iMac reviewed 2.0

6. Samsung Monitor

7. Led Cinema Display

8. LG Plasma TV

9. Widescreen LCD TV

10. 4 Retro TV Icons

11. Samsung P2370 Computer Monitor

PC, Laptops & Tablets

1. Dell Vostro

2. Macbook Air

3. MacBook Pro

4. TabletPC

5. Tablet PC – layered

6. iPad

7. HP – Screen and PC

8. Full Layered MacBook Air & MacBook Pro

9. Mac Mini

10. Mac Pro

11. The MacBook In Black

12. Silver Rack Server

Media Players

1. Microsoft ZUNE

2. iPod nano 5G

3. Phony CD Player

4. iPod PSD

5. iPod nano-chromatic

6. iPod Touch

7. iPod Shuffle

8. Zune HD

9. Apple remote

10. Zen Stone – Colors

Mouses, Keyboards, Headphone & Speakers

1. Apple Keyboard

2. Full Keyboard

3. Keyboard Apple

4. iMac Mouse

5. Mouse Digital

6. Mighty Mouse

7. Mac iMouse

8. Customizable Speaker

9. Headphones Resource

10. PSD Speakers

11. Headphones

12. Speakers

Video Games Consoles

1. Xbox 360

2. Xbox 360

3. Sony PSP

4. Sony Playstation 3 Slim

5. PlayStation3

6. PlayStation 1 Console

7. Nintendo Wii Black

8. Nintendo DS Lite

9. Nintendo DS Lite

10. Fully Layered PSP

Misc Gadgets

1. Retro Clock

2. Layered Olympus Digital Camera Icon

3. Retro Audio Tape

4. AirPort Extreme

5. Airport Express

6. Digital Camera

7. debLURR : Digital Camera

8. KODAKZx1 Video Camera

9. Sony Cyber-Shot W300

10. PSD Wireless Router

11. Digital Photo Camera

12. Stopwatch

Let us know if we have missed some thing awesome and we will be happy to update the article.

1.Nice neon effect

2.Slick 3D ice text effect

3.Super easy neon-style

4.Playful robust 3d letter design

5.Text decoration by mixing two styles

6.Glossy 3d text using xara 3d and photoshop

7.Smashing your creative block

8.Dynamic and textured 3d text

9.Exciting 3d composition

10.Design beautifully frosty text effect

11.3d newspaper cropped text effect

12.Dynamic shattering text effect

13.Nifty glass text effect

14.Create 3d love text composition

15.Futuristic glowing text effect

16.Beautiful Xmas wallpaper

17.Patriotic text using displacement masks

18.Quick tips neon layer styles

19.Luminous glass effect

20.3D spectacular text effect

21.Colorful glowing neon text effect

22.Awesome abstract text effect

23.Metal text-under-12′o clock spot light

24.Evil-3d-text-tutorial

25.Luxury golden text effect

26.Starcraft

27.Smoked text effect

28.Typography with texturing and lighting

29.3d blinds text effect

30.Cosmic sci-fi poster design

31.Torn Paper Edges

32.Glowing and sparkling intense light 3d logo

33.Typographic wallpaper

34.Canvasscribbles

35.Funny wooden type treatment

36.Sweet chocolate coated text effect

37.Fantastic color to 3d text

38.Colorful pastel typo

39. 3D text

40. Cool unusual text effect

41. Clash titans text effect

42. Bling Bling

43. Burnt wood

44.Very cool folded typo

45.Destructive black and white lettering with a dramatic splash effect

46.Delicate text effect

47.Abstract colorful artistic feeling

48.creating cardiac rate effect

49.Incredible typographic illustration

50.Retro style effect

51.Richly ornate typographic illustration

52.High quality metal 3d text

53.Jelly fish delight

54.Jungle 3d text

55.Layered text

56.3d neon light typography

57.Polished metal

58.Shining glitter text

59.Stunning neon light 3d typography

60.Text effect in the chameleon style

In this article you will find templates for web designers and templates for average photoshop users as well. You can exploit, customize and improve those designs easily to suit your specific needs.

1. 960 Grid System

The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.

2. Business Card Template

10 layer 350 dpi business card template with bleeds and margins.

3. A4 Business Card Template

300 dpi PSD file.

4. Huge Collection of T-Shirt Design Mockup Templates

Huge collection of T shirt mockups. Photos and vectors.

5. Skateboard Template

Detailed psd with natural, natural with trucks and colored deck.

6. Twitter Background Template

Template with guides that match up with different resolutions.

7. Curved Bill Baseball Template

Layered PSD file.

8. Film Strip Template

Psd file containing a short film strip with guides set to lay out 7 small images.

9. DVD Case Template

Customizable PSD for DVD case preview.

10. DVD Plastic Case PSD

Great template to show off your DVD covers.

11. DVD Box Creator

PSD and photoshop action to create DVD boxes. Easy understandable and great tool.

12. DVD Case Inlay PSD Template

Inlay for an Amaray DVD case, 300 dpi, CMYK including DVD video logos.

13. DVD Label Template

Detailed PSD template, 300 dpi, CMYK.

14. iPhone 3G PSD

Useful for creating iPhone designs, themes.

15. Metal Can PSD

Layered PSD file.

16. Magazine Template

Large PSD template.

17. Safari Template

Editable PSD file. Handy for web designers.

18. Vector Safari Template

PSD file, built using shapes and styles.

19. Browser Templates PSD

Lot of popular browser templates with address bar, favicon and more.

20. Browser Templates PSD

All the popular browsers in different OS and resolutions.

21. Browser Form Elements

Useful tool for web designers. Mac Firefox 3 and Vista IE7.

22. Browser Screens and Website Elements

Useful set of vector website assets you can use to mock up your client projects, present your work, or get a quick visual while laying out websites. Illustrator file.

23. Web Browser Elements

Most popular web browser elements on different OSD.

24. iPhone GUI Elements

Layered PSD files.

25. Snowboard Template

High resolution PSD file. Helpful creating iPhone themes.

26. Ski Template

High resolution PSD file.

27. Mouse Cursor And Hand Pointer Icon PSD

Computer mouse cursors, arrow and hand pointer icons. Pixel style symbols isolated on white background. Windows 7 and Vista cursors recreations, white body shape with a black frame.

28. Black Software Box PSD

3D software box template in black color and a shiny orange details. Perspective view box with a nice gradients, soft edges and corners. The box can be easily customized with your text and images

29. Blank CD Template

The top of a white CD/DVD disk. Blank CD photoshop template. Isolated on white background, psd file available for download, layered file. You can place your own logo, image, text or message.

30. Paperbag PSD

31. HDTV Template

Layered PSD and XCF file.

32. Print Product Templates

When you start with one of the templates, you can easily view product dimensions, layout, bleed, safety and more. PDF files.

33. Blackberry PSD

PSD file with 135 layers.

34. iPod Nano PSD

I searched for a fairly long time, until finally gathered these resource sites and I hope that it will be useful not only for me but for you too.

1. deviantART

Here you can find almost everything and of course there are plenty of free PSD resources, icons, layouts, textures and much more available. You just need to take your time and do research and I am sure you’ll find what you looking for there.

2. Photoshop Candy

3. FreePSD

4. Official PSDs

5. Ganato Design

6. PSD Central

7. PSGalaxy

8. Download PSD

9. Lord of the Design

10. Bevel and Emboss

11. e-webtemplates

12. Free PSD Files

13. DesignBum

14. Designers Revolution

15. Pixey

16. For Designer

17. PSD Spy

18. Toptut

19. Smashing Magazine

20. Jack Rebel

21. Lorelei Web Design

22. Dezignus

23. BittBox

24. FrooWeb

25. aaronovadia.com

26. Photoshop Files

27. HTMLTree

28. Free Photoshop

29. Keep Designing

30. The Free Logo Makers

31. GFXFever

32. Hidden Pixels

33. psdGraphics

34. PSDList

35. Piksels

Oh, and if you have never been using deviantart as community, I will definitely write an introduction article about DeviantArt revealing my good/bad impressions and discoveries in my devianting workflow!

Right..now about tutorial – since it’s the first professional web design Photoshop tutorial over here, I really want to hear your thoughts – where should I focus on and do you enjoy and want to see such tutorials more in future! Tutorial is also for advanced users, but I really tried to explain really detailed those hard points.

For this tutorial purposes I will be using Adobe Photoshop CS3, 960gs grid system and Windows.

This is what we will create, click on image for full preview:

Step 1 – Creating New Document Using 16col Grid System

Please download 960gs Photoshop template here and open 960_download\templates\photoshop\960_grid_16_col.psd file.

Hit ALT+CTRL+I or Image/Canvas Size and put new size 1200x1700px. Hit Enter. Select Background layer,set foreground color to White (#FFFFFF), press ALT+DELETE to fill whole background with white color.

Step 2 – Header Background Creation

Rename that Layer 1 folder to Header and create new layer there pressing CTRL+SHIFT+N. Rename it to – “Header Gradient”.

Notes

You can show/hide grid on/off pressing CTRL+;

You can show/hide rulers on pressing CTRL+R (I always show them, but I just tell this in case you don’t use them).

Take a new guide and put it on 400px. Now take Rectangular Marque tool and select that area. Use linear gradient with values – #b3b6ba to #47464e.

Step 3 – Create More Interesting Background

Create a new layer and call it “Lightning”.

Now let’s switch to Brush tool, we will use soft rounded brush with hardness 0%.

Press F5 or go Window/Brushes to bring up brush panel. Use these settings:

Brush Tip Shape:

• Diameter: 50px
• Hardness: 0%
• Spacing: 1000%

Shape Dynamics:

• Size Yitter: 100%
• Minimum Diameter: 30%

With these settings use foreground color white #ffffff and just click and drag from left to right on that gradient.

Apply Filter/Blur/Gaussian Blur with 10px Radius and you should come up with pretty good effect.

To make visible only that lightning which is upon “header gradient” layer we need to make “lightning” layer dependent.

Step 4 – Little Header Upper Section Styling

You can skip this step if you want but I wanted a little bit darker line at the top of our design.

Create a new layer “Upper Layer”, put foreground color to #2e2f33, select rectangular marque tool and create selection 20px high.

Press ALT+DELETE to fill it with that dark color and change “Upper Layer” opacity to 50%.

Step 5 – Add Simple Styled Line

Create a new layer “Border”. select Single Row Marque Tool to add 1px line between that dark line and header.

Add these blending options to this layer:

Drop Shadow:

• Blend Mode: Normal
• Color: #a5adb5
• Opacity: 40%
• Distance: 1px
• Size: 1px

Inner Shadow:

• Blend Mode: Multiply
• Color: #000000
• Distance: 1px
• Size: 1px

You should get good looking border now!

Step 6 – Keep Yourself Organized!

We will have a lot of layers here, so it’s really important that you keep all layers organized.

Select all header layers we have created until now – “Header Gradient, Lightning, Upper Layer, Border” holding CTRL and when all of these layers are selected, press CTRL+G to group them in new folder – call that folder “BG”.

Now create a new layer and press again CTRL+G to create new group and call it “Logo”.

Step 7 – Logo Text Effects

I did also quick text effect logo, but I will not go detailed about it, since I believe it’s not something unique.

I put logo in the left top side, which is usual placement for logotypes. Later we will add search button on the right side, to balance our composition.

In letters 1,S,T which I added separately I used Tahoma, 60pt, Strong, Bold and All Caps.

Blending Options:

Drop Shadow:

• Blend mode:Multiply, #000000
• Opacity: 50%
• Distance: 1px
• Size: 4px

Gradient Overlay:

• Opacity: 100%
• Gradient: from #b0b0b0 to #ffffff (white)

Also I added slogan there: “Endless inspiration and daily resources..”, where I made text a lot smaller and a little bit darker, so the main attention grabber is logotype and only then comes slogan. Only thing I added was subtle Drop shadow to slogan text.

Step 8 – Search Input Area

Right now, let’s add search button on the right side. You can use horizontal guideline so logotype and search button are on the same level.

8.1. Create a new layer and call it “input box”, take rounded rectangle tool (U) and put corner radius to 5px. Draw it on the right side, mine is 260px width and 30px height.

Note – Press F8 to get Info panel – there you can see the size of your object while drawing.

Now add following blending options to Input box:

Drop Shadow:

• Blend mode: Normal, color: #ffffff
• Opacity: 100%
• Distance: 2px
• Size: 1px

Inner Shadow:

• Blend mode: Multiply, color:#000000
• Opacity: 100%
• Distance: 2px
• Size: 4px

Gradient Overlay:

• Gradient from #ffffff to #dad9d9
• Angle: 0

Step 9 – Search button and Text

Okay, now let’s create a button. Create a new layer and call it “button”.

Grab Ellipse tool and while holding SHIFT button, create nice, rounded circle, mine has 46px height and 46px width.

Now let’s add blending options to that layer:

Outer glow:

• Blend mode: Normal
• Opacity: 60%
• Color: #292930
• Size: 5px

Gradient Overlay:

• Gradient from #ffffff to #d2d2d2
• Style: Radial
• Scale: 150%

I added simple Search icon which is very easy to create by yourself , but for this tutorial, just download this *.png search icon and add in the center of your circle.

Add some subtle text as well in input box and congratulations – we are done with search section!

Group all the search layers and call that group – “Search”.

Note

To align different layers horizontally, vertically, distribute vertical, horizontal centers use align panel on top part of Photoshop, press V button to see that panel.

Step 10 – Main Navigation Section

Now we need to add our navigation. Create a new layer and call it “line”.

Add horizontal guideline 250px from top. Now grab Rectangle tool, color #ffffff and create rectangle 860px width, 5px height.

Let’s add our navigation on top of that line.

I used Calibri, 20pt, Sharp, color: #e2e1e2 and #ffffff color for active button. Also I would suggest to group all text layers to keep organized and clean.

Let’s just finish now, create a new layer “active cursor”, which will describe visually which section is currently active. I chose Portfolio section in this example, so we will add that cursor under portfolio text.

Take Polygon lasso tool and while holding SHIFT to get 45 degree angle and create selection like in the image below, fill it with #ffffff (foreground color) by pressing ALT+DELETE. I added also subtle gradient to that cursor, but that’s your own choice.

Group all navigation layers by selecting them all holding CTRL and pressing CTRL+G (group), call this group – navigation.

Excellent – we have finished our header section! Now select all groups we created previously – bg, logo, search and navigation and group them in new folder, call it “Header”. This is how our layer structure should look like now:

Step 11 – Featured Slideshow Background

Create a new layer and call it “bg”. Add horizontal guide, which is 300px from top, our background will be right under that guide. Change foreground color to #313237, take rounded rectangle tool with radius 10px and create 910px wide and 390px high rectangle. Center that layer and press CTRL+CLICK on bg layer to select it.

Now let’s add some lightning. Go to Filter/Render/Lightning Effects.. and create something like I’ve got:

Press OK and now let’s add some noise. Go to Filter/Noise/Add noise and add 1% amount, uniform, monochromatic noise.

We should get nice looking background now, deselect bg layer by pressing CTRL+D.

Step 12 – Adding Featured Works and Shadow

We need to add 3 featured works now, where one will stay in front and other two will be a little bit behind. In that way we will get nice 3D effect.

I used here 3 of my previous works, should be easy – just add something similar like I’ve got here, but keep in mind that left and right images should be in one size to look better.

Finally add outer glow in blending options to all those 3 images:

Outer glow:

• Blend mode: Normal
• Color: #000000, black
• Opacity: 50%
• Size: 10px

You should get something similar like I have here:

Create a new layer, behind featured work layers, take Elliptical Marque Tool (M), put feather to 20px, foreground color to white #ffffff and create selection like I’ve got. Press ALT+DELETE to fill it with foreground color, which is white. Change layer blending mode to overlay and we’ve got nice light shadow.

Right click on that layer and create 2 duplicates to other featured works. Finished result looks like this:

I grouped all the featured work images and shadows in separate group – “Feat-Img”.

Step 13 – Featured Work Navigation

Right, we will add also separate navigation for featured works as well as buttons later, but now create a new layer and call it “nav-bg”.

Take rectangle tool (U), change foreground color to #e8e8e8 and add 940px wide and 50px wide rectangle in the front of featured slideshow bottom side.

We need to add some shadow now on both sides, so change your foreground color to #d1d1d1 and CTRL+CLICK “nav-bg” layer to select it. Now create a new layer “Shadow”, find your gradient tool (G) choose this one – Foreground to Transparent, linear gradient, mode:overlay.

Apply gradient to both sides by clicking and dragging from left to right, and the same to right side, but then from right to left.

Right, now we need to get that 3D effect, just follow and you understand what I mean.

Create a new layer, call it “Left Side”, zoom left navigation side, take Polygonal lasso tool and create selection like I’ve got! Fill it with color.

Let’s go to blending effects now and add gradient overlay:

Gradient Overlay from #767676 to #d4d4d4 color. Duplicate this layer, CTRL+T to select it, then right click on it, flip it horizontal and add to the right side.

Okay, we have done featured navigation background, now let’s group all layers to group “Feat-Nav”.

Step 14 – Featured Work Navigation Buttons

As always, create a new layer and call it “btn1″. Take rounded rectangle tool, put radius to 5px and create rectangle.

Now add blending options to this layer:

Bevel and Emboss:

• Style: Inner Bevel
• Technique: Chisel Hard
• Depth: 50%
• Direction: Up
• Size: 0
• Soften: 0

Gradient Overlay from #ebe9e9 to #ffffff, angle – 90 degree, linear gradient.

Right, now duplicate btn1 layer 3 times, rename those layers to btn2, btn3, btn4.

Great! Now let’s create active button are as well. I picked btn3 layer and just changed blending options:

Drop Shadow:

• Blend mode: Normal
• Color: #FFFFFF
• Opacity: 75%
• Distance: 2px
• Size: 1px

Inner Shadow:

• Blend mode: Multiply
• Color: #000000
• Opacity: 50%
• Distance: 2px
• Size: 1px

Gradient Overlay: linear gradient, from #c2c0c0 to #e2e2e2.

Great! Now just add some text, grey on inactive areas, but white on active area. Looks pretty good already right?

Now group all navigation button and text layers and call that group “buttons”.

This is how far we are now:

Step 15 – Rounded Featured Work Buttons

Now we will add some rounded buttons on this featured work section so it would be easier understandable for new visitors.

Actually I just duplicated that search button and then put on some arrows and that was it.

Right, when you have those two buttons duplicated, group them in separate group called “rounded buttons”. I hope you know how do to that already.

I’ll just explain how I got those stylish arrows. As always, create a new layer, call it “arrow”.

Select Custom Shape Tool (U), and find Arrow 2. If you haven’t got such shape, click on little arrow button and load all shapes – you should see now arrow shape as well!

As you may see in rounded button picture, I added two arrows (both arrows are in the same layer in my case).

Let’s add some blending options to those arrows:

Drop Shadow:

Inner Shadow:

Gradient Overlay:

Gradient is from #b0b0b0 to #ffffff.

Duplicate your arrow layer, flip it horizontally and add to right rounded button. We are done with featured work section!

Now group all the featured sections groups in one – rounded buttons, buttons, feat-nav and feat-img and call the new group “featured-slideshow”.

Step 16

- Content Section Background

Now let’s change that white background. Create a new layer “content-bg” and put new horizontal guide 1400px from the top, so there are still 300px for navigation left.

Take Rectangular Marque Tool and create selection, where our header ends until that 1400px guide mark. Change foreground color to light grey, I used #e9e9e9 and pick your gradient tool (G) Foreground to Transparent and just put some subtle gradient on our selection from your own choice.

I also added 1px horizontal white line and little shadow. Let’s do it now – create a new layer “line”, grab single row marque tool, click it where header and content section meets, change foreground color to white #ffffff and hit ALT+DELETE to fill your selection.

Now press ALT+D to deselect and from blending options add:

Drop Shadow:

I created one more layer “Shadow”, CTRL+CLICK on header background layer to load that selection.

Change foreground color to ~ #696b70 and again pick gradient tool (G) Foreground to Transparent, create light shadow.like I’ve got in Single Row Marque Tool image section.

Group layers – content-bg, shadow and line and call that group “content-bg”.

Step 17 – Center Content Navigation Shadows

Yes, yes..we’ve got one more navigation..:) You guessed it – create a new layer, call it “Line-Up” and create a new guideline 850px high from top.

Now again take single row marque tool and click right on that guideline. Change your foreground color to #a8a8a8 and press ALT+DELETE to fill that selection.

With that line still selected, take Eraser tool (E), use ~20px soft brush and erase left and right side so it fits good in that 960px grid and ends smoothly.

Create a new layer, call it “shadow”. In this step we need to add a little shadow,, so repeat our previous step 16, where we put a little shadow on that header/content section. To get selection like I did in screenshot use rectangular marque tool.

Step 18 – Button Creation

We will create 3 buttons here, take a look at finished result here:

Let’s create a new layer, call it “btn1″ and take Rounded Rectangle Tool with radius 5px.

My button is 260px wide and 88px high, but we will delete bottom side anyway to get this good looking effect. Use your grid effectively and create rectangle a little bit over our bottom line like in the image below:

Take rectangular marque tool and create selection of that “btn1″ rectangle so you could delete that bottom side. When you have selection like I have, hit DELETE button.

Step 19 – Add Some Styling to button

Let’s add some Styling to this button to make it look good.

Add these blending options:

Color Overlay:

• Color: #FFFFFF (white) – I could select that gray button and fill that selection, but this way I am 100% sure, button will be completely white.

Stroke:

• Size: 1px
• Color: #adadad
• Position: Inside
• Opacity: 100%

Create a new layer “Shadow”, CTRL+CLICK on “btn1″ layer, take your gradient tool (G) and set foreground color to #a8a8a8. Change gradient mode to Overlay as well.

To add some subtle shadows, click and drag really far from your button and stop when you’ve got similar good looking effect, like I have.

Step 20 – Finish Buttons, Add text, Icons

Here I will not explain very detailed what I did, since it’s really simple. Just add some text, icon like I did and group all Button1 layers in group “btn1-group”.

My top left button will be active one, so I left that icon to be colorful as well as text.

About icons – I just used some free icons from WeFunction 64px x 64px.

Now just duplicate “btn1-group” 2 times and align them. Change icons,text as well to other buttons – just use subtle grey text, because only one navigation section can be active.

Desaturate inactive navigation icons by pressing CTRL+SHIFT+U or Images/Adjustments/Desaturate.

Again group all the layers, button groups in one big group “btn-section” and your outcome should look like this now:

Step 21 – Bottom Shadow and Center Separator

Remember we did – Step 17 – Center Content Navigation Shadows? We will use those two layers to bottom shadow as well.

Put guideline 1020px from the top, duplicate “Line-Up” and “Shadow” layers, flip them vertically and move right on the bottom of that new guideline.

We need center separator as well – I again just duplicated “Line-Up” layer, rotated it 90 degrees and transformed it to fit for our purposes.

Note – Press CTRL+T to transform it, right click to rotate.

Group those bottom shadow and center separator layers in group “various”.

Step 22 – Left Button Section

This is how our outcome will look like:

From now on I will go faster through, because as you may see we are using the same technique we used in Step 18.

In the left section we will add four these buttons, which will be just some short text with “Read more” link to full article or section.

Take rounded rectangular tool, radius 5px and add 360px wide and 50px high rectangle. Repeat the same technique we used in Step 18 to get our section to look good. Notice also 1px stroke added to rectangle.

As for Read more button, it’s all the same, I will just explain what I did with that “Read more” text.

I used 14px Calibri, Sharp and White (#FFFFFF) color and then aplied following blending options:

Drop Shadow:

Inner Shadow:

I grouped all the layers which contain that one button and called it “feat-1″. Duplicate 3 times this group and arrange them.

We are finished with left section, just group all feat-1, feat-2, feat-3, feat-4 groups and call it “left-section”.

Step 23 – Right Section – Team Works

This is how our right section will look like:

This section was meant to be as one more featured works section, just here company will showcase their previously created icons or maybe logotypes.

Just go on and use the same style and techniques. Big rounded rectangle is perfectly aligned with left side and sits right on the grid.

For all the sections use 1px subtle grey stroke and the same lightning technique from Step 18.

I’ll just stop on white/grey border in featured work section. To get that effect, CTRL+CLICK on icon background layer, like in the image below:

Create a new layer now and then go to Select/Modify/Expand – put ther 2 pixels and hit OK.

Now change foreground color to white #FFFFFF and press ALT+DELETE to fill that selection. Put your white layer behind icon background layer and holla – you’ve got good looking border effect!

For the text “Team Works” use the same effect we did in Step 22 with Read more text, just now put text color to be grey.

If you are finished again organize yourself and group all layers in group “Right-Section”.

Step 24 – Testimonials Content Section

In the last blank content space we will add client testimonials. Create that rounded 5px rectangle to be perfectly aligned with Left-Section and Right-Section rectangles and again remember to use grid and guidelines to make that process easier.

With all the previous steps, you should be able to do this yourself. If you don’t, go back and repeat previous steps – it’s important to get the most out of this tutorial!

Step 25 – Footer Section

We have only 300px left blank so let’s finish! For background we will use the same header image, just a lot more lighter version.

Repeat Step 2 And Step 3 here, just now use very light gray color #d7d7da to almost white #f9f9f9 in your gradient. As for that brush, you can actually just duplicate that layer and not repeat the same steps over again.

Again on footer we will use the same techniques, so I will not repeat those steps. You should be able to figure out now how to add glance to your buttons, use icons and text effects effectively!

Just leave like 40px high line for alternative navigation and copyright information. Add more shadows, lines, lightnings, shadows, text effects, icons and you should get really good outcome!

This is what I came up with:

And we are finished! Don’t worry if you didn’t get everything – I am here to help and remember this is an intermediate tutorial, though I still tried to keep everything as simple as possible. If you feel I left something out or you didn’t get something please just write in comments and I am sure I will give you the right answer!

Yes, and actually this is my first web design photoshop tutorial – and I am really proud of it! More will come and hopefully in future I will also be able to cover coding part as well. For now, we will learn together how to create advanced and high quality web designs.

Once again if you don’t use DeviantArt regularly I strongly suggest you to involve in that friendly community and check out my DeviantArt profile as well. I will update it regularly from now on so add me to DeviantWatch or Subscribe to this blog – there will be a lot more good things to come!

In future I may offer free *.psd versions for only premium users, but now you are able to download my *.psd version of this design for free, however I would like to ask for some credits if you use that design for future projects.

Download FREE Professional Layout *.PSD