Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

March 18 2013

08:00

November 21 2011

10:00

10 Easy Steps On How To Create A Good Photography Portfolio

Creating a showcase of photographs is not an easy task and most of the time the photographers have basic or no knowledge of design at all. Moreover, creating such a portfolio in which the images have to be in focus is a tricky task and even the more experienced designers might fail providing a good layout, therefore I thought of sharing with you a list of tips for designing photography portfolios.

The difference between a web design portfolio and a photography showcase is huge. The focus has to be on pictures, not on content, while the normal way of designing, with the header, content box, sidebar and footer changes totally from a layout to another. The more inspired and original you can be, the better your design will be. When you are a photographer, it is very important to have a platform where you can show clients your work – this has the same importance as for a web designer.

Most of the time the photography portfolios are heavily reduced to a showcase – which can be the home page, a contact section and maybe an “about me” page. It sounds simple, but there are still many things to figure out before being able to design properly such a layout.

1. Think of your target

Yes, you’ve heard this before so many times – and I know it annoys you. It is so simple to just overlook it and why not do it? In the end all of us want as many clients as possible and don’t want to make our audience narrow. Well, I tend not to agree with you, and I would suggest you to think seriously about who you want to work with.

A good example is a wedding photographer – this page would be totally different from the one of a roadshow photographer. It will probably be white, including many circles (which suggest continuity), will have maybe floral arrangements and might be full of happiness and sunshine. If you are a roadshow photographer, you might want to design with a darker color, keeping a balance between organized and chaotic (although do not get too close to organized) and so on. Think of what kind of clients you want to attract and then design for them. It is so important!

White and clean - wedding photographer portfolio

2. Think of the number of images

You have to do this because most of the layouts look good with a small number of pictures uploaded, but how will it look when you will have an odd number of pictures to show? There needs to be a balance between the number of pictures on the page and the negative space you leave between or around them. If you have many pictures, consider using pagination or categories to separate them – and do it for the sake of the user. Don’t forget that they never saw you pictures before and if you are really interested in them, it takes a lot of effort for the human eye to analyze them. Don’t make it even more difficult for the visitors.

This page is a good examples of how to present your work.

3. Make the images stand out

When I say this, I usually mean keeping a high contrast between the pictures and the background; and I usually recommend having black as background, because there is most of the time more contrast than when viewing the showcase on white. This tip is good for bringing out the contrast of the photos and it is also a good idea to try to look at the pictures on different backgrounds, so that you make the best out of them.

Good example of contrast between background and picture

4. Consider the quality

When I visit a photography portfolio or even a showcase, I expect all the time to be able to see the pictures in full size if I click on them – and it would better be huge. I want the pictures to look good and fit my screen if I would like to have it as a desktop background. And not only about this – but if I want to see all the details, I can’t do it properly on a small picture.

To avoid keeping the visitors wait too much, have two versions of each picture (you can resize them with a JavaScript too). This way if somebody is interested in seeing one of your pictures larger, he knows that this comes with the price of loading time.

5. Be flexible

According to official statistics, less than 1% of the internet users have 800×600 displays. However, this does not mean 800×600 is the smallest resolution you have to design for – think of mobile devices as well. It is not highly probable that a potential client will want to use his bandwidth with your pictures, but what if they are on a wireless connection? This means you have to think about all the possible resolutions.

The showcase bar disappears after a few seconds and the picture is in full screen in the browser

You can do this by making you pictures be 100% of the width of the div which displays them, and the height can be set to auto. This will make the pictures resize according to the screen. It is not difficult to do and is very useful, so why not spend few more seconds to customize this?

6. Show only the best work

This is also for the web designers, not only for photographers. It is always good to make a point fast and then let the visitor make a decision – the World is moving fast and we don’t have time to view all the crap work people have done. Therefore only show the top-notch work and let the potential client move on, if he wants to. Don’t keep him tight – he will leave without seeing every piece of your work anyway.

Is is also a good idea to order your pictures. Even if you select your best work, some of your pictures simply have to stand out. Put them first and leave the other good ones for the second page.

7. Describe the photos

When potential clients look at pictures, they want to know who it is they are looking at. They might also want to hire one of the models, which is not a bad thing either. Write short notes about each one of your pictures and let the client know what is he looking at. It is also much more important to give each picture a short description than a title. Naming the tools you’ve used for shooting and post-processing might be a good idea too.

Kenn Reay talks about his pictures in the description.

8. Emphasize the contact information

Sure, the most important thing is to show your work, but how does this help if you do not get clients? It is important to lead the visitor to your contact page if possible, otherwise always make it clear that he can contact you right away. Having the e-mail address in the footer might work too, but it depends a lot on your layout. It is entirely your decision which information you give out, but I would also show them I am present and active on social media.

By having a normal navigation, the contact link does not have to be emphasized, because it is where the user knows it should be.

9. Ask for feedback

I never release a website before asking for feedback – it is just in the manual. Always ask the others – experts or not – about their opinion on how your site looks. It is really important to know what the others think, especially because after hours and hours of looking and analyzing your portfolio, you do not notice the small details anymore – and this is crucial. Never release a website before asking people for opinions.

10. Keep it dynamic

By this I mean that you have to keep your portfolio updated. It is not difficult to do this anymore thanks to the bunch of tools we have at our disposal. Nobody wants to see a good photographer not uploading his latest work and potential clients do not enjoy this for sure. Never replace old strong images with bad ones. Don’t forget about tip #6, showing only the best work.

Conclusion

Having to design a photography portfolio is not an easy task, as said in the beginning, not even for an experienced designer. There are many small tips you have to take into consideration and I hope this list helps all of you in designing better for our fellow photographers out there. With this is mind, I share with you a list of good links on the same topic.

8 Tips for a Great Photography Portfolio on I Shoot Shows

Great Photography Portfolios for Your Inspiration on The Photo Argus

10 Cool Photo Portfolios and Gallery WordPress Themes on Inspired M

Top Five Photography Portfolio Tips on All Art Schools

Five Tips for Building Your Photography Portfolio on Digital Photography School

Sponsored post
feedback2020-admin
04:05

September 20 2011

14:34

April 14 2011

10:00

1st Ideas: Create a Stylish Design Agency Website [Very Detailed]

Are you in a good mood to make something new for this week’s template tutorial? Today I’m going to show you how to create a stylish agency website. This tutorial will be quite long, just bear with me and I’m sure  that by the end of this tutorial, you can create a better version. We will be using gradients mostly, combination of light and dark colors. Let’s get started!

Here is what we will make, click on the image for the full size:

image

Resources to complete this tutorial:

Step 1: Setting up the Document

Open up Photoshop and create a new document 1200px x 1650px.

image

Make sure that you turn on Rulers by pressing Ctrl + R or by going to View–> Rulers.

image

Creating Guides

I didn’t use the 960 grid system on this tutorial so that we can practice creating our own guides. To show guidelines press Ctrl + ; by default nothing will appear yet because we haven’t created any guidelines yet. Now lets create our first two guides select View > New Guide. This guide will be the holder of the whole layout a total width of 960px.

image

Making Folder

To make things organized and easy to locate, create these folders.

image

Step 2: Working with Background

In the Background folder create a new layer and name it Background. Now select Linear Gradient and use the following colors:

  • Color: #7fa7c7 Location: 0%
  • Color: #a4c7e2 Location: 10%
  • Color: #3d5466 Location: 30%
  • Color: #57758d Location: 70%
  • Color: #2c3e4c Location: 100%

image

Start dragging from the middle. You may have something that looks like the screenshot below.

image

Creating a Line Pattern

Next, we will add a pattern to create more texture in our background. Create a new 4 x 4 document. Now select Pencil Tool (B). Follow the screenshot as shown below.

image

To create a pattern make sure you select the top layer and go to Edit > Define Pattern

image

Now lets add a pattern to our background. Create a new layer above the Background Layer and name it Pattern. Select the Paint Bucket Tool (G), switch to pattern, and select the pattern we made.

image

Using Rectangular Marquee Tool(M) select 1/2 of the whole document and fill it with the pattern using the Gradient Tool (G).

Add this Blending Option:

  • Color Overlay: #98c2e2

Add a mask to the pattern layer by pressing the mask button beside the fx button.

image

Now we will hide the portion of the pattern that we don’t want to appear in the background. Set the foreground color to #000000. Select the Brush Tool(B). Before you start brushing make sure that you select the mask in the layers panel then start brushing areas that you want to hide.

image

Step 3: Working with Header

image

Inside the header folder create a new layer and name it top. Set the foreground color to #334655. Now create a guide 5px Horizontally.

image

Using the Rectangular Marquee Tool(M) select the top portion within the guidelines and fill it. Before we proceed create three folders name them as shown in the screenshot below.

image

Logo

We will make a quick logo for this tutorial. I’m thinking of something like a glowing logo, I think it suits this layout. So select Text Tool(T) and select your favorite font. I prefer light and bold fonts so I select “Kozuka Gothic Pr6N”. I combined light and bold text.

image

Add this Blending Option:

  • Outer Glow: #c1e4ff

image

Duplicate the text layer and transform the original layer by pressing Ctrl + T Right Click and select Flip Vertically, and move it down below the duplicated text.

image

Mask the Original layer and make sure the mask is selected. Select Linear Gradient with a fill color of black and white. Start masking beginning from the middle of the text to top. This will achieve a reflection effect.

image

Social Icons

Open up the social icons that you have downloaded from the resource and place them as shown in the screenshot below.

image

Navigation

Start by creating a new layer and name it nav-bg. Create a rectangle shape using the Rectangular Marquee Tool(M) or the Rectangle Tool with a height of 50px and a width of 960px, fill it with any color.

image

Add this Blending Option:

  • Inner Glow: #ffffff

image

  • Gradient Overlay:
  • Color: #2b3d4b Location: 0%
  • Color: #3a4d5a Location: 20%
  • Color: #2f404e Location: 50%
  • Color: #455764 Location: 80%
  • Color: #546a79 Location: 90%
  • Color: #2f414f Location: 100%

image
image

  • Stroke: #2b3b48

image

Above the nav-bg layer, create a new layer and name it Shine. Using Pen Tool (P) create a shape and make a selection from it as shown in the screenshot below.

image

Fill it with a white color. Set the layer mode to Screen and Opacity to 10%.

image

Now select the Text Tool(T) and add these links.

image

Duplicate the text layer. Now select the original layer and change the color to #1c2730. Position it 1px above the duplicated layer to make it look like it’s beveled.

Now let’s add some dividers between our links. Create another folder and name it divider. Using Line Tool(U) create 2 lines. First line color will be #485d6c, second line color #2b3b48.

image

Search

Before we make our search bar. Let’s create a new guideline first. Follow the screenshot as shown below.

image

In the search folder create a new layer and name it search-bg. Using the Rectangular Marquee Tool(M) create a rectangle with a width of 260px starting from the 20px guideline we just created.

image

Add this Blending Option:

  • Drop Shadow: #ffffff

image

  • Inner Shadow: #000000

image

  • Gradient Overlay: #2f404e, #546a79

image

  • Stroke: #2c3c4a

image
image

Now open up the search icon and place it at the right side of the search bg.

image

Add this Blending Option:

  • Drop Shadow: #ffffff

image

  • Inner Shadow: #000000

image

  • Color Overlay: #30414e

image

I also added an italic Mydrid Pro text color #cccccc.

image

Back to Navigation folder create a new layer above Divider folder and name it below. Using Rectangular Marquee Tool(M) make a selection 5px height 960px width as shown in the screenshot below.
image

Add this Blending Option:

  • Gradient Overlay: #334553, 3e515d, 293743

image

  • Stroke: #293743

image

Below nav-bg layer, create a folder and name it Client Login. Inside of it create a new layer and name it button. Using Rectangle Tool(U) create a shape about 130px width and 35px height.

image

Add the same Blending Option as we did in nav-bg layer. In case you didn’t know how just follow the screenshot below.

image

I also added text to the button using the Text Tool(T). I know you’ve learned how to make it look beveled, so I wont repeat it again.

image

Duplicate Client Login folder and rename it Sign Up. Select button layer and change the Blending Options as shown in the screenshot below.

Add this Blending Option:

  • Inner Glow: #ffffff

image

  • Gradient Overlay:
  • Color: #ffbf60 Location: 0%
  • Color: #d49c4a Location: 20%
  • Color: #c5944b Location: 50%
  • Color: #e7ad57 Location: 80%
  • Color: #fec570 Location: 90%
  • Color: #d09a49 Location: 100%

image

  • Stroke: #ba8537

image

For the text, change the color to #b58742.

image

Step 4: Working with Slider

image

Select Slider folder and create new folder and name it display. Inside display create a new layer and name it slide-holder, now using Rectangular Marquee Tool(M), create a box with a size of 660 x 300 fill it with #2f404e.

image

Now grab some dummy pictures the same size or bigger than slide-holder. Place it above slide-holder and link them together by pressing Alt + Click on the line in between.

image

Create a new layer and name it Caption, using the Rectangular Marquee Tool(M) create a rectangle with a height of 75px and fill it with any color. Set the layer Opacity to 80%.

Add this Blending Option:

  • Gradient Overlay:
  • Color: #26343f Location: 0%
  • Color: #5c6e7a Location: 30%
  • Color: #5c6e7a Location: 50%

image

Add a caption using Text Tool(T)

image

Hover and Normal

Inside Slider folder create new folders named Hover, Normal. In each folder create a layer name it bg. Using the Rectangular Marquee Tool(M) create a shape 300 x 100 and fill it with any color.

image

Hover

For the Hover folder bg layer.

Add this Blending Option:

  • Inner Glow:
  • Color: #ffffff

image

  • Gradient Overlay:
  • Color: #d49c4a Location: 20%
  • Color: #c5944b Location: 50%
  • Color: #e7ad57 Location: 80%
  • Color: #fec570 Location: 90%
  • Color: #d09a49 Location: 100%

image

  • Stroke:
  • Color: #ffffff

image
image

Now we will add a shine. Using Pen Tool(P) create a shape as shown in the screenshot below and make a selection from it.

image

Select Linear Gradient, Foreground to Transparent set the foreground to white. Fill the selection with gradient starting from top to bottom and set the layer Mode: Screen, Opacity: 80%.

image

Open up This is Art2 icon set we have downloaded. Re-size it to fit, also using the Text Tool(T) add text as shown in the screenshot below.

image

Create new layer above shine and name it light. Using Elliptical Marquee Tool(M) create a shape as shown in the screenshot below and fill it with #fff070.

image

Go to Blur > Gaussian Blur to 5. Set the layer Opacity: 60%.

image

Normal

Duplicate all the layers in Hover folder and place it to Normal folder. All we need to change is the Icon, Gradient Overlay, Stroke, Text and remove the Light layer.

Add this Blending Option:

  • Gradient Overlay:
  • Color: #2b3d4b Location: 0%
  • Color: #2f404e Location: 50%
  • Color: #455764 Location: 80%
  • Color: #4a5f6d Location: 90%
  • Color: #2f414f Location: 100%

image

  • Stroke:
  • Color: #25333e

image

For the text change the color to #afdfff and #cccccc.

image

Shadow and Glow

Below all those folders inside the Slider folder, create a new folder and name it Shadow and also create new layer and name it Shadow-left. Create new guideline as shown in the screenshot below.

image

Select the Rectangular Marquee Tool(M) create a selection from the new guide. Now using Linear Gradient Foreground to Transparent. Set the foreground color to #000000 and fill the selection with a gradient. After filling it erase the portion that is circled as shown in the screenshot below.

image

Repeat this step for Left and Bottom. You may have something that looks exactly as shown in the screenshot below.

image

Create new layer and name it Glow. Set the foreground to #bae0fe. Using the Elliptical Marquee Tool(M) create a selection as shown in the screenshot below and fill it with foreground color. Now add some Gaussian blur radius to 5.0 px.

image
image

Step 5: Working with Body

Our Body includes Featured Project, About, Services so go ahead and create those folders separately. Lets first work on Featured Project.

Featured Project

image

Inside the Featured Project folder create new layer and name it holder. Using the Pen Tool(P) & Rectangle Tool(U) create a shape in separate layers as shown below. Name the Rectangle Front and the other to back.

image

For the Front layer.

Add this Blending Option:

  • Gradient Overlay:
  • Color: #2b3d4b Location: 0%
  • Color: #3a4d5a Location: 20%
  • Color: #2f404e Location: 50%
  • Color: #455764 Location: 80%
  • Color: #546a79 Location: 90%
  • Color: #2f414f Location: 100%

image

  • Stroke:
  • Color: #1d2a33

image

For the Back layer.

Add this Blending Option:

  • Gradient Overlay:
  • Color: #1d2a33 Location: 0%
  • Color: #151e25 Location: 100%

image

You will hopefully achieve a 3D like effect that looks exactly like the screenshot below.

image

Using the Text Tool(T) I added Featured Project Text with a bevel effect. Just remember to create the bevel effect. If the background is dark and your font is light, the shadow should be dark, and if it is dark then shadow should be lighter. Take a look at the screenshot below and you will know what I mean.

image

Now add some sample pictures for our gallery, it should be 150 x 150. Also, I added some shadow below.

image

Create new folder and name it Circles. Now using the Elliptical Marquee Tool(M) create small circles as shown in the screenshot below.

image

For the first circle.

Add this Blending Option:

  • Outer Glow:
  • Color: #ffffff

image

  • Inner Glow:
  • Color: #ffffff

image

  • Gradient Overlay:
  • Color: #ffbf60 Location: 0%
  • Color: #d49c4a Location: 20%
  • Color: #c5944b Location: 50%
  • Color: #e7ad57 Location: 80%
  • Color: #fec570 Location: 90%
  • Color: #d09a49 Location: 100%

image

  • Stroke:
  • Color: #ba8537

image

For the remaining two circles

Add this Blending Option:

  • Drop Shadow:
  • Color: #ffffff

image

  • Inner Shadow:
  • Color: #000000

image

You should have something that is exactly like in the screenshot below.

image

About

For the About folder using the Text Tool(T) add some dummy text. As you can see in the screenshot below I used the same font settings as we did in Featured Project. That’s it for our About folder.

image

Testimonials

In our testimonial folder Using the Rectangular Marquee Tool(M) create a 290px x 220px box and fill it with #31a5db. Base some other info in the screenshot provided below. As you may have noticed, I added a shadow with an Opacity: 60%. First I used a Pen Tool(P) to create a shape and added a Gaussian blur on it to make it look like a shadow.

image

Services

In this step I simply copy the text and icons from our slider we did earlier. For the icons I re-sized them a bit. I also added a 3px #192229 border on each service and separated each with two lines. For the first line the color is #1a242b, second line is #455865.

image

Using the Rectangular Marquee Tool(M) make a selection as shown in the screenshot below. Now set the Foreground to #ffffff and select Radial Gradient Foreground to Transparent. Start dragging from right to left and erase some portion that not included.

image

Step 6: Working with Sidebar

I don’t need to explain this more, I know you’re already familiar with doing this in the previous steps. Just base it on the screenshot below and I’m sure you can do it on your own.

image

Step 7: Working with Footer

Inside the Footer folder create new layer and name it bg. Using the Rectangular Marquee Tool(M) make a selection as shown in the screen show below and fill it with #151d23.

image

Add this Blending Option:

  • Inner Glow:
  • Color: #ffffff

image

  • Stroke:
  • Color: #0f1418

image

Finally using the Text Tool(T) fill the footer with text. I duplicate the logo with no style and color it with #2c3e4c. I also copy social icons and place it below the logo. See the screenshot below for a clearer understanding.

image

We’re done I hope you enjoyed this tutorial and find it useful. If you have any questions or suggestions for the next tutorial just mention it in a comment. I’m here to help and teach you what I know about design. Thank you!

Final Design Preview:

image

April 06 2011

10:00

DiscountHotels – Design a Modern Business Website

In the following tutorial we are going to browse through the making of a web layout for a hotel website which offers deals related to trips and hotel discounts. Be sure to follow each step and if you are a bit confused, take a look at the final result to better solve your problem.

Editor’s note: DiscountHotels exists in real life and is one of the top services in finding the best deals for flights and hotels. We respect their trademark in every way.

Resources:

Final Result:

Step 1

To start our template create a new document with the sizes indicated in the image below.

Step 2

Fill the whole document with a simple gray color for beginning.

Step 3

Fill 80% of that simple gray color with a big rectangle and fill with white.

Step 4

Add this drop shadow effect for the white rectangle we have created in the previous step.

Step 5

Now we’re adding some contact information in the right side of our header. Get the icons from the resources list located at the beginning of the tutorial.

Step 6

Type in “Discount Hotels” with Nevis Font – this will be the text of our logotype, then add these drop shadow details.

Step 7

Now add a gradient overlay effect with the colors indicated in the screenshot.

Step 8

Now we are creating a blue bar where all our navigation links will be placed.

Step 9

Add the following Gradient Overlay effect for the bar we’ve recently created.

Step 10

With the preset Arial font, we are adding nav links which we will add some drop shadow to. Then we must create a 1 px black line, which will work as dividers for the nav links.

Step 11

Add a darker blue shape which fits the home section. It will be a part of our hover effect for nav links.

Step 12

Add gradient overlay style for that blue shape we created in the previous step with the colors stated in the image.

Step 13

As a last element for the hover effect, add some drop shadow style with the details as shown in the image.

Step 14

Get a beautiful landscape image (free or stock one), and place it under our nav links. It should be bright, colorful and high-quality.

Step 15

Create a white, rounded rectangle, where we’ll place some more information and input forms. For beginning add some dummy text “Book Your Hotel”

Step 16

Create a “long” grey rectangle and give it a 1px stroke as stated above. With a darker grey color add some text in that box.

Step 17

Now create a simple grey-colored circle, and add the following gradient overlay details to it. Then add a dark 1px stroke to it.

Step 18

This is our result so far, be sure you followed all steps listed.

Step 19

Now it’s time to create a simple input form for our shape. To do this, just make a white rectangle in the specific zone, and add a 1px grey stroke, and you will achieve such result.

Step 20

Now add 5 more as seen below. For those forms where a drop-down is present, use the Custom Shape (U) and add a simple arrow as seen below.

Step 21

Now it’s time to create another shape, with the following gradient overlay details. It may be rectangle or square.

Step 22

Add some important text in that box, with a simple white and the following style details.

Step 23

Now it’s time to place some text on that stock image we’ve put under the nav links. Use whatever font you’d like, and add the style details indicated on the image.

Step 24

Now as we’ve finished with that image, it’s time to finish with that white box, which keeps those forms and shapes in it. Add a rounded rectangle with this drop shadow effect.

Step 25

Add some Gradient Overlay details with the following colors.

Step 26

Add text for our big 3D button, and then style it with the drop shadow effect.

Step 27

Now we are creating another small gray 3D shape with the following details as stated on the image.

Step 28

Place some gradient overlay styling for that box, by following the colors shown on the image.

Step 29

After we finish the rectangle, it’s time to add some text which will ask your visitors to subscribe to your newsletter. Also, create a simple input box which is identical to the one from step 19.

Step 30

Now we place some simple text and create another drop-down form like in step 20.

Step 31

Under the “hotel deals” text, you should add another big, blue rectangle with hex code #3f8ac1 which is also shown on the image. The color is not so important because it will be changed with a color overlay effect in the next step.

Step 32

Now we must change the color of our rectangle by adding a color overlay effect, you have to add also a 1 pixel simple grey stroke to the rectangle.

Step 33

In the grey rectangle we have recently created, we must add some content. Add a simple square image which will show the location you are featuring. Also a title and some featuring text should be added.

Step 34

To increase the beauty and brightness of that rectangle, we must add a button and a price which will show the price of the “special deal” the website offers. The effect of the text and the button creation techniques are the same as in past steps.

Step 35

Copy that rectangle with special deals, and paste it many times because you won’t have only one deal, but about 6.

Step 36

We are almost done with our content section, and now moving to the sidebar. Take another stock image and add some white text and the following styling.

Step 37

Now we create a new shape under that stock image. The shape is identical to the one we have created in step 2-3 (our background).

Step 38

In the white shape we have created in the previous step, you add a simple rectangle with the following “Gradient Overlay” styling effect.

Step 39

For the same blue rectangle, add a drop shadow effect with the details stated in the image below.

Step 40

With the Arial font, start adding city names. For the font, add the styling shown on the image below.

Step 41

Now add a shape (of any color) which covers one of the locations you have written, then apply the Gradient Overlay styling.

Step 42

Now it’s time to add some simple text, which will define the special deals you are promoting and show in the sidebar of your web layout.

Step 43

Add a facebook fan page screenshot under the last shape we have created in the last steps, then make a box like you did in step #37.

Step 44

Now for the latest rectangle shape, create another also rectangle shape which will be located inside of it. Then set its drop shadow effect by following the image.

Step 45

For the same rectangle shape, add the following gradient overlay styling, with the colors shown in the image.

Step 46

Add a prominent and relevant title, then place some dummy/random text in the shape created.

Step 47

Add one more stock image with text under the section of all “Special Deals”. It will be first element for our footer section

Step 48

This is the last element for our footer. Add all kinds of text, links, also copyright information and you may try adding a big blue 3-d like buttonlike we made earlier in this tutorial.

March 29 2011

10:00

Corporate Business – Design a Modern & Stunning Web Layout

In this tutorial we’re going to create a clean and professional business layout in Photoshop. It has a great mix of colors and elements and is great for business owners and service providers. This tutorial, though long, is very detailed. Only worked with Photoshop a bit? Or maybe you’re just starting to design web layouts using Photoshop, no matter what your skill level if you carefully follow each of the steps at the end you’ll have something a finished layout similar to mine.

Preview of Final Result

 

Resources

Step 1

Open Photoshop and create a new document that is 1200 x 1200 pixels, 72 dpi, and RGB Color. Fill the layer with white. (Ctrl+Backspace or Delete)

Step 2

Now create a rectangle for the header and fill it with a white-grey color, then use the colors on the image for the “Gradient Overlay”. Our search and logo will eventually be part of the header.

Step 3

Create a new rectangle above the previous one, with attributes as shown below. The following drop shadow effect creates a look of a 1 pixel stroke which does increase the look of that simple bar. Note: this step creates a horizontal line.

 

Step 4

Now add the “Gradient Overlay” layer style with the hex codes indicated.

Step 5

Add a white 1 pixel stroke. The following stroke of 1 pixel will divide the grey shadow effect. It’ll eventually work as a divider.

Step 6

Make one more rectangle in the middle-right zone, and fill it with white and add a 1 px stroke as indicated – it will be our search box.

Step 7

One more rectangle should be created and filled with blue. Set the inner shadow as indicated below, this will be our search button. This blue works great in combination with grey, white and light-grey. Blue will be the major contrasting color we use as we work through this template.

Step 8

Add the Gradient Overlay details to the button with the details from image.

Step 9

Add a 1 px stroke to the button with the color indicated. Take a look at the first and the final result of the button so you can see the difference all these details made.

Step 10

Now add this drop shadow effect for the text placed in the search box, using PT Sans Bold. This will be the final step in creating your search button. You may want to try other fonts, but the PT Sans Bold is really good for this small button.

Step 11

Make another fill under the header section, this will be the navigation area. Here we will place the navigation links of our template.

Step 12

Write your navigation links using a dark-grey color, then add a white “drop shadow” effect. The effect used for the navigation links is the same used for the search button.

Step 13

With 1px vertical line, make divisions between each links. The lines should be black and will really increase the beauty of the navigation area.

Step 14

Over the home section, make a fill with the blue and then add a Gradient Overlay style as indicated.

Step 15

Copy the Home link, this time color it white and add a drop shadow effect.

Step 16

Create a big, grey zone under the navigation, it should be about 30% of the layout. This will be the background for the featured area.

Step 17

Now create a big, white rectangle and add some shadow with the details shown. A big stock image, a big headline and some text with another great button will be added.

Step 18

Add a any dummy image you want to that featured area. Be sure it covers more than 80% of the area. The one I chose is from a stock website.

Step 19

Add some text to it, use the PT SANS Bold font and make the font big.

Step 20

The remaining area should be filled with grey, in it we’ll place some text. This is really a secondary area which describes the image, the services, the company itself, or whatever you’d like.

Step 21

Place some blue-colored text which will be the title of the information below. Use the details in the image for Drop Shadow style.

Step 22

Add some dummy text. This could be some important information or whatever you’d like.

Step 23

Create another grey area under the featured zone, where we will add some text and icons later. Add the details as stated on the image. Mostly, the icons will promote the services offered by the company behind the website.

Step 24

Continue by adding a Gradient Overlay style for the last rectangle we have created in the anterior steps.

Step 25

Now we are adding titles and icons, as well as some divisions. The icons can be found in the resource list at the beginning of the tutorial. Be sure to choose your icons and text thoughtfully.

Step 26

At the border of both zones, create a small circle and fill it with dark brown color. Add some inner shadow as stated on the image.

Step 27

Continue by adding a drop shadow layer style. It is another small detail, but it really makes that button zone minimalistic, nice-looking and well designed.

Step 28

To finish, add a Gradient Overlay effect.

Step 29

By using the Custom Shape Tool (U), create an arrow in both circles. Now add the details shown on the screenshot.

Step 30

Continue by adding some Color Overlay for the arrow. It should also be a blue color because otherwise, it will not fit the contrast and the colors used on the whole template.

Step 31

Add a video screenshot in the free space and place a title for it. For this template, I have used a simple screenshot of a YouTube widget.

Step 32

Add the text “Product Highlights” and “Case Studies.” Let the text under the “Product Highlights” be links so you could showcase some friends’ websites or resources you admire/promote.

Step 33

Finish it by creating another form for e-mails, place all kind of other information, and whatever you’d like.

Step 34

Don’t forget to make a relevant/small footer for our template. If you have paid attention, you should know how to create the same effect as below. 

 

All done! If you have questions or suggestions, feel free to drop a comment. I hope you enjoyed this whole tutorial!

March 19 2011

11:51

Adobe InDesign Tips I Wish I’d Known When Starting Out

Advertisement in Adobe InDesign Tips I Wish Id Known When Starting Out
 in Adobe InDesign Tips I Wish Id Known When Starting Out  in Adobe InDesign Tips I Wish Id Known When Starting Out  in Adobe InDesign Tips I Wish Id Known When Starting Out

I love Adobe InDesign. For multi-page documents, it’s the most flexible and complete application out there. Yet I remember how counter-intuitive some things were when I was learning it for the first time. Here are some tips I wish I had known when starting out, as well as some answers to questions that others often ask me. This is not intended to be a manual; some good ones are already out there (although I personally learned by doing). Hopefully, these tips will help you make the best of your day-to-day use of InDesign.

Margins And Bleeds

If you are preparing a document for print, keep your margins and bleeds in mind from the beginning. Your printer will give you the measurements for the bleed, but generally 1/8 inch or 3 mm should suffice. Approximately the same area within the document should be kept free of text and important graphic elements (such as the logo). Set up your document for bleed in InDesign as you create it by selecting the correct settings in the document set-up box.

Smashing-InDesign-1 in Adobe InDesign Tips I Wish Id Known When Starting Out

Master Pages

When you have a multiple-page document, such as a brochure or catalog, using master pages will save you time. Master pages are used to automatically insert layout elements on various pages. All elements of the master page are placed onto any page you choose, and these are by default not selectable, which allows you to further develop the page without worrying about accidentally modifying the pre-defined elements (such as page numbers, grids and guides, and graphic elements).

To set them up, bring up the Pages palette and double-click on “A-Master.”

Smashing-InDesign-2 in Adobe InDesign Tips I Wish Id Known When Starting Out

Add all of the elements that are repeated throughout most of your document: guides, page numbers, a running text box, image frames, graphic elements, etc. You can have more than one set of master pages in a document, which is particularly useful for brochures, whose content often varies (for example, with a mostly textual introduction followed by image-heavy pages).

To apply your master page to new pages, simply drag it from the Master Pages pane onto the Pages pane in the palette. If you’ve already started working on layout elements but forgot to make a master page, you can turn any page into a master page. Just drag it from the Pages pane to the Master Pages pane.

And yes, you can modify master page elements on a particular page if you need to. Triple-click on the element — that is, click on it while holding down Shift +Command (on a Mac) or Shift + Control (Windows). Now you can select and edit it on the page you are working on while leaving it unchanged on all other pages.

Frames

InDesign places your content in frames. This goes for both text and images as well as databases and interactive content.

There are two types of frames: text and image.

Smashing-Indesign-3A in Adobe InDesign Tips I Wish Id Known When Starting OutSmashing-Indesign-3B in Adobe InDesign Tips I Wish Id Known When Starting Out

The text frame is fairly self-explanatory. After creating the shape for a text frame (typically a rectangle, but it could be a circle or a custom shape drawn with the Pen tool), you have two options: either type directly in the frame or import content from another document. To import, go to the File menu and choose Place (or use the shortcut: Command + D on a Mac and Control + D on Windows).

Image frames work in a similar way. After creating an image frame (either by selecting one of the default shapes or drawing one yourself), you can fill it with color or place an image from your computer inside it. Again, this is done by going to FilePlace (or using the shortcut).

Another way to import images and text is to simply drag them onto the document (from Mac’s Finder or Windows Explorer). This will automatically create an image or text frame, import the content and create a link to that file. If you drag content on top of an existing frame, it will replace the existing content but leave the size and cropping intact.

Resizing Content in a Frame

The set of shortcuts for fitting an image to a frame is also useful, and with it you can easily adapt content the way you want. To keep the frame the same size and fit the content proportionally, press Command + Option + Shift + E. (Note that if the image and frame have different proportions, then some white space will be left.)

To fill the frame proportionally, use Command + Option + Shift + C. (If the image and frame have different proportions, then the image will be resized and end up larger than the frame, being cropped the edges.)

To center the content in the frame, use Command + Shift + E. And if you want the image to stay the same and resize the frame instead, then fit the frame to the content with Command + Option + C.

Selecting Frames

Selecting the top frame is easy, but if a lot of frames are overlapping or one is on top of the other, you can cycle through them by holding Command on Mac and Control on Windows and then clicking on the frames to select the lower one. Keep clicking to cycle through them if you have several frames.

Image Formats

InDesign can import many image formats (including JPEG, PNG, EPS, PICT, PDF, PSD and TIFF). If you are preparing a file for print, make sure the images are in an acceptable format. If you’re using a file format that allows for low-resolution settings, such as JPEG, check that the images have a resolution of 300 pixels per inch (PPI) and are saved in CMYK color mode.

Place images at no higher than 100% of their size. That is, if your original image is 3 × 5 inches, don’t blow it up to 12 × 20, because the results would be obviously pixelated.

To be on the safe side, avoid JPEG altogether, and stick with formats that are intended for print, such as EPS and TIFF.

Importing PSD Files

The PSD image format deserves special mention. Being able to import PSD files into InDesign is extremely useful when working with elaborate graphics that have transparent or semi-transparent elements, especially if they are to be placed over colored backgrounds or textures. Another useful feature is the ability to turn the layers in a PSD file on and off directly in InDesign (i.e. without having to open Photoshop).

PSDs take up significant memory, which can sometime cause problems when exporting as PDF. I would recommend avoiding PSD files for simple images that could just as easily be flattened when saved as TIFF or EPS. But in cases where using a PSD file really solves a problem, make sure it is 300 PPI and in CMYK color mode, and keep it at its actual size. And when exporting to PDF, double-check that the transparency flattening is set to high.

Transparency Flattening Presets

You can create custom transparency settings by going to EditTransparency Flattener Presets:

Smashing-Indesign-4B in Adobe InDesign Tips I Wish Id Known When Starting Out

In most cases, the “High Resolution” setting will suffice. You can make sure this preset is used when exporting to PDF by going to FileExport, selecting PDF and then clicking on the “Advanced” tab. You can now set the “Transparency Flattener” option to “High Resolution” by default.

Smashing-Indesign-5B in Adobe InDesign Tips I Wish Id Known When Starting Out

Should You Copy And Paste?

One feature of the Adobe Creative Suite is the ability to copy and paste between its applications. But just because you can do this doesn’t mean you should. Vector files should still be created in Illustrator, and raster images should be saved in Photoshop. Not only will you be able to maintain control of these elements, but you’ll be saved from having to update every single occurrence of a given element in multi-page documents. Keep a given graphic in a separate Illustrator or Photoshop file, and you’ll be able to update all occurrences of it with one click.

Every image in an InDesign document can be viewed from the Links palette. Bring it up by going to WindowLinks or by pressing Command/Control + Shift + D.

Smashing-Indesign-6B in Adobe InDesign Tips I Wish Id Known When Starting Out

You can update placed images or check their locations directly from the Links palette. To bring up the Links menu, select the name of the image and click on the arrow to the right.

Smashing-Indesign-6C in Adobe InDesign Tips I Wish Id Known When Starting Out

Working With Color

InDesign is set up exactly like Illustrator in terms of using colors. You have the option of working with color sliders directly, and in either RGB or CMYK mode (remember to use CMYK if creating a document for print!). Press F5 to bring up the Color palette, and adjust the CMYK values in the sliders to change the color of the fill or stroke.

Smashing-Indesign-7 in Adobe InDesign Tips I Wish Id Known When Starting Out

You could also select a color from the Swatches palette or add a new swatch. Bring up the Swatches palette by pressing F6. Saving a color as a swatch makes sense if you use it frequently. Alternatively, you could import swatches that you’ve already created in Illustrator or Photoshop.

Smashing-Indesign-8 in Adobe InDesign Tips I Wish Id Known When Starting Out

You can also select spot colors from existing libraries, such as Pantone’s. But keep this in mind: if the document will be printed in CMYK only, without using Pantone colors, then you’re better off converting the colors to CMYK so that you get an accurate preview of the result.

Use The Right Black

There seems to be some confusion about the use of rich black, which is made up of all CMYK colors (for example, 40, 40, 30, 100). Rich black is excellent for large areas of black, such as logos and black backgrounds. It prevents fading (to a dull gray), which is especially useful for outdoor posters and flyers.

However, body text should always be in process black (i.e. 100% K) to avoid trapping problems. For the same reason, registration black (which is composed of 100% CMYK) should never be used for body text or thin lines.

Paragraph and Character Styles

The ability to create custom paragraph and character styles is an excellent time-saving feature. This pane is visible in the work area by default, and if you’ve hidden it for some reason, you can bring it up by pressing Command/Control + F11. You can create styles exactly to your liking using many options; and then you can apply them to a portion of text with just one click.

Smashing-Indesign-9 in Adobe InDesign Tips I Wish Id Known When Starting Out

Character styles work in a similar way, but they don’t have to be separated by the paragraph indents. This is very useful for highlighting words and phrases in a paragraph. You can even embed a character style in a paragraph and then define variables to apply it to certain words or before certain characters.

Special Characters

Special characters — an apparently underused InDesign feature — include things like date, page numbers and the “page 1 of (x)” format. Special characters free you from having to insert this data by hand (or having to modify it by hand whenever significant changes are in order).

In small documents, minor changes are not a major undertaking, but imagine working on a 164-page catalog or a 200-page book. Manually changing all of the page numbers would be a big hassle (trust me: I know from personal experience). To insert special characters, go to the Edit menu.

Smashing-Indesign-10B in Adobe InDesign Tips I Wish Id Known When Starting Out

Alternatively, simply right-click on active text to bring up the menu. Explore the options; you can insert a variety of symbols, dashes, spaces and indents through this menu, including the very useful “Indent to here.”

Glyphs

These are worth mentioning. With them, you can explore all of the characters in a font, which is handy when you’re looking for a particular symbol or working in a language that has accented characters.

Smashing-Indesign-11 in Adobe InDesign Tips I Wish Id Known When Starting Out

Use Find/Change

Another extremely useful feature for text-heavy documents is Find/Change. I don’t know about you, but in my experience, the longer the text, the greater the chance that the client will ask me to replace all occurrences of a certain phrase or title. When you have a fully laid-out 192-page book with footnotes, glossary and index, the task of manually replacing phrases is rather daunting.

In such cases, smart use of Find/Change comes to the rescue. You can find it under the Edit menu or press Command/Control + F. If it’s an unusual phrase or title, this is fairly easy: type the original phrase and the new one, and hit “Replace all.” There are advanced options to replace hyphens, em dashes and quotation marks as well.

Smashing-Indesign-12D in Adobe InDesign Tips I Wish Id Known When Starting Out

If it’s something complex, such as a word that has to be changed only in titles, you can use the advanced options to isolate some distinguishing feature. For example, if the titles are in a different font than the body text, you can use that. Use the font options in the “Find format” box.

You could include things like empty spaces and paragraph breaks in your search if you know, for example, that the word that has to change is followed by a space. Insert these special characters by clicking the “@” arrow to the right of the Find box, or search for a particular glyph by going to the Glyph tab. Replacing glyphs one by one might be best, so that you can monitor your work and progress.

You can even search for objects by using specific formatting options. For example, if all of your frames have a black stroke, and would like to remove the stroke, you can do so by selecting the appropriate options in the Object tab of the Find/Change box.

Of course, if you use Object Styles, which work like Paragraph Styles, then you don’t need this feature. Still, it’s the fastest way to do it if you’ve forgotten to save the style, or if you’re working on a document created by someone else or if you want to change one detail that’s common to several different saved styles.

Smashing-Indesign-12E in Adobe InDesign Tips I Wish Id Known When Starting Out

Toggle The Preview

Instead of hiding all the guides, you can hit the W key (make sure the text tool isn’t active) to quickly toggle between the document view and the working (or “Normal”) view, which has all of the margins, guides and outlines. I frequently use it for composition checks, because guides tend to distract from the big picture.

Data Import Feature

Few people think this feature is handy. Yet many of us frequently work with tables given to us by clients. The one I run into most often is the Excel spreadsheet of price listings and item features, which I have to make presentable for a catalog or sales collateral. Many designers recreate these tables from scratch to make them clean and attractive, but this can be time-consuming, especially with large tables.

There is a better way. InDesign has an “Import table” feature. You can import the client’s table from Excel and style it however you want. Use the “Place file” option in the File menu (or Command/Control + D), select “Show import options,” and you’ll be able to define the cells to import on the next screen and then style them as a group.

Smashing-Indesign-13 in Adobe InDesign Tips I Wish Id Known When Starting Out

Learn By Doing

Theory is great, and articles like this one can give you quick useful tips, but the best way to learn is by practice. If you are new to InDesign, try this: use an existing layout as a guide (anything you want: a page from a magazine, a poster or a business card), and try to recreate it from scratch. Familiarize yourself with the tools, menus and options. If you get stuck, you can always search for tips and tutorials or ask a friend.

Adobe InDesign is a versatile application, and there is always something new to learn. Have fun exploring it!

Want To Know More?

Here are a few articles that go into more detail on some of the topics we just covered:

(al)


© Lisa for Smashing Magazine, 2011. | Permalink | Post a comment | Smashing Shop | Smashing Network | About Us
Post tags: indesign, layout, publishing, tips

February 15 2011

10:00

Burnstudio: Create An Amazing Personal Website From Scratch Using Photoshop

Have you ever had a hard time designing your own personal website? Thinking of what elements, shapes, font styles will suit your design? Now if you are in the mood to do something new today, I’ll guide you in creating a stylish personal website. We will be using mostly shapes, layer styles, and fonts to create a new personal website. Hope you can follow along with this tutorial. Now let’s get started.

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

Step 1: Download Resources

Step 2: Setting The Document Size

In the Downloads folder or on your Desktop open up “960_grid_24_col.psd”. First we need to change the canvas size, hit CTRL + ALT + C to access the canvas size option and change the width to 1200 px and height to 1500 px. Make sure to be using pixels as your measurement.

tutorial image

We also need to make sure that Rulers and Guide Lines are visible. Go to View and check Rulers, Guide, and Snap.

tutorial image

Now follow these instructions and place New Ruler Guides at:

  • Position: 40px Orientation: Horizontal
  • Position: 170px Orientation: Horizontal
  • Position: 210px Orientation: Horizontal
  • Position: 550px Orientation: Horizontal
  • Position: 610px Orientation: Horizontal
  • Position: 660px Orientation: Horizontal
  • Position: 900px Orientation: Horizontal
  • Position: 1180px Orientation: Horizontal
  • Position: 1455px Orientation: Horizontal

Step 3: Creating The Background

Fill the background layer with #f3f2ee. Now lets add some texture to it, go to Filter > Noise > Add Noise

tutorial image

Step 4: Organizing The Folders/Groups

It is important to make the Folders/Groups organized in order for the developer to easily locate the elements of the site, or for the future redesigning of the site you, as a designer, can easily locate the elements you may want to change.

Create new Folder(s)/Group(s) and name them as shown below.

tutorial image

Step 5: Creating the Header Area

Top Header

Inside the Header folder create another folder and name it Top Header. Now create a new layer and name it thead, make a selection from the first guide starting from the left across to the right fill it with any color for now. Select Type Tool(T) and type text as shown in the screen shot below according to its character settings.

tutorial image
tutorial image

Add this Blending Option to thead layer.

  • Inner Glow

tutorial image

  • Gradient Overlay

tutorial image

  • Stroke

tutorial image

Header

Create another folder inside header folder and name it header. This folder contains these folders: Logo, Latest Tweet, Navigation, and Search.

Create a new layer and name it header_bg. Select Pen Tool(P), make a shape as shown in the screen shot below and fill it with any color.

tutorial image

Add this Blending Option

  • Inner Glow

tutorial image

  • Gradient Overlay

tutorial image

  • Stroke

tutorial image

Logo

It’s time to add our Logo, so grab the Type Tool(T) and type the logo according to its character settings. Color used for the logo #ffffff and #e66324.

tutorial image

Grab the Pen Tool(P) to create that little shape, fill it with #fb824a and label it design using Type Tool(T).

Navigation

Now lets create our navigation, select Type Tool(T), add the following links according to the settings below.

tutorial image

Using the Pen Tool(P) create a shape as shown in the screen shot below that will serve as a hover or active state, and fill it with any color.

tutorial image

Add this Blending Option

  • Drop Shadow

tutorial image

  • Gradient Overlay

tutorial image

Search

To create the search form first thing we need to do is to select Rounded Rectangle Tool(U), create a shape as shown in the screen shot below and fill it with any color.

tutorial image

Add this Blending Option

  • Drop Shadow

tutorial image

  • Gradient Overlay

tutorial image

Create another shape now using the Rectangle Tool(U)

tutorial image

  • Inner Shadow

tutorial image

  • Gradient Overlay

tutorial image

  • Stroke

tutorial image

Create another shape for the button.

tutorial image

Add this Blending Option

  • Drop Shadow

tutorial image

  • Bevel and Emboss

tutorial image

  • Gradient Overlay

tutorial image

Using the Type Tool(T) type the following:

tutorial image

Tweet Feed

Time to put up our Tweet Feed. Select the Type Tool(T) type “Tweet Feed:” and a sample latest feed. Also open up the twitter icon and place it beside the text.

tutorial image

I added this Blending Option to the Twitter Icon

tutorial image

Step 5: Creating The Slideshow

The first step is to create a big box using the Rectangular Marquee Tool(M). Change the Foreground color to #282828 and Background to #191919. Now select Radial Gradient and fill the selection starting from the center.

tutorial image

Using the Rectangular Marquee Tool(M) create another shape and fill it with any color.

tutorial image

Add this Blending Option

  • Gradient Overlay

tutorial image

Using the Pen Tool(P) create a shape and fill it with any color.

tutorial image

Add this Blending Option

  • Gradient Overlay

tutorial image

Now above the two shape layers create 2 layers and name them Light and Dark. Now select the Rectangular Marquee Tool(M) and make a selection and fill it with #ffffff.

tutorial image

Add a Gaussian Blur to the layer, to do this go to Filter > Blur > Gaussian Blur.

tutorial image

Set the layer mode to Soft Light and Opacity to 50%. Now select the Dark layer and create a shape using the Rectangular Marquee Tool(M) and fill it with #000000.

tutorial image

Add the same amount of Gaussian Blur but this time set the Opacity to 80%.

tutorial image

Below the Orange and the Black colors we will add a background shadow. So create a new layer below it, select the Elliptical Marquee Tool(M).

tutorial image

Add a Gaussian Blur Radius: 6px.

Using the Type Tool(T) and the Elliptical Marquee Toll(M) create what is shown in the screen shot below and make sure that it is on a separate layer. On the left side I used 12 pt Arial. On the right side I used 16pt Arial.

tutorial image

The first circle will serve as the hover/active state.

Add this Blending Option

  • Inner Shadow

tutorial image

  • Inner Glow

tutorial image

  • Gradient Overlay

tutorial image

The second Circle will be the next button.

Add this Blending Option

  • Drop Shadow

tutorial image

  • Bevel and Emboss

tutorial image

  • Gradient Overlay

tutorial image

I added a small arrow to the second circle using the Pen Tool(P) with fill color #606163. Duplicate it and move the original layer once using the down arrow key. Also, for the text, I duplicated it and changed the color to #5d5d5. I colored number 1 with #ffffff. With this step it will give the arrow and the numbers an embedded or letterpressed effect.

tutorial image

For this tutorial I will not add any slide images. So it’s up to you to add your own.

Step 6: Creating 3 Columns (About, What I Do and Testimonials)

Inside 3 Columns folder create 3 folders and name them About, What I Do and Testimonials. Now we’re going to add our About information, so select the Type Tool(T) and type your information.

tutorial image

Notice that line. I used Line Tool(U) 3px color #000000.

Read More Button

Create a new folder and name it Read More. Using the Round Rectangle Tool(U) with a radius 5px create a shape and fill it with any color.

tutorial image

Add this Blending Option

  • Drop Shadow

tutorial image

  • Inner Glow

tutorial image

  • Gradient Overlay

tutorial image

Using the Type Tool(T) and the Pen Tool(P) I added ‘Read More’ and an arrow shape. You can just duplicate the arrow shape as we did in our slide show. Again you can use the same technique to achieve an embedded effect, just duplicate each layer. The original layer must move once using arrow key and change the color to #ffffff.

tutorial image
tutorial image

Time to add a separator to separate the text and arrow. Using Line Tool(U), add 2 lines the first line must have a fill #ffffff and the second #aeaeaf.

tutorial image

Nice and sexy eh? Now lets proceed to What I Do.

What I Do

For this step simply duplicate all the elements inside the About Folder and move it to What I do Folder, then change the Heading and Information.

tutorial image

Testimonials

Just duplicate again. I added a 60×60 image and added italic text and aligned it to the right.

tutorial image

Step 7: Creating My Portfolio

In this step we are going to display our best designs. To start select the Type Tool(T) and type “My Portfolio” then add a 3px line color #000000 as shown in the screen shot below.

tutorial image

Now were going to add thumbnails for our design images. Create a new folder and name it Thumbnails. Now what you’re going to do is create a new file (CTRL + N) 210 x 150 in this file you’re going to create 4 thumbnails with your chosen images. When you’re done drag it to our canvas and place to the Thumbnails folder.

tutorial image

I added a Stroke to each thumbnail.

tutorial image

Now were going to add a Client Name and Website URL below each thumbnail. So, select the Type Tool(T) and type some dummy text.

tutorial image

Last thing we’ll do for the Portfolio section is add a previous and next button at the right top corner. Select the Shape Tool(U) select an arrow from the list of shape and fill it with #362f2d.

tutorial image

Step 8: Creating The Footer

Inside the Footer folder create a new layer and name it footer_cont. Now select the Rectangular Marquee Tool(M) and create a big rectangle selection from the guide. Set the Foreground color to #151515 and Background to #212121. Select Linear Gradient(G) and drag starting from the bottom up to the top of the selection.

tutorial image

Add this Blending Option

  • Inner Glow

tutorial image

  • Stroke

tutorial image

We will divide our footer area into four columns, so inside the Footer folder create 4 folders and name it Explore, My Services, Latest Frog The Blog and Stay Connected. Lets work first on heading titles. Using the Type Tool(T) type your heading.

tutorial image

I added a drop shadow in each header

Add this Blending Option

  • Inner Glow

tutorial image

Explore

Lets work on Explore folder. Using the Type Tool(T) type create another section heading for Explore.

tutorial image

My Services

Here I used the same character settings but with a different color. Use this color for the text #c3b7a4. I colored it differently so that services is more noticeable than the others.

tutorial image

Latest From The Blog

Here we showcase the 3 most recent article from the blog. I styled it using numbers to make it unique and avoid redundancy of styles.

tutorial image

Stay Connected

Time to open up the social media icons and place them on the canvas. Place it correctly with proper spacing. On this part don’t add a divider :)

tutorial image

Step 9: Creating The Footer Copyright

Make a selection in the remaining white space area in the bottom and fill it with any color.

tutorial image

Add this Blending Option

  • Inner Glow

tutorial image

  • Gradient Overlay

tutorial image

  • Stroke

tutorial image

Time to add your copyright text, so select Type Tool(T) and type in with correct character settings.

Finally we’re done! I really hope that you have learned something from this tutorial that can be used for your future projects. If you have questions just drop it below. Thank you and please don’t forget to subscribe.

Final Preview

February 07 2011

10:00

Create a Fantastic Landing Page for Your Next Product Using Photoshop

Let us start the week with another PSD tutorial here at 1stwebdesigner! We will create a Product layout using Photoshop in a step-by-step manner. Techniques will be discussed in this tutorial which include the use of proper spacing, typography, and colors. Keep in mind that these techniques can also benefit you when you’re working on other designs in the future, so keep your mind focused and do not skip a single word!

Resources you will need to complete this tutorial:

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

Step 1: Working with the Site Structure

Before we get started, download first 960grid system for easy Guideline creation.

Open 960_download\templates\photoshop\960_grid_12_col.psd

We also need to make sure that our Rulers and Guides are visible by pressing

  • CTRL + R (View Rulers)
  • CTRL + ; (View Guides)

CTRL + SHIFT + C to change the canvas size.

Step 2: Working with the Header

Rename layer1 folder (group) Header, create a new layer and name it header_bg (Create groups for every major section for example you should group: Header, Navigation, Footer layers together to help stay better organized).

Create a new guideline go to View > New Guide and set the position to 100px, orientation to horizontal.

Select Rectangular Marquee Tool(M), make a selection as shown in the screen shot below and fill it with #191919

Step 3: Working with the Logo

Create a folder inside Header group and name it  Logo, put all your logo related layers there.

Select Text Tool (T) and put up your Site Name and Slogan.

  • Site Name: #e0cf39
  • Slogan: #ffffff

Separator line: Select Line Tool(U) color #414141.

Step 4: Working with Navigation

Create a new group and name it Navigation, put all your navigation related layers there.

Select Text Tool (T) and add the following text: HOME, PRODUCTS, SUPPORT, ABOUT, and CONTACT.

Create a layer and name it Hover.

Select the Rectangular Marquee Tool(M), make a selection as shown in the screenshot below and fill it with #282828

Create another layer at the top of the Hover group. Follow as shown in the screenshot below and fill it with #dfce3e

Step 5: Working with Featured Section

Create a new group and name it Featured_Section, put all your Featured-related layers there.

  • Create another guideline, 375px Horizontal.
  • Set the foreground color to #dcdcdc and background to #ffffff
  • Select Linear Gradient

Create another layer and name it img_holder.

Select the Rectangular Marquee Tool (M), make a selection as shown in the screenshot below and fill it with #414141.

Add this Blending Option

Stroke

Open up the 3dbox generator you have downloaded. Create another layer at the top of img_holder and name it img.

Alt + Click between the two layers to link the img to img_holder.

Below the img_holder create another layer name it shadow.

Select the Rectangular Marquee Tool(U), make a selection as shown in the screenshot below and fill it with #000000.

Ctrl + T to transform. Now, Left Click and choose perspective.

Go to Filter > Blur > Gaussian Blur.

Select the Text Tool (T), Grab some lorem ipsum text. Follow the text format as shown in the screenshot below.

Select the Elliptical Marquee Tool (M), make 4 small circles as shown in the screenshot bellow and fill it with #b2b2b2. For the hover fill it with #1b1b1b.

Step 6: Working with Buttons

Create a new group and name it button, put all your button-related layers there.

Select Rounded Rectangle Tool (U), set the Radius to 5px. Create a layer named btn_bg.

Add this Blending Option

Inner Shadow

Gradient Overlay

  • #ffffff
  • #dcdcdc
  • #a2a2a2
  • #d7d5d5
  • #ffffff


Stroke

Select Text Tool (T)

Create another layer at the top of btn_bg and name it shine.

  • Ctrl + Click layer btn_bg
  • Select Brush Tool (B), Softness to 0%
  • Brush at the center of the selection

Now let’s make a shadow on our button. Repeat the same step as we did on our slide show shadow.
When you’re done duplicate Button folder and place give it a 20px distance.

Step 7: Working with Features

Create a folder named Features, put all your features-related layers there.

Open up the icons you have downloaded. Grab 6 icons that you like.

Place it as shown in this screenshot below and follow the text format.

Step 8: Working with Newsletter

Create a new group and name it news_letter, place all your newsletter-related layers there.

Create another layer named news_bg

Select the Rectangular Marquee Tool (M), and make a selection as shown in the screenshot below.

Select the Gradient Tool (G), set it to Pattern.


Add this Blending Option

Gradient Overlay

  • #000000
  • #ffffff

CTRL+ T to transform, right-click and choose warp.

It’s up to you how you do the warping. In the image below I curve a little at the top left and a tiny curve on the right side and bottom.

Create another folder below new_bg and name it Shadow

Select Pen Tool(P), make a shape as shown below and fill it white #000000.

Go to Filter > Blur > Gaussian Blur.

Set the shadow layer opacity to 50%.

Now Select Text Tool (T), follow the text format as shown in the screenshot below.

  • Sign Up For Free: #f4c714
  • Name & E-mail: #403f3f

Step 8: Working with About Us

Create a folder named About_us, place all your about us related layers there.

Now Select Text Tool (T), follow the text format as shown in the screenshot below.

Step 9: Working with Footer

Create a new group and name it Footer, put all your footer related layers there.

Create a guideline 990px, horizontal.

Make a selection as shown in the screen shot below and fill it with #282828.

Create a folder named Latest News.

Select Text Tool (T), follow the text format as shown in the screenshot below.

Create a folder and name it Recent_tweets.

Select Text Tool (T), follow the text format as shown in the screen shot below.

Create a folder and name it Get Connected.

Open up the social icons you have downloaded and grab Facebook, Twitter and Email.

Select Text Tool (T), follow the text format as shown below.

Select Rectangle Tool (U), set the color to #191919 and place it as shown in the screenshot below.

I also added copyright text and some footer links using Text Tool (T) 11pt color #9d9d9d

Done! I hope you learned something new here. Don’t forget to comment and suggest better ways on how to do things! If you have a tutorial request, or a question feel free to leave them as a comment below. Thanks!

Final Preview

February 02 2011

10:00

Dezign Folio: Create A Detailed Portfolio Homepage Design In Photoshop

In this tutorial you will learn how to create a Portfolio homepage design with a unique slide show and welcome message design. Also choosing great resources around the web to make our design more cooler. I Hope that you can go through in this tutorial and learn a few techniques.

Resources you will need to complete this tutorial:

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

Step1: Working with Site Structure

Before we get started download first 960grid system for easy Guideline creation.

Open 960_download\templates\photoshop\960_grid_12_col.psd

We also need to make sure that our Rulers and Guides are viewed. By pressing

  • CTRL + R (View Rulers)
  • CTRL + ; (View Guides)

CTRL + SHIFT + C to change the canvas size.

Using the Paint Bucket Tool(G) fill the background layer to #242b30

Now you need to create a folders. Here is the folders that we will use in order to be organized.

Step2: Working with Header

Make sure that you have downloaded all the resources. Create a new layer inside the header folder and nae it toe header_bg (Make sure that you have finished creating the folders as said earlier). Now create a new Guideline to do this go to View > New Guide, set the value to 100px and set the Orientation to Horizontal.

Select Rectangular Marquee Tool(M), make a selection as shown in the screen shot below. Now set the foreground #f4f4f4, background #ffffff. Select Linear Gradient drag it by starting at the top down to the middle of the section .

Logo

Still we were working on the Header folder, create a new folder and name it to Logo. Make sure you installed the Vegur font that you have downloaded. Follow the text formatting as shown in the screen shot below.

Add this Blending Option

Drop Shadow

Gradient Overlay

Color Used

  • #191919
  • #505050
  • #202020

Apply this styles to both texts

Navigation

Create a new folder and name it to Navigation. We will be putting our navigation links and place each icons “108 Mono Icons by Tutorial9″ for its desired link , so grab text tool and place it as shown in the screen shot below.

Add this Blending Option to the Icons

Let see what we have on this step. First we created our header background adding up our Logo using the Veguar font we style it by the power of Blending Options, here we can style it uniquely. Next we added our Navigation menu using simple text and Icons from Tutorial9. Thats it for our Header section.

Step3: Working with Slideshow

Preview of what we will making

Let’s work on first with the dark background. Create a new layer inside the Slideshow folder and name it slide_bg. Next create a new guide Value to 465px, Orientation to Horizontal. Make a selection starting below our header down to the guideline. Now select Linear Gradient, set the Foreground to #0f0e0f and Background to #1a181a start dragging from the top down to the bottom of the selection.

Create a new layer and name it slideshow_holder. Next create a new guideline as shown in the screen shot below. Select Rectangle Marquee Tool(M) make a rectangle at the center of the guideline and fill it with white.

Add this Blending Option

Inner Glow

Gradient Overlay

Color Used

  • #ffffff
  • #f0f0f0

Stroke

Now we will delete some area in our slieshow_holder to place our Next and Previous buttons. Select Elliptical Marquee Tool(M) and make a selection as shown in the screen shot below. Do this in both sides.

Next and Previous Buttons

Create a new folder and name it to Arrow. Select Rounded Rectangle Tool, radius to 10px and follow the screen shot as shown below.

Place this icons both sides.

Add this Blending Option

Gradient Overlay

  • #d7ff00
  • #d7ff00
  • #fff600


Now add up some text with the font choice of yours and also grab some image for the slide show.

Tabs

Create a new folder and name it Tabs. For the background of the tabs select Rectangular Marquee Tool(M), place it as shown in screen shot below and fill it with white.

Add this Blending Option

Gradient Overlay

  • #ffffff
  • #dcdcdc

Stroke

  • #b8b8b8

Inside the Tabs folder create another folder and name it to hover. Select Rectangular Marquee Tool(M), place it as shown in the screen shot below and fill it with black.

Add this Blending Option

Inner Glow

Gradient Overlay

  • #191919
  • #5d5d5d

Stroke

  • #2d2d2d

Select Text Tool(T) and add this text formatting.

Create another folder and name it to Normal, Select Text Tool(T) and add up texts with the same formatting. Also I added a Divider. Follow the screen shot as shown below.

Let see what we have on this step. We started our slide show by doing first its background follow by the holder of the entire slide show. Next thing we have done is putting up some text and image to contain the slide, then we added Tabs a design for active/hover and the other is styled in a normal state.

Welcome Message

Still were in the slide show folder. Create another folder and name it message. Now select Rectangle Tool(U), place the shape as shown in the screen shot below.

Add this Blending Option

Drop Shadow

Inner Glow

Gradient Overlay

  • #191919
  • #585757

Stroke

  • #2c2c2c

Notice in the Preview of the Welcome Message it looks like it is hanging, so to do that select Pen Tool(P) and create a shape both sides as shown in the screen shot below.

Make a selection of it. Set the Foreground to 0a090a, Background to #1b1b1b. Select Linear Gradient and start dragging from the top down to the bottom of the selection.

Add this Blending Option

Stroke

  • #100f10

You may have something that looks like this

Now were going to add the message, so select the Text Tool(T) and put up you message with the same formatting as shown in the screen shot below.


In this step we styled the welcome message to make it looks like its hanging on the design. With the help of the dark background and Drop Shadow we achieve this hanging effect. Also we styled our text to make it looks like beveled effect by duplicating the text place it at the back of original, make the text darker and move it up once by the use of the arrow key.

Step4: Working with Services

Preview of what we will making

In the Services folder create another folder and name it to Service1. Open up “This Is Art2″ and select some icons that is appropriate to each services. Now select Text Tool(T), follow the placement and the formatting as shown in the screen shot bellow.

When you’re done duplicate it 2 times then change it texts and icons. Now were going to add a background to our services section to make it more nicer. Select Rectangular Marquee Tool(M), make a selection as shown in the screen shot below. Select Linear Gradient, set the Foreground to #f4f4f4 and Background to #ffffff, start dragging from top down to bottom of the selection.

In this step we simply grab some nice Icons, style our text with a proper font, font size, colors and by the use of proper alignment of texts.

Step5: Working with Information

Preview of what we will making

In the Information folder create a layer and name it to background. Select Rectangular Marquee Tool(M), make a shape and fill it with #eaeaea

Add this Blending Option

Inner Glow

Stroke

  • #e0dfdf

Now were going to add the site Information. Select Text Tool(T), follow the formatting and place it as shown in the screen shot below.


Create another folder and name it RSS Subscribe. Select Rectangle Tool(U), create a shape color to #b7b7b7 as shown in the screen shot.

Duplicate the shape. By the use of arrow key move it 1px to the right and 1px to the bottom.

Add this Blending Option

Gradient Overlay

  • #eeeeee
  • #ffffff

You may have something that looks like this

Select Rectangle Tool(U), create a shape and place it as shown in the screen shot.

Add this Blending Option

Drop Shadow

Inner Glow

Gradient Overlay

  • #191919
  • #585757

Stroke

  • #2d2d2d


In this step we just copy the text formatting of what we have done on our services area. Also we create an RSS Subscribe area where we style the subscribe button looks like it is hanging the same as we did to our Welcome Message

Step5: Working with Footer

Select Footer folder and create a layer name it foot_bg. Using Rectangular Marquee Too(M) cover all the remaining white space below the information area and fill it with #1d1d1d.

Add this Blending Option

Inner Glow

Stroke

  • #2d2d2d

To finish the design add up your copyright text using Text Tool(T).

Conclusion:

I really hope that you follow and learn something from this tutorial for your future projects. If there are some steps that you didn’t understand feel free to ask some question below. Also if you like this tutorial please share it to your friends and don’t forget to subscribe to our news letter. Have a great day!.

January 24 2011

10:00

Learn How To Create A Detailed Portfolio Layout In Photoshop

Hello there everybody! I really enjoy spending time writing web layout tutorials, as such here comes another one. Are you ready for another PSD web design tutorial here at 1stwebdesigner? Today we will create a Detailed Portfolio Layout. A few techniques discussed in this tutorial include the use of proper spacing, patterns, typography, and colors.

Stay with me till the end so that you will not get lost in the process, everything is important so do not skip!

Resources you will need to complete this tutorial:

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

Step 1: Working with Site Structure

Before we get started download first 960grid system for easy Guideline creation.

Open 960_download\templates\photoshop\960_grid_12_col.psd

We also need to make sure that our Rulers and Guides are in view by pressing:

  • CTRL + R (View Rulers)
  • CTRL + ; (View Guides)

CTRL + SHIFT + C to change the canvas size.

Using the Paint Bucket Tool(G) fill the background layer to #151515

Now we need to create folders. Here are the folders that we will use in order to be organized all throughout.

When you’re done let’s get started!

Step 2: Working with Header

Create new guideline by going to View > New Guide and set the position to 150px, orientation to horizontal. Repeat the step and change the position value to 100px and 5px.

Inside the Header folder create a new layer and name it header_top (Make sure that you have created the folders as said earlier).

Select Rectangular Marquee Tool(M), make a selection in the 5px guideline we just made and fill it with #000000.

Add this Blending Option:

Drop Shadow

Now create a new layer and name it header_bg. Select Rectangular Marquee Tool(M), make the selection as shown in the screenshot below.

Set the foreground color to #242424, background to #151515. Now select Gradient Tool(G) > Radial Gradient. Fill the selection by dragging from the center to the right.

Add this Blending Option:

Inner Shadow

Step 3: Working with Logo

Inside the Header folder create a new folder and name it logo. Were going to create a quick logo. Select Text Tool(T), follow the screenshot as shown below.

Add the following Blending Options:

Drop Shadow

For the Quick logo Select Custom Shape Tool(U), follow the screen shot as shown below.

Also add the following Blending values:

Drop Shadow

Gradient Overlay


Step 4: Working with Navigation

Inside the Header folder create a new folder and name it navigation. We are going to add navigation links, so select Text Tool(T), use the values below:

Duplicate the text layer. The duplicated layer will be place on the top of the original layer, select the original text layer and set the color to #000000, press up arrow once on your keyboard. This will make the text beveled.

Now we will create an active/hover effect. Select Rounded Rectangle Tool(T), Radius to 10px. Set the shape fill to 0% at the layers panel.

Apply the values as shown below:

Drop Shadow

Inner Shadow

Gradient Overlay


Step 5: Working with Search and Breadcrumbs

Inside the Header folder above the header_bg layer create a new layer and name it bg. Select Rectangle Marquee Tool(M), make a selection as shown in the screen shot below and fill it with any color.

Then follow the given values for the Blending below:

Drop Shadow

Inner Glow

Gradient Overlay

Stroke


Inside the Header folder create a new folder and name it Search. Now were going to add the search input background. Select Rounded Rectangle Tool(U), set radius to 10px and place it as shown in the screen shot below.

Add this Blending Option

Drop Shadow

Inner Shadow

Select Text Tool(T), label it with any text you are comfortable with.

Now open up the social media icons you have downloaded and place it beside the search bar as shown in the screen shot below.

Inside the Header folder create a new folder and name it Breadcrumbs. Open up the home icon you have downloaded and place it as shown in the screen shot below. I added a Color Overlay #696969 in the home icon also with the same color in the text.

Step 6: Working with Slideshow

Select Slideshow folder and create and new layer inside of it, name it slide_bg. Create a new guide line by going to view > new guide > set Value to 430px orientation to horizontal.

Make a selection in the guide we have created and fill it with color.

Blending values as follow:

Drop Shadow

Pattern Overlay

Stroke

Now were going to add a highlights to our slide_bg create a new layer above it and name it highlights. Select the Pen Tool and make the shape as seen below and make a selection from it.

Fill the selection with #ffffff  and set the layer options as shown in the screen shot below.

Now we were going to add some text in our slide show. Select the Text Tool(T) and follow the text formatting.

Step 7: Working with Read More

Next will be the read more button. Inside the slideshow folder create another folder and name it read_more. Select Rounded Rectangle Tool(U) then set the Radius to 10px. Place it like seen below.

At the layers panel set the fill color to 0%.

Add this Blending Option:

Drop Shadow

Inner Shadow

Gradient Overlay


Make a selection to the shape we have just created by clicking the shape thumbnail in the layers pannel. Go to Select > Modify > Contract. Set the pixel value to 5px and fill it with any color.

Follow the blending values as set below:

Drop Shadow

Inner Glow

Gradient Overlay

Stroke


Using the Text Tool(T), label the button with read more.

Step 8: Working with Slide Image

Now were going to add the slide image. Select Rectangle Tool(U), set the color to #000000 and place it as shown in the screen shot below.

Set the layer Fill to 0% then go to Blending Options and do the following:

Drop Shadow

Stroke

I placed an image above the layer. So you may have something that looks like in the screen shot below.

Step 9: Working with Next Prev Buttons

Create another folder inside Slideshow folder and name it prev_next. Select Rounded Rectangle Tool(U) and the radius to 10px. Follow the step as shown in the screen shot below.

Name the layer to prev. Set the layer Fill to 0%.

Copy the following values:

Drop Shadow

Inner Shadow

Gradient Overlay


Duplicate the prev layer and name it to next. Place it at the opposite side.

Step9: Working with Active/Inactive Identifier

Create another folder inside Slideshow folder and name it Identifier. Inside the Identifier folder create a new layer and name it inactive.

Now select Ellipse Tool(U), fill it with #000000 and place it as shown in the screen shot below.

Notice in the screenshot they have the same effect with our prev_next buttons. Refer to the layer styles of prev_next buttons or by simply duplicating the styles by holding the Alt + Click to the FX Icon in the layers panel and drag it to the inactive shape layer.

Now we will create the active identifier. Select the first inactive shape. Go to Select > Modify > Contract. Set the pixel value to 5px.

Use the following values:

Drop Shadow

Inner Glow

Gradient Overlay


Step10: Working with Services

Select the services folder. Now were going to add the header title, so grab the Text Tool(T) and follow the text formatting as shown in the screen shot below.

Now let’s add a divider. To do this select Line Tool(U), weight to 1px. Follow the screen shot as shown below.

Create another folder inside services folder and name it service1. Open up icons you have downloaded and select an appropriate icon for each service. Now select Text Tool(T) follow the text formatting as shown in the screenshot below.

When you’re done duplicate it depending on how many services you offer. For this exmaple I duplicated it 5 times and changed every icon for different services. Follow what I did in the screenshot below.


Step 11: Working with Recent Tweets

Select aboutme folder. Now were going to add the header title, so grab the Text Tool(T) and follow the text formatting (The same as we did to our services header title) as shown in the screen shot below.

Using Text Tool(T) put up some about me information. Use the values presented below.

Go to Blending Options and use the values as shown below:

Drop Shadow

Stroke

Step12: Working with Latest Tweets

Select aboutme folder. Now we are going to add the header title and tweets, so grab the Text Tool(T) and follow the text formatting (The same as we did to our services and about me) as shown in the screen shot below.

Add this blending option to the rounded rectangle.

Drop Shadow

Step12: Working with Footer

In the footer folder create a new layer and name it footer_bg, make a selection as shown in the screenshot below and fill it with color.

Add this Blending Option:

Inner Glow

Gradient Overlay

Stroke

Now select Text Tool(T), put up your copyright info and place it on the center.

Finally we’re done! Hope you learned something on this tutorial and I hope you like it. If you have
any questions or tutorial request drop some comments below. Thanks!

Final Preview

January 19 2011

10:00

1stDelicious: Create A Simple Clean Portfolio Layout In Photoshop

Hello there everybody and welcome to another PSD web design tutorial here at 1stwebdesigner! In this tutorial you will learn how to create a Simple Clean Portfolio layout in Photoshop. A few techniques discussed in this tutorial will include the use of proper spacing, typography and colors.

We’ll be using really light color scheme and design is meant to be really minimal for portfolio type of website.

Let’s get started – I hope you will make out together with me until successful finish together !

Resources you will need to complete this tutorial:

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

Step1: Working with Site Structure

Before we get started download first 960grid system for easy Guideline creation.

Open 960_download\templates\photoshop\960_grid_12_col.psd

We also need to make sure that our Rulers and Guides are viewed, do that by pressing

  • CTRL + R (View Rulers)
  • CTRL + ; (View Guides)

CTRL + SHIFT + C to change the canvas size.

Step2: Working with Header

Rename the layer1 folder to Header and rename layer 1 to header_bg (put everything in separate folder like Header, Navigation, Footer to help to be organized better).

Create new guideline go to View > New Guide and set the position to 150 px, orientation to horizontal.

Select Rectangular Marquee Tool(M), make a selection as shown in the screenshot below and fill it with any color.

Add this Blending Option:

Gradient Overlay

  • #192028
  • #2a3642

Step 3: Working with Logo

Create a folder inside header folder and name it to Logo, put all your logo related layers there.

Create another guideline 50px from the top.

Now Select Text Tool(T) and put up your Site Name and Slogan.

  • Site Name: any color
  • Slogan: #cacaca

Add this Blending Option:

Drop Shadow

Gradient Overlay

  • #c5c5c5
  • #d7d7d7
  • #ffffff

You must have something like this in the result:

Step 4: Working with Navigation

Create a folder and name it to Navigation, put all your navigation related layers there.

Create another guideline 5px from the top.

  • Select Rectangular Marquee Tool(U)
  • Make a selection from left to right based on our 5px guideline
  • Fill it with a color #02abc6

Select Text Tool(T):

Let’s create a hover/active state to our navigation.

Select Pen Tool(P). Create an arrow-head shape and place it as shown in the screenshot below.

We’re finished with our header section, so now let’s proceed with featured section.

Step 5: Working with Featured Section

Create a folder and name it to Featured_Section, put all your Featured related layers there.

Select Rectangular Marquee Tool(M), make a selection as shown in the screenshot below and fill it with #cccdcd.

Add this Blending Option:

Stroke

Create another layer and name it to middle_light. Set the opacity to 50%.

Select Rectangular Marquee Tool(U). Make a selection as shown in the screenshot below:

  • Select Radial Gradient(G)
  • Foreground color to #e5e5e5
  • Background color to #ffffff

Drag the gradient starting from the middle all the way to the right.


Select Text Tool(T), put up your site message.


Now Open up the Imac.psd file. Place it as shown in the screenshot below.

Below the Imac layer Create a new layer and name it Shadow.

Select Elliptical Marquee Tool(U). Make a selection as shown in the screen shot below and fill it with a color #000000.

Remember that while holding shift key you can create multiple selections.

Go to Filter > Blur > Gaussian Blur.

Set the layer opacity to 50%.

Step 6: Working with Read more Buttons

Create a folder and name it to buttons, put all your read more buttons related layers there.

Select Rounded Rectangle Tool(M), place it as shown in the screenshot below.

Add this Blending Option:

Gradient Overlay

  • #dcdcdc
  • #ffffff

Stroke

Select Text Tool(T) and add text to buttons.

Add this Blending Option:

Drop Shadow

Gradient Overlay

  • #1d1d1d
  • #4e4e4e

With the help of drop shadow and gradient overlay this effect will make our text look embedded.

Step 7: Working with Testimonials

Create a folder and name it to testimonials, put all your testimonials buttons related layers there.

  • Select Rounded Rectangle Tool(U)
  • Set the radius to 10px

Apply the same layer style as we did into our header and place Place it as shown in the screenshot.

Select Text Tool(T), add up your testimonials.


Step 8: Working with Hire Me Button

Create a folder inside testimonials folder and name it to hire_btn, put all your hire button related layers there.

Select Rounded Rectangle Tool(U), set the radius to 10px and color to #141a20. Place it as shown in the screenshot.

Add this Blending Option:

Drop Shadow

Ctrl + click to the layer to make a selection.

Go to Select > Modify > Contract. Set it to 3px.

Create another layer and name it to button , and fill it with any color.

Apply the same layer and text style as we did to our button in featured area.

Step 9: Working with Main Area(What I Do, My Portfolio, I Socialize)

Create a folder and name it to main_area, put all your main area related layers there.

What I Do

Create another folder inside main_area and name it to What I Do.

Now Open icons that you have downloaded and grab 3 icons that will fit to (What I Do, My Portfolio, I Socialize).

Select Text Tool(T):

My Portfolio

Create a folder and name it to my_portfolio, put all your portfolio related layers there.

Select Text Tool(T):

Apply this Blending Option to the image.

Stroke

I Socialize

Create a folder and name it to i_socialize, put all your I Socialize related layers there.

Open up social icons and place it as shown in the screen shot.

Select Text Tool(T):

Now were done in our main area lets proceed to footer.

Step 10: Working with Footer(Quick Links, Latest From The Blog, Contact Me)

Create a folder and name it to footer, put all your footer related layers there.

Go to View > New Guide. Set it to 965px Horizontal.

Repeat the step. Set it to 1158px Horizontal

Select Rectangular Marquee Tool(M), make a selection as shown in the screen shot and fill it with any color.

Add this Blending Option:

Gradient Overlay

  • #2a3642
  • #192028

Make a selection in to the remaining white space.

Add this Blending Option:

Inner Glow

Gradient Overlay

  • #2a3642
  • #192028
  • Check Reverse

Stroke

  • #192028

Quick Links

Create another folder inside footer and name it to Quick Links.

Select Text Tool(T)

  • Header: #ffffff
  • Links: #0cb0ca

Latest From The Blog

Create another folder inside footer and name it to Latest_blog

Select Text Tool(T):

  • Header: #ffffff
  • Links: #0cb0ca

Contact Me

Create another folder inside footer and name it to Contact_me

Open up social media icons and grab an icon for email and rss.

Select Text Tool(T):

  • Header: #ffffff
  • Paragraph: #cacaca
  • Links: #0cb0ca

The last thing to do is add up your Copyright.

Select Text Tool(T). Arial 11pt

Finally were done! Hope you learn something on this tutorial and hope you like it. If you have
any question or tutorial request drop some comments below. Thanks!

Final Preview

December 22 2010

10:00

Create Amazing 3D Portfolio Dark Layout In Photoshop

Hello there everybody and welcome to another PSD web design tutorial here at 1stwebdesigner! In this tutorial

you will learn how to create a 3D like design using  simple gradients and other effects how to achieve great layout without any big problems. Now I will guide you through this tutorial and I am sure you will learn a few tricks as well!

Let’s get started – I hope you will make out together with me until successful finish together !

Resources you will need to complete this tutorial:

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

Before we get started download first 960grid system for easy Guideline creation.

Open 960_download\templates\photoshop\960_grid_12_col.psd

We also need to make sure that our Rulers and Guides are viewed. By pressing

  • CTRL + R (View Rulers)
  • CTRL + ; (View Guides)

CTRL + SHIFT + C to change the canvas size.

Step1 Working with Background and Header

Rename the layer1 to Header (put everything in separate folder like Header, Navigation, Footer to help to be organized better).

Fill the background color to #131313.

Create new guide. Click on View > New Guide

Select Rectangular Marquee Toll(M) and make a selection from the guide we made, fill it with #0a0a0a color.

Add this Blending Option:

Stroke

  • Size: 1px
  • Color: #242424

Select Text Tool(T) and add your navigation links, place it at the top right corner.

Create another folder inside the Header name it Logo, put all your logo related layers there.

Next we will create our logo. Select Rectangular Marquee Tool(M) make a selection as shown below and fill it with any color.

Add this Blending Option to it:

Drop Shadow

Inner Glow

Gradient Overlay

Stroke

Select Text Tool(T) add up your Site Name.

Add this Blending Option to it:

Drop Shadow

Gradient Overlay

Step 2: Working with Welcome Message

Create another folder outside the Header name it welcome_displays, put all you’re welcome displays related layers there.

  • Create new Horizontal Guide 130px.
  • Select Text Tool(T) and put up your Welcome Message

For the font I used Verdana, or the Highlighted text color is #73cef8.

Add this Blending Option:

Drop Shadow

Step 3: Working with Read More Button

Create another folder inside the welcome_displays name it read_more, put all your read more related layers there.

Select Rounded Rectangle Tool(U) Radius to 15px.

Add this Blending Option:

Drop Shadow

Inner Shadow

Gradient Overlay

Stroke

Add Read More text size to 14pt, add a solid drop shadow 2px.

At the very bottom of welcome_displays layers add another layer name it background.

  • Select Linear Gradient With a foreground color #111111 and background #181818.

Step 4: Working with 3D like Ground/Holder

  • At the very top of our layers panel create another folder and name it 3D
  • Create another layer and name it Linear
  • Select Rectangular Marquee Tool(U)

Select Gradient Tool and use linear gradient. Foreground Color #111111 background #181818.

  • Now create another layer at the top of linear and name it radial
  • Hit X to reverse the background color and foreground color
  • Make sure you choose radial gradient.
  • Drag the gradient starting from the center to right.

Add this Blending Option to it:

Drop Shadow

Stroke

Now Create a 1px line color #272727

Duplicate the line and place it on the bottom:

Duplicate layer again and place it to the top.

Add this Blending Option:

Gradient Overlay

Create another line and fill it with #0b0b0b.

You can see now that we’ve got a nice 3D effect, ok – let’s use that ground effect and put something on it.

Create another layer at the very top of 3D folder and name it MacBook.

Open up the Macbook .psd file that I provided in the resources. Replace the image to some of your works and place it in our layout.

  • Below the image layer create another layer and name it Shadow
  • Select Elliptical Marquee Tool(M) and fill it with #000000

Go to Filer > Blur > Gaussian Blur;

Step 5: Working with 3 column Information

Create another folder below the 3D folder and name it 3column_info, put all your information related layers there.

Set the foreground color to #111111 background to #181818.

Add this Blending Option:

Drop Shadow

Create a 1px line as shown below.

Create a folder inside 3column_info and name it About Me.

Here is what we will be making:

Select Rounded Rectangle Tool(U) Radius to 10px.

Add this Blending Option:

Drop Shadow

Inner Glow

Gradient Overlay

Color I used

  • #010101
  • #242424
  • #1d1d1d
  • #575757
  • #2b2a2a
  • #070707
  • #525151

Stroke

Color I used

  • #000000
  • #5f5e5e
  • #000000

  • CTRL + Click to the layer to make a selection
  • Go to Select > Modify > Contract 3px
  • Fill it with any color

Add this Blending Option:

Inner Shadow

Stroke

Color I used

  • #000000
  • #2a2a2a
  • #919191
  • #2b2b2b

Above the contracted layer add your image.

Select Text Tool(T) and follow the steps as shown in the screenshots:

Grab a copy of read more button.

Create another folder and name it What I Do.

For the bullet style Select Rectangular Marquee Tool(M) and make a little Rectangle.

Add this Blending Option on it:

Drop Shadow

Inner Shadow

Gradient Overlay

Color I used

  • #000000
  • #191919

Stroke

Color I used

  • #8a8a8a
  • #000000

Create another folder and name it My Skills.

For the Photoshop, Illustrator, HTML/CSS WordPress text I used Verdana,bold, size to 18pt.

Select Rounded Rectangle Tool(M). Place it as shown in the screenshot below.

Add this Blending Option:

Drop Shadow

Gradient Overlay

Color I used

  • #252525
  • #171717

Stroke

Duplicate the layer and clear the layer style by:

  • selecting the layer
  • right-click
  • then select Clear Layer Style

Add this Blending Option to it:

Inner Glow

Gradient Overlay

Color I used:

  • #191919
  • #282828

Step 6: Working with Recent Projects

Create another folder name it recent_projects, put all your recent projects related layers there.

Apply the same format as to our headers.

Now select Rounded Rectangle Tool(U) Radius to 10px. Create 3 shapes about 12.5 px distance from the right.

  • Apply the same style as we did to our thumbnail image in our about me section.

Contract it to 3px and use the same process as we did in our thumbnail in about me. Add up your image.

Step 7: Working with Footer

Create another folder name it footer, put all your footer related layers there.

Select Rectangular Marquee Tool(M). Draw a shape at the very bottom 40px height and fill it with #0a0a0a.

Add this Blending Option:

Stroke

Now add up your copyright text. I used:

  • Verdana
  • Size:10px
  • Color #999999 and for the link #ffffff.

Finally were done! Hope you learn something on this tutorial and hope you like it. If you have any questions or tutorial request drop some comments below.

Thank you and keep coming back!

Final Preview

December 15 2010

10:00

Create A Detailed Blue WordPress Blog Layout In Photoshop

Hello there everybody and welcome to another PSD web design here at 1stwebdesigner.

In my previous tutorial we learned how to create a Dark WordPress style layout.  Today you will be learning to create a clean light WordPress style layout and I hope all of you can follow this step by step tutorial. Let’s get started.

Resources you will need to complete this tutorial:

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

Before we get started download first 960grid system for easy guideline creation.

  • Open 960_download\templates\photoshop\960_grid_12_col.psd
  • Ctrl + Shift + C to change the canvas size

Step 1: Working with Header

Lets make this tutorial organized. Rename the Layer1 folder to top_header and also rename the layer1 to top

To start will make some guidelines for our header.
Click View > New Guide set the value to 40px, orientation to Horizontal.

Select Rectangular Marquee tool(M) make a selection from the guide we have just created.
Fill it with any color.

Add this Blending Option:

Drop Shadow

  • Opacity: 50%
  • Angle: 90
  • Distance: 2px
  • Size: 3px

Inner Glow

  • Color: white
  • Opacity: 50%
  • Size: 1px

Gradient Overlay

  • Style: Linear
  • Angle: 90
  • Gradient: #2f2f2f #404040

To finish the top_header select Text Tool(T), put some links at the right side.

Step 2: Working with Site Name and Search Bar

Create a new layer below the top layer, name it header_bg

Create a new guide 225px horizontally, make a selection and fill it with any color.

Apply this Blending Option

Gradient Overlay

  • Style: Linear
  • Angle: 90
  • Gradient: #2c8797 #3da2b4

Using Text Tool(T) Add the Site Name and Slogan follow the image bellow

1st

  • Font: Lucida Bright Regular
  • Size: 48pt

webdesigner

  • Font: Arial Regular
  • Size: 30pt

Tutorials, Inspirations & Freebies

  • Font: Lucida Bright Italic
  • Size: 12pt

Apply this Blending Option:

Drop Shadow

Inner Glow

Gradient Overlay


Now lets create the search bar.

Create another folder inside the Header name it Search, put all your search related layers there.

Select Rounded Rectangle Tool(U) and set the radius to 10px. Place it as shown below and name it nav_bg.

Add this Blending Option

Drop Shadow

  • Blend Mode: Overlay
  • Color: White
  • Opacity: 75%
  • Angle: 90
  • Distance: 0px
  • Size: 1px
  • Inner Shadow

  • Opacity: 50%
  • Angle: 90
  • Distance: 2px
  • Size: 5px

Gradient Overlay

  • Style: Linear
  • Angle: 90
  • Gradient: #2d899a #2d8899

Result:

  • Duplicate the nav_bg layer.
  • Right click the layer and Click Clear Layer Style.
  • Right click the layer again and Click Rasterize Layer.
  • CTRL + Click the layer to make a selection. While it its being selected
  • Select Rectangular Marquee Tool(M) Hold SHIFT + ALT. Follow the selection below.

This means that whatever you selected will not be included to the selection.

Hit Delete then Name the layer search_btn:

  • CTRL + Click the layer to make selection
  • Go to Select > Modify > Contract. Contract it by 2px.
  • CTRL + SHIT + I to inverse the selection and hit delete.

Add this Blending Option:

Inner Glow

  • Opacity: 50%
  • Color: White
  • Choke: 5%
  • Size: 3px

Gradient Overlay

  • Style: Linear
  • Angle: 90
  • Gradient: #2c8797 #3da2b4

Stroke

  • Size: 1px
  • Position: Inside
  • Color: #1f606b

To add the search icon select Custom Shape Tool(U) and find the search icon.

Place the icon in the button of the button we have created.

Add this Blending Option:

Drop Shadow

  • Blend Mode: Multiply
  • Color: Black
  • Opacity: 50%
  • Angle: 90
  • Distance: 0px
  • Size: 1px

Use Text Tool(T) to add text:

  • color: white
  • italic

Step 3: Working with Navigation

At the layers panel make a new folder above the top_header folder name it Navigation, put all your search related layers there.

Make a new guideline 265px orientation to Horizontal.

Create a new layer and name it nav. Make a selection to our new guideline and fill it with a color.

Apply this Blending Option

Drop Shadow

  • Blend Mode: Multiply
  • Color: Black
  • Opacity: 50%
  • Angle: 90
  • Distance: 2px
  • Size: 5px

Inner Glow

  • Opacity: 50%
  • Color: White
  • Choke: 0px
  • Size: 1px

Gradient Overlay

Stroke

  • Color: #b2b2b2
  • Size: 1px

Create new layer above the nav layer and name it shine.
Us the same process as we did before on how we make a selection from search_btn. See the image shown below.

Fill it with white and change the blend mode to Softlight, Opacity to 75%

Using Text Tool(T) Add links to our navigation as shown.

Duplicate the text layer. Move the original text 1 below by hitting the arrow down once. Then change the color to White and you get nice embedded text.

Result:

Now lets create a divider for our Navigation.
Make a new layer name it divider. Zoom in 800% and make a selection show in the image.

Set the foreground color to white.

  • Select Gradient Tool(G)
  • Choose Foreground to Transparent
  • Choose Reflected Gradient



Duplicate the divider and move 1 from right by pressing the right arrow key.

Apply this Blending Option:

Color Overlay

  • Color: #b2b2b2

Merge the two layers and duplicate it 4 times. Don’t forget to group the layer and name it dividers.

Step 4: Working with Body Background

Create a new folder below the top_header name it body_bg. Inside it create a new layer name it noise and fill the layer with Black.

Go to Filter > Noise > Add Noise.

Set the blend mode to screen

Create a new layer below the noise layer and name it gradient.

Select the Gradient Tool(G) Set the Foreground color to #d6d5d6 background to #e1e0e0

While holding the Shift key drag it from top to center of the page.

Step 5: Working with Featured Content

At the layers panel make a new folder name it featured_content, put all your featured content related layers and folders there.

Show the guideline by pressing CTRL + :

Follow the image below to make guidelines:

Select Rectangular Marquee Tool(U) and make a big rectangle as show below and fill it with black color.

Apply this Blending Option:

Drop Shadow

  • Blend Mode: Multiply
  • Color: Black
  • Opacity: 70%
  • Angle: 90
  • Distance: 2px
  • Size: 3px

Inner Glow

  • Opacity: 50%
  • Color: White
  • Choke: 0px
  • Size: 3px

Gradient Overlay


Stroke

  • Color: #b2b2b2
  • Size: 1px

Grab a sample screenshot make it 630 x 225.

Apply this Blending Option

Stroke

  • Color: #ffffff
  • Size: 1px

Select Rectangular Marquee Tool(M) make a selection as shown below and fill it with black color, set the fill to 50%.

Using Text Tool (T) add some text:

  • Size:18px
  • Lucida Sans Regular
  • Color: white.

Now we will create Next and Prev Buttons. Select Rounded Rectangle Tool(U) Set the radius to 10px.

Set the fill to 10%.

Apply this Blending Option:

Stroke

  • Color: #b2b2b2
  • Size: 1px

Adding arrow -  select Rounded Rectangle Tool(U) do the following step.

Apply Color Overlay make it white.

Duplicate the whole layer and make another button in the opposite side. Don’t forget  to name every button.

What we do next is adding sliding option, so people could switch screens:

Create a new folder and name it circles. Select Eliptical Marqueee Tool(M). Make four circles.

The first circle will serve as active/hover state, so apply this Blending Option to it:

Drop Shadow

  • Blend Mode: Overlay
  • Color: White
  • Opacity: 70%
  • Angle: 90
  • Distance: 0px
  • Size: 1px

Gradient Overlay

For the unhover circles add this option:

Drop Shadow

  • Blend Mode: Overlay
  • Color: White
  • Opacity: 70%
  • Angle: 90
  • Distance: 0px
  • Size: 1px

Inner Shadow

  • Blend Mode: Multiply
  • Color: Black
  • Opacity: 50%
  • Angle: 90
  • Distance: 2px
  • Size: 3px

Color Overlay

  • Color: #cdcccc

Step 6: Working with Posts

Create a new folder and name it posts. Create a new layer there and name it posts_holder.

Select Rectangle Tool(U) and draw a big holder for our post.

Apply this Blending Option to it:

Inner Glow

  • Opacity: 50%
  • Color: White
  • Choke: 0px
  • Size: 2px

Gradient Overlay

Stroke

  • Color: #b2b2b2
  • Size: 1px

Create another box as shown in the image below. This will serve  as the background of every post.

Apply this Blending Option:

Gradient Overlay

Stroke

  • Color: b2b2b2
  • Size: 1px

This is how our posting will look like:

Follow the image shown below and add all the options to your own design:

For the read more button you’ll need to add this:

  • Select Rectangle Tool(U) position it as shown above.
  • Apply the same layer style as we do to our bg of the post,
    but this time make the gradient reverse.

Open up social network icons and place it as shown in screenshot below.

Add a divider at the top of the icons

Select Rectangular Marquee Tool(M) make a selection as shown. Fill it with color #efeeee.

Group all the layers and name it posts and duplicate it 3 times.

Below our last post we will make a pagination buttons.

Select Rectangle Tool(U)  and make a box as shown in the screenshot below.

Apply the same layer style as we did to our read more button, for the gradient uncheck Reverse.

Duplicate a couple of times and place it beside with each other.  Use distance 5px and for the gradient check Reverse.

Using Text Tool(T) put up numbers. I used the same font color #676666

Step 7: Working With Right Sidebar(RSS, Twitter, Advertisement, Newest Posts, Popular Posts).

At the layers panel make a new folder name it right_sidebar, put all your sidebar related layers and folders there.

Rss

Lucida Sans Regular 25pt color #e67a18 (Drop shadow 1px white blend mode to overlay)
Lucida Sans Regular 14pt color #676666 (Drop shadow 1px white blend mode to overlay)

Twitter

Lucida Sans Regular 25pt color #2c8797 (Drop shadow 1px white)
Lucida Sans Regular 14pt color #676666 (Drops hadow 1px white)

Notice I’ve add some divider about 20px below. The same step and color as we do previously in our posts. Or simply just duplicate some divider.

For the advertisement

Grab 125×125 advertisement images, use 20px distance with each other.

For the Latest Posts

Select Rectangle Tool(U) and draw as shown below in the screenshot. Apply the same style we used in post_bg but this time change the stroke color to #b2b2b2 position inside.

Draw another rectangle that will serve as our header for the box as shown below in the screenshot.

Apply following blending options to it:



Add text for the header also for the post, follow the image below for details.

Draw a little square which will serve as a bullet.

Apply the same layer style as we used to our header.

Group all the layers name it latest_posts. Duplicate new group and name it popular post. Hold SHIFT and drag it below. Name it popular_posts,

Step 8: Working with Footer

At the layers panel make a new folder and name it footer, put all your footer related layers and folders there.

Select Rectangular Marquee Tool(M) and make a selection as shown in the screenshot, fill it with black color.

Apply the same layer style as we did in our top_header.

Using Text Tool(T) add some text 12px color to white.

Apply this Blending Option to it:

Drop Shadow

Now we’re done for now – congratulations!!!

I really hope you enjoyed this tutorial and will keep coming back for more. If you have any tutorial request related to web design feel free to comment it below – I would be happy to fulfill your needs.

Any question or suggestions? Please do leave your comment to let me help you too. Thanks!

December 10 2010

10:00

Learn How To Create Modern Dark WordPress Layout In Photoshop

Hello there everybody and welcome to another PSD web design tutorial here at 1stwebdesigner!

This time you will be learning how to create a simple dark WordPress style layout with really detailed step by step instructions and a lot easy to follow and understand screenshots, so I hope even for beginners it shouldn’t be hard to follow-up.

Let’s get started – I hope you will make out together with me until successful finish together !

Resources you will need to complete this tutorial:

Here is the final outcome with what we will creating, click on image for full size preview:

Before we get started let’s download 960grid system at first for easy Guideline creation.

  • Open 960_download\templates\photoshop\960_grid_12_col.psd
  • CTRL + SHIFT + C to change the canvas size.

Step 1:  Working with Background and Header

  • Fill the background color with #181818.
  • Create a guideline for our header area. Add it to be 158px from the top. (if you don’t see rulers press CTRL+R).

Rename the layer1  to Header (put everything in separate folder like Header,Content, Navigation, Footer to help to be organized better).

It’s up to you how will you rename the layers just make it sure that you are staying organized since we will have a lot of layers at the end of tutorials and it’s will be really hard to navigate through them if you leave the default naming and structure.

  • Make a selection using Rectangular Marquee Tool(M).
  • Fill it with #141414 this will serve as our header_bg.

Add this Blending Option to current layer:

Stroke:

  • Size: 1px
  • Color: #272727

Above our stroke created 1px solid line which is making header to look a little bit embedded.

Such effect has been used a lot in web designs lately, adding to design subtle, but noticeable separation between contents.

Step 2: Working with Logo

Inside the Header folder create another folder name it Logo.

Create a guideline 47px from the top, the step is the same as we created our guideline for our header.

Select the Text Tool(T) and put up your Site name.

  • FIRSTWEB – 36pt
  • DESIGNER – 18pt

Add this Blending Option there:

Gradient Overlay


Step 3: Working With Search Section

Create another folder inside the Header name it Search, put all your search related layers there.

  • Select Rounded Rectangle Tool(U)
  • Set the Radius to 10px.
  • Fill it with #1d1d1d

Add these Blending Options:

Drop Shadow

Inner Shadow


Select Custom Shape Tool(U) then find the search icon. Fill it with #999999. For the search text use

  • Verdana
  • Italic
  • Color – white (#FFFFFF).

Step 4:  Working with Navigation

Create another folder in the Header folder name it Navigation.

  • Create a new layer and name it nav_bg.
  • Select Rounded Rectangle Tool(U)
  • Put radius to 10px

Add these Blending Options

Drop Shadow

Inner Glow

Gradient Overlay


For the navigation links I used the links found in 1stwd, you can do the same.

Duplicate the text layer and change the color to black. Using the up arrow key on keyboard press it twice and you get nice embedded effect.

Duplicated layer need to be under White text layer.

Make a selection to our nav_bg by holding CTRL + Click to the layer.

While it is selected:

  • Select Rectangular Marquee Tool(M)
  • Hold Alt so you can see that there is a minus sign beside the plus pointer.

This means that whatever you selected will not be included to the selection. Make a selection from middle across to the top of nav_bg.

Go to Select > Modify > Contract to 1px

Fill it with #141414

Now we will create a divider for each link. Select Rectangular Marquee Tool(M) and create a 1px line.


Step 5: Working with Welcome Message

Create a new folder name it : Welcome

Select Rounded Rectangle Tool(U) radius to 10px.

Add these Blending Options:

Drop Shadow

Inner Shadow


Select Text Tool(T) and put up your welcome message.

Create another folder inside the welcome folder and name it button.
Select Rounded Rectangle Tool(U).

Add these Blending Options to layer:

Drop Shadow

Bevel and Emboss

Gradient Overlay

Select Text Tool(T):

Drop Shadow

Step 6: Working with Slideshow

Create another folder and name it Slideshow.

Create a new layer and name it slideshow_holder.

Select  your Rectangle Tool(U) and do put it the same way as I did:

Apply the same style as we did to our navigation before. You can do this by pointing at the fx on the layer hold ALT and drag it to the layer you wanted to apply. (or just right click on layer > Copy Layer Style and paste it on whatever layer you want),

Try to achieve this selection by using the same step as we made to our navigation. Instead of Rectangular Marquee Tool(M), I used Polygonal Lasso Tool(L).

  • Create a new layer
  • Name it shine
  • Fill it with white color
  • Change the blend mode to Overlay and opacity to 30%.

Make a selection to slideshow_holder.

Go to Select > Modify > Contract to 10px and fill it with black color (#000)

Place the image at the top of the contracted layer. Now CTRL + CLICK on slideshow_holder layer as shown above in the screenshot.

Step 7: Working with Slideshow Links

Here is the preview of what we will be working on:

Select Rounded Rectangle Tool(U) and put radius 10px. Place it as shown in the screenshot below and duplicate layer like 4 more times.

Notice the second rectangle is different. We will use this arrow to serve as an identifier and active section.

Do this by Rasterizing the shape and use Pen Tool(P) to create an arrow headed shape.

The margin between each slideshow link is 5px.

Apply the same style as we had to our navigation. For the identifier apply this gradient overlay:


Again the same way as we did our navigation we’ll do it here too – simply repeat the steps I taught you previously. For our active identifier use color #156f99.

To add more styling to our identifier and make it look even cooler, create another layer and repeat the same step we did to our slideshow_holder layer to achieve shining effect.

But for this time instead of just filling it with white color let’s use white gradient to make it fade from left to right.

For the text here I used Verdana 14px.

Make sure that the identifier is placed on the top of our slideshow_holder layer.

Step 8: Working with Posts

Create another folder and name it Posts. Here is preview of what we will making here:

  • Select Rounded Rectangle Tool(U).
  • Apply the same style as we did to our welcome message.
  • Fill it with #141414.

  • Select Text Tool(T).
  • Put up some text there.
  • Bring up the icons and resize them 16px. (CTRL+T to resize)

Next we will create a date icon besides our title.

Create a rectangle and apply the same styles to it as we did to our identifier in slideshow section.

Add 1px line color #115b7e in blending options Stroke:inside.

Next is our post_thumbnail and text. Select Rounded Rectangle Tool(U).

Grab any sample image you like and link it with this layer.

Select Text Tool and put up there some dummy text, You can use http://www.lipsum.com/.

Change text color to #999999. Also right after the text paragraph let’s add two 1px lines and move one on the top so it gets that embedded effect, same as we did to our navigation separators. Color could be #000000 and #2a2a2a.

Duplicate the post folder 3 times, align distance from each post to be 20px.

Step 9: Working with Pagination

Now when we have got actual blog posts,  it’s time for us to create pagination. Create another folder and name it pagination.

Below you can see the preview of what we are going to create.

  • Select Rounded Rectangle Tool(U)
  • Set radius to 5px.

For this example we will make 7 boxes with 5px distance between each other. I labeled it with 1-7 Verdana text, with size: 14px.

For 2-7 numbers let’s apply the same style as we did to our navigation. Only number 1 would be different because it will serve as active or hover state on our pagination.

For the number 1 background rectangle apply the same style as we did to our identifier.

Step 9: Working with Advertisement Section

Create another folder and name it Advertisement. Select Rounded Rectangle Tool(U). Apply the same style as we did to our welcome message previously.

Grab some advertisement default images from any blog you wish. Center them up with 10px distance from each other .

Step 10: Working with Latest Posts

  • Create another folder and name it Latest_posts.
  • Select Text Tool(T).
  • Copy all the styling  from screenshot below, everything is described and visible there.
  • I added the same divider we used to divide our posts previously, just duplicate these layers and resize them to fit for this section.

Step 11: Working with Footer

Create another folder name it footer.

Select Rectangular Marquee Tool(M) and create a big Rectangle 40px under the pagination, fill it with #141414 color.

Add the same divider as we used previously several times already..just duplicate layers and adjust them to correct width.

Select Text Tool(T) and put here some dummy text. I used the same font size we had for header an the paragraph text before. Also I grabbed RSS icon from icon set and resized it down to
24px and put it right under our dummy text.

For the next step we’ll add categories using the same font, size and colors as for the left footer section. Again I used the same divider for each category.

Now let’s add to Popular Posts section the same styling as we had to our Latest Post Entry before, just copy previous styles.

Here’s what we will creating next – Back to top button.

Select Rounded Rectangle Tool(U) and place it as shown in the screenshot below.

Apply the same style as we had to our navigation section. Now use the same trick we learned previously to achieve the selection shown below
and fill it with color #141414..

Add a divider.

Select Text Tool(T) and write “back to top” using Verdana font with size 12px and  white color (#FFF). Duplicate the text layer.

Change original text to color black(#000) and by using the arrow up tool move it twice to make the text inset.

Now select Custom Shape Tool(U) and find the arrow shape, flip it 90 degrees. (ctrl+t to get transform controls).

Add these Blending Options to arrow layer:

Gradient Overlay

Duplicate the arrow shape and use the same trick as we did to our text inset.

The last thing for us to do is to add copyright info. Place it wherever you want in the footer, but I placed it at the bottom left section of the page.

Ok,We’re done now.  I really hope you enjoyed this tutorial and will keep coming back for more.

If you have any question or suggestions please do leave your comment to let me help you too. Thanks!

Show off your outcomes as well – super excited to see them by the way!

July 06 2010

11:00

Create Really Detailed Dark Web Layout Using Photoshop

Hello! Today I’m gonna teach you how to create a dark template, I tried to explain everything as detailed as I could, but let me know if you didn’t get something right. This is my very first time on writing a tutorial and I am very excited about this chance.

I will do my best to make this tutorial easy for you to follow, just follow screenshots as we move forward step by step and try to understand how to use these techniques in your own designs! Let’s start?

Before we get started download first 960grid system for easy Guideline creation..

Open 960_download\templates\photoshop\960_grid_12_col.psd

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

1st Step- Creating Document & Guidelines

Follow this guidelines Go to view > new guide make sure that the orientation is Horizontal

Repeat until you complete all the guidelines: (20px,50px,70px,450px,480px,608px,638px,766px,796px,924px,974px)

Maybe you’re wondering why I provide that guidelines? Let me answer then –   I measure them in order to make this tutorial easier for you so you don’t have to wonder at the end of tutorial why item placement is different and you couldn’t get the same outcome as I did.

Step 2 – Creating The Header

Create a new layer and name it Top_header Click on Rectangular Marquee Tool(m) Make a selection from the left to right 70px height.

To make this tutorial easier I will not mention height anymore. I will just say 3rd horizontal Guide(3HG). This is based on what we’ve done on first step. OK?

Set the foreground to 2d2d2d, backround 121212.

Click on Gradient Toll (g) drag it from top to center

Step 3 – Creating SiteName and Highlights

Click on Horizontal Text Tool(t) Assuming that we have two-word Site Name. The 1st word is 1st and the second word is webdesigner.

1st word:

  • Size: 36px

2nd word:

  • Size: 24px

Put the SiteName at the Top left side.

1st Word:

Add this blending Option:

Drop Shadow:

  • Blend Mode: Normal
  • Opacity: 75%
  • Angle: 120
  • Distance: 1px
  • Spread: 0%
  • Size: 5px

Gradient Overlay:

  • Style: Linear
  • Color: a2a2a2 – ffffff

2nd Word:

Drop Shadow:

  • The same as 1st Word layer

Gradient Overlay:

  • Style: Linear
  • Color: 9ea5fe – 646cd8

Now for the Highlights create a new layer at the top of top_header and name it Highlights, (Ctrl + Click) the line between the two layer.

Select Highlights layer and set the blend mode to Overlay and Opacity to 0%.

Click on Brush Tool(B). Set the Diameter to 250 px and Hardness 0%

Start clicking at the top of our logo. Select 1st and Webdesigner hit (CTRL + G) to group and name it site_logo.

Now You should get something like in the screenshot below:

Step 4- Creating Navigation Menu

Click on Rounded Rectangle Tool(U), Radius: 20px. Color will not matter because we will applying Blending Options after that anyway.

For the alignment of our navigation it should be placed 320 px from the left side, between the 1st horizontal line and 2nd draw your Shape.

Add this Blending Option:

Inner Shadow:

  • Blend Mode: Overlay
  • Color(#ffffff)
  • Opacity: 75%
  • Angle: 120
  • Distance: 1px
  • Choke: 0%
  • Size: 0px

Gradient Overlay:

  • Blend Mode: Normal
  • Style: Linear
  • Angle: 90
  • Gradient: 121212 – 363636

Stroke:

  • Size: 3px
  • Position: Outside
  • Fill Type: Gradient
  • Gradient: 000000 – 363636
  • Style: Linear
  • Angle: 90

Make sure to check Reverse now and duplicate the shape.

Add these Blending Options on duplicated:

Inner Shadow:

  • The same

Gradient Overlay:

  • Check Reverse

Stroke:

  • Size: 2px
  • Fill Type: Color
  • Color: 000000

You should achieve the same result as in the screenshot below:

To make things organize and easy to remember name the first shape nav_frame and the duplicated shape to nav_btn.

Click on Text Tool(T) and type: Home. I used Futura Condensed font, 14 px Crisp.

Place it in the center of button we made. After doing that, group 3 layers and name group –  Home_btn.

Now for the other navigation button duplicate the Home_btn, move it 15px from the Home_btn, now select nav_btn

Add this blending Option:

Inner Shadow:

  • The same

Gradient OVerlay:

  • UnCheck Reverse

Stroke:

  • The Same

After doing this change HOME to BLOG. For the two remaining buttons just apply the same step. Name it ABOUT & CONTACT.

Don’t forget to rename each folder, then group all btn and name it Navigation_btn.

Done? For now you should have something looks like this:

Step 5- Creating Search Bar

Select Rounded Rectangle Tool (U), 15px from Contact button

Add this Blending Option:

Inner Shadow:

  • Blend Mode: Overlay
  • Color(ffffff)
  • Distance: 1px
  • Chock: 0
  • Size: 0px

Color Overlay:

  • Blend Mode: Normal
  • Color: 191919

Stroke:

  • Size: 1px
  • Position: Outside
  • Fill type: Gradient 000000 – 363636
  • Check Reverse

To make the search button duplicate the Shape go to Layer > Rasterize > Shape and clear all the layer styles. To do this select the layer Right Click > Clear Layer Style.

Select Rectangle Marquee Tool(M) follow the selection done as shown in screenshot below:

Name the 1st shape to search_frame and the duplicated shape to search_btn.

Select search_btn and

Add this Blending Option:

Inner Shadow:

  • The same

Gradient Overlay:

  • Gradient: 353399 – 646cd8

For the search icon Custom Shape Tool(U) select search icon and place the shape at the center of search_btn, name the shape search_ico and group the 3 layers and name it Search.

Step 6- Creating Slideshow

Create a new layer below the Top_header and name it Slideshow_bg.

Select Rectangular Marque Tool(M), make a selection from left to right 3rd Horizontal Guide to 4 th Guide, then fill it with #0a0a0a color.

Add this Blending Option:

Stroke:

  • Size: 1px
  • Position: Inside
  • Color: 202020

Select the Top_header Layer Add this Blending Option:

Stroke:

  • Size: 1px
  • Position: Inside
  • Color: 000000

Result:

Now we will download some free useful stuff Nexus One icon gadget - Here

Create a new layer above Slideshow_bg, name it slide_display. Open it, hide everything so just The Gray Nexus One remain –   (CTRL + SHIRT + E) to merge. Select all (CTRL + A) Copy (CTRL + C), go back to the document (CTRL + V) to paste. (CTRL + T) to transform and place it as shown below.

Click on text tool, choose Helvetica font, size 24px, Crisp and type on “Google Nexus One“.  Now copy some dummy text from Lipsum.com. Copy the Character Setting as shown below:

Now we will be making 2 buttons for ‘discover more‘ & ‘watch video‘. To do this create a new layer above Slideshow_bg. Select Rounded Rectangle Tool(U), draw a shape as shown below.

We will be applying the same style just like our navigation. Copy the layer style of nav_frame. To copy simply Right click > Copy Layer Style. To paste Right Click Shape 1 > Paste Layer Style. Duplicate Shape 1, Copy and Past the Style of nav_btn. Do the same step to shape 2. Name the shape as shown below.

We will change the Gradient color of Slide_btn

Change this Gradient Overlay Gradient to 353399 – 646cd8, grab Text Tool(T), Helvetica Bold, set the size to 12px, Crisp and type some text. Mine is DISCOVER MORE & WATCH VIDEO. Group the layers, name group Slide_btn.

Now we will make Slideshow Thumbnails. 86 x 86 px big. To do that select Rectangle Tool(U), make a shape as show below. Name it thumbnail.

Add this Blending Option:

Stroke:

  • Size: 1px
  • Position: Inside
  • Color: 272626

Create a new layer below the shape and name it thumb_frame, CTRL + Click on the shape mask to make a selection, then go to Select > Modify > Expand 5px. Fill it with #000000, black color.

Add this Blending Option

Drop Shadow:

  • Blend Mode: Overlay color(ffffff)
  • Distance: 1px
  • Spread: 0%
  • Size: 0px

For now we can really see that the effect popping up. Just stick with me and later on we will add the highlights for the Slideshow_bg. To make our thumbnail image, duplicate the slide_display and place the duplicated layer at the top of the thumbnail and link it by pressing CTRL + CLICK the line as shown below.

Group the 3 layers and name it thumbnail. Duplicate 2 times 20 px apart. And reduce the opacity of the group to 50 %.

Now we will create Prev and Next Buttons.

Select Rounded Rectangle Tool(U). Set the Radius to 20px. Follow the image shown below.

Add this Blending Option

Inner Shadow:

  • Distance: 1px
  • Choke: 0%
  • Size: 5px

Gradient Overlay:

  • Gradient: 313131 – a7a7a7

Apply to both arrows and don’t forget to name it next and prev.

Now lets work on our Slideshow_bg. Create a new layer above and name it noise link it to Slideshow_bg. Add another layer above and name it Highlights.

Select the noise layer, set the foreground color to #0a0a0a and fill it using Paint Bucket Tool(G) or by hitting (ALT + Backspace).

Go to Filter Noise > Add Noise > Amount 1% and set the opacity to 30%

Select Highlights Layer, set the layer mode to Soft Light, Opacity to 40%.

Select Brush Tool(B). Master Diameter to 600 px, Hardness 0% and you are ready to start.

Click in the middle of the slide show and at the top of Nexus One. We’re done with slideshow area. Before moving to the body area don’t forget to Group, what we have made and name it Slideshow_Section.

Step 7: Creating Body Background

Create a new layer above the Background and name it body_bg.

Grab the Rectangle Marquee Tool (M), make a selection in the remaining white areas. Grab Gradient Tool(G), set it to be Radial Gradient, change the foreground to #292929 background #121212. Start to drag from the top to the bottom.

Create a layer above body_bg, link it to body_bg and name it noise. Do the same step as we did on our Slideshow_bg.

Step 8- Dividing the body into two section

Now will divide the body into two parts: Left Side bar and the Content. Grab the Line Tool(U) 1px with white black color.

Set the layer mode to Soft Light. Make another line besides the black line by hitting ALT + ARROW RIGHT. Set the layer to Soft Light and Opacity to 50%. Group both shape and name it Divider.

Step 9- Creating Left Side Bar Recent Posts

To our Leftside Bar for this tutorial we will be making Recent Post and Flickr images.

Grab Text Tool (T),  Font Helvetica, 18 pt, Smooth. This is for our Header. For our posting titles change the size to 12 pt, None. Refer to image below for the positioning.

Create a new layer below the text and name it post_bg.

Grab Rectangular Marquee Tool (M), make a selection as show in the image.

Fill it with #0a0a0a color. Set the layer to Overlay, Opacity to 15%. Do the same in every Post Title. Group all the layers we made and name it Recent_posts.

Step 10- Creating Left Side Bar Flickr

The same font and size to Step 9, let’s make the thumbnail of flickr photos. Duplicate the Thumbnails on what we’ve done on our slide show and resize it about 65 x 65.

Duplicate the divider. Transform it horizontally, place and resize as shown in the screenshot.

Step 11- Creating The Content

For this step we will be making a common post on a blog that will have its Post title a little info and an image thumbnail.

For the image thumbnail just the same on Flickr thumbnails Grab a copy on it and Resize 120 x 120. For the Post title Set the font size to 14pt,  Smooth Color(#bebebe). For the info, set the font size to 12pt None.

Additional to our post, download a free social icons as you like.

Here what I’ve done.

Group all layers and name group as Post. Duplicate 2 times and place it 20 px below.

Step 12- Creating the Footer

Below the last post create a layer and name it footer. Grab Rectangle Marquee Tool(M), Set the foreground color to #0a0a0a.

Make a selection from the bottom left to top right of the last horizontal guide and fill it with the foreground color.

Add this Blending Options

Stroke:

  • Size: 1px
  • Position: Inside
  • Color: 202020

Grab Text Tool(T), set it’s size 12pt, None. Type in your Copyright.

Finally were done.

I hope you enjoyed this tutorial and you could understand my explanations, I am not native English-speaking but I tried my best to teach you some great tips. Maybe you have some comments what should be improved?

Maybe some steps were not enough good explained? Let us know –  we are here to help!

April 15 2010

14:00

60 Web Design Photoshop Layout Tutorials From 2010

Preview-web-design-layout-tutorials-from-2010 copyWant to get some new web designing skills right now? Ever wondered how latest trends in web design are actually created and want to discover it?
Spare several hours of your time and go through this huge list of web design Photoshop tutorials! And you don’t have to worry about those tutorials being outdated, because all of them are created in this year 2010! Time to keep up with latest trends and learn something new! Let’s go!

1. Business Layout

Business-layout-web-design-layout-tutorials-from-2010

2. Web Design Layout #14

#14-web-design-layout-tutorials-from-2010

3. Create a Clean and Professional Web Design in Photoshop

Create-clean-and-professional-web-design-in-photoshop-web-design-layout-tutorials-from-2010

4. Create a Slick and Minimalist Web Layout in Photoshop

Create-slick-minimalist-in-photoshop-web-design-layout-tutorials-from-2010

5. Create a Wooden Grunge Portfolio Web Layout in Photoshop

Create-wooden-grunge-portfolio-in-photoshop-web-design-layout-tutorials-from-2010

6. Design a Dark Business Layout

Design-dark-business-web-design-layout-tutorials-from-2010

7. How to Create a Web Hosting Layout

How-to-create-hosting--web-design-layout-tutorials-from-2010

8. Create a Business Web Template

Business-layout-web-design-layout-tutorials-from-2010

9. Design a Clean Business Layout

Design-clean-business-web-design-layout-tutorials-from-2010

10. How to Create a Software WebLayou

How-to-create-software-tweb-design-layout-tutorials-from-2010

11. Portfolio Lyout Ceated Wth Jeans Texture

Portfolio-created-with-jeans-texture-web-design-layout-tutorials-from-2010

12. Create a Smple Yet Attractive Web Layout

Create-simple-yet-attractive-web-design-layout-tutorials-from-2010

13. Create a Professional Web 2.0 Layout

Create-professional-2-0-web-design-layout-tutorials-from-2010

14. Create a Grungy, Translucent Web Portfolio Design

Create-grungy-translucent-portfolio-web-design-layout-tutorials-from-2010

15. Design a Bold and Vibrant Portfolio

Design-bold-vibran-portfolio-web-design-layout-tutorials-from-2010

16. Design a Sleek Bokeh Styled Portfolio

Design-sleek-bokeh-styled-portfolio-web-design-layout-tutorials-from-2010

17. Design a Sleek Textured Blue Portfolio

Design-sleek-textured-blue-portfolio-web-design-layout-tutorials-from-2010

18. Create a Chalkboard Style Wordpress Layout in Photoshop

Create-chalkboard-style-wordpress-in-photoshop-web-design-layout-tutorials-from-2010

19. Deep in Space Portfolio Layout Design in Photoshop

Deep-in-space-portfolio-in-photoshop-web-design-layout-tutorials-from-2010

20. Create a Clean and Classy Web Design in Photoshop

Create-clean-classy-in-photoshop-web-design-layout-tutorials-from-2010

21. Clean Textured Wordpress Style Layout in Photoshop

Clean-textured-wordpress-style-in-photoshop-web-design-layout-tutorials-from-2010

22. Clean and Minimalistic Portfolio Layout in Photoshop

Clean-minimalistic-portfolio-in-photoshop-web-design-layout-tutorials-from-2010

23. Beautiful Music Streaming Website Design in Photoshop

Beautiful-music-streaming-website-in-photoshop-web-design-layout-tutorials-from-2010

24. Simplistic Black and White Portfolio Layout in Photoshop

Simplistic-black-white-portfolio-in-photoshop-web-design-layout-tutorials-from-2010

25. Clean and Creative WordPress Style Theme in Photoshop

Clean-creative-wordpress-style-theme-in-photoshop-web-design-layout-tutorials-from-2010

26. Photo Gallery Website Layout in Photoshop

Photo-gallery-website-in-photoshop-web-design-layout-tutorials-from-2010

27. Light and Colorful Grunge Portfolio Layout in Photoshop

Light-colorful-grunge-portfolio-in-photoshop-web-design-layout-tutorials-from-2010

28. Beautiful and Clean Portfolio Layout in Photoshop

Beautiful-clean-portfolio-in-photoshop-web-design-layout-tutorials-from-2010

29. Simple Business Style Portfolio Layout in Photoshop

Simple-business-style-portfolio-in-photoshop-web-design-layout-tutorials-from-2010

30. Simple iPhone Application Website Layout in Photoshop

Simple-iphone-application-website-in-photoshop-web-design-layout-tutorials-from-2010

31. How to Create a Distinguishable Textured Web Layout in Photoshop

How-to-create-distinguishable-textured-in-photoshop-web-design-layout-tutorials-from-2010

32. Learn How To Create A Clean Layout In Photoshop

Learn-how-to-create-clean-in-photoshop-web-design-layout-tutorials-from-2010

33. Designing Cool Interface for Magazine Portal

Designing-cool-interface-for-magazine-portal-web-design-layout-tutorials-from-2010

34. How to Make a Vibrant Portfolio Web Design in Photoshop

How-to-make-vibrant-portfolio-in-photoshop-web-design-layout-tutorials-from-2010

35. Create a Simple Layout For Architecture Or Real Estate

Create-simple-for-srchitecture-or-real-estate-web-design-layout-tutorials-from-2010

36. Create a Hosting Layout In Adobe Photoshop

Create-hosting-In-adobe-photoshop-web-design-layout-tutorials-from-2010

37. Design an Elegant Rustic Layout For Hotels Or Restaurants

Design-elegant-rustic-for-hotels-restaurants-web-design-layout-tutorials-from-2010

38. Design a Light WordPress Theme In Photoshop

Design-light-wordpress-theme-in-photoshop-web-design-layout-tutorials-from-2010

39. How to Create the Interior Design Layout

How-to-create-interior-web-design-layout-tutorials-from-2010

40. Create a Racing Website

Create-racing-website-web-design-layout-tutorials-from-2010

41. How To Create a Rockin’ Website Layout In Photoshop

How-to-create-rocking-website-in-photoshop-web-design-layout-tutorials-from-2010

42. Create a Portfolio Website In Photoshop

Create-portfolio-website-in-photoshop-web-design-layout-tutorials-from-2010

43. Create a Business Web Layout In Photoshop

Create-business-in-photoshop-web-design-layout-tutorials-from-2010

44. Learn How to Create a Marketing/SEO Web Layout In Photoshop

Learn-how-to-create-marketing-seo-in-photoshop-web-design-layout-tutorials-from-2010

45. Create a Modern Photoshop Template For Joomla, WordPress or Drupal

Create-modern-photoshop-template-for-joomla-wordpress-drupal-web-design-layout-tutorials-from-2010

46. Create Portfolio Web Layout In Photoshop

Create-portfolio-in-photoshop-web-design-layout-tutorials-from-2010

47. Create a Classy Web Template In Photoshop

Create-classy-template-in-photoshop-web-design-layout-tutorials-from-2010

48. How to Create an Amazing Grunge Layout

How-to-create-amazing-grunge-web-design-layout-tutorials-from-2010

49. How to Create a Layout For Your One-Page Portfolio?

How-to-create-for-your-one-page-portfolio-web-design-layout-tutorials-from-2010

50. Create Stylish Retro Website Template Using Photoshop

Create-stylish-retro-website-template-using-photoshop-web-design-layout-tutorials-from-2010

51. Design a Corporate Business Layout

Corporate-business-web-design-layout-tutorials-from-2010

52. How to Do a Fancy Layout For a Graphic Design Blog Using Photoshop

How-to-do- fancy-for-graphic-blog-using-photoshop-web-design-layout-tutorials-from-2010

53. How to Find Inspiration and Design the Layout of a Website

How-to-find-inspiration-website-web-design-layout-tutorials-from-2010

54. Create a Wooden Background Website Layout in Photoshop

Create-wooden-background-website-in-photoshop-web-design-layout-tutorials-from-2010

55. Design Clean and Colorful Web Layout

Clean-colorful-web-design-layout-tutorials-from-2010

56. How to Design a Photolog Theme For WordPress

How-to-photolog-theme-for-wordpress-web-design-layout-tutorials-from-2010

57. Create Landscape WordPress Theme

Create-landscape-wordpress-theme-web-design-layout-tutorials-from-2010

58. Create a Beautiful and Creative Blog Design in Photoshop

Create-beautiful-creative-blog-in-photoshop-web-design-layout-tutorials-from-2010

59. Create a Clean Blue Portfolio Design in Photoshop

Create-clean-blue-portfolio-in-photoshop-web-design-layout-tutorials-from-2010

60. Create a Gnarly Snowboarding Themed Web Design

Create-gnarly-snowboarding-themed-web-design-layout-tutorials-from-2010

February 15 2010

20:40

Design Trend Showcase: 30 Horizontal Websites

Horizontal websites have been increasing in popularity over the past year or two. Although the approach isn’t a good fit for every project, a horizontal layout can provide designers with an opportunity to showcase some creativity and to break out of the box. As you may notice from the sites showcased here, portfolio sites of designers and photographers are probably the most likely type of site to use a horizontal layout right now. Here is a look at 30 sites for your own inspiration.

Aubrey Edwards

Aubrey Edwards

We Shoot Bottles

We Shoot Bottles

IndoFolio

IndoFolio

Sarah Rhoads

Sarah Rhoads

Ryan Cox USA

Ryan Cox USA

Farmhouse Fare

Farmhouse Fare

f$ dsign

f$ dsign

Hvass & Hannibal

Hvass & Hannibal

LoveBento

LoveBento

Swear Words

Swear Words

Make Pretend

Make Pretend

Stephane Tartelin

Stephane Tartelin

Eric Johansson

Eric Johansson

Beatriz Carosini

Beatriz Carosini

Egofoto

Egofoto

Josh Tilton

Josh Tilton

Toothjuice

Toothjuice

Artcore Illustrations

Artcore Illustrations

Maureen Fischinger

Maureen Fischinger

One Fine Day

One Fine Day

Tom Hoops Photography

Tom Hoops Photography

Crtl + N

Crtl + N

Carrot Creative

Carrot Creative

Jason Love

Jason Love

Graphic Therapy

Graphic Therapy

Front End Design Conference

Front End Design Conference

Oskar Kron

Oskar Kron

Faub

Faub

Daniel Stenberg

Daniel Stenberg

Hasrimy

Hasrimy

For more design inspiration please see:

February 09 2010

10:10

Bring Your Websites Alive: From Boring To Exciting!

Some have a passion for web design; others consider it a mere task! This article is for those who consider web design more than just a task, in fact, it is meant for those who always have a passion to create something new! Bringing together elements of design and technicality is an exciting task, if you love website design that speaks and conveys its message effectively.

The approach taken towards design is the key to the entire site. This is also the reason why some websites grab user-attention whereas others tend to drive users away from the page.

Few Points that should be considered:

  • The design should attract attention
  • A user should find the website engaging
  • The content should convey the right message
  • The website should be user-friendly

1. The design should attract attention

Simone Moreno

The design is what speaks more than the words when a user first looks at the site. It is therefore essential you have a creative website without all the clutter. This website example has a very attractive and well-balanced approach. Although the main image is rather heavy, it has been balanced appropriately with the colors and tones used. The site is about a musician, Simone Moreno. It gives information in a neat and clutter free way although there is plenty of creativity involved in the way the images are presented.

Bebop Jeans

In this example, the website is all about an attractive color and design form usage. The elements appear slowly on the screen as the whole design takes shape. There is an interesting balance of colors and forms used. This apparel brand ensures users are motivated to explore the site.

2. A user should find the website engaging

Monoface

This example is about a Minneapolis-based company which creates innovative communication solutions for its clients. However, instead of presenting the company information in the usual manner, it has chosen an engaging way to interact with clients. The features of the main face shown in the image above can be changed with mere clicks to reveal some truly hilarious options. This is a great way to engage users whilst conveying about the creativity of the company and the kind of portfolio it will boast of!

Tony D’Orio

It can take some time to figure out this website, yet this is the very factor that makes one stay on the page. A collection of some amazing photographs have been put together by the photographer. As a users clicks on an image, the black and white image changes into color and is further enlarged. The interaction happens in an interesting way that keeps the users engaged whilst browsing the site.

3. The content should convey the right message

EValueShop

The content in a website should target its users keeping in mind the very short attention span. The message should be such that it attracts the attention and causes a user to browse the site further. This shopping website obviously has a lot of content to be presented with regards to the product. Instead of a staid presentation which might even cause a user to go away from the page; it has made use of an interesting display through the use of interactivity.

Costa Navarino

This website has creative usage of Flash. It engages the users whilst the destinations and other related information is displayed. Although, there is a usage of Flash interactions, the main message is not lost. There is a good balance between design and the topic.

4. The website should be user-friendly

Madison Communications

A website should present all its main sections in a clear manner. This is mainly to catch the attention of the user as the time factor is very limited. A website with a boring home page or site map will definitely not hold the attention span of any user. In this example, the various media departments are shown in a creative site map for the advertising firm. As the user traverses through the different headings, the cartoon character changes according to the topic.

Hoodie Remix

A neat and simple design is what this website is all about. Yet, the users are kept engaged on the site as they can create and design their own style for the hoodie. The home, design, gallery and about us section are kept separate so that a user can navigate easily.

Final Thoughts

The common thread between all these examples:

These examples have conveyed the basics of an attractive and exciting website. Upon close observation, the common factor amongst all is Website Interactivity and Creativity.

The Basics of Website Interactivity:

Interactivity is the next step in the evolution of web interfaces. Here, we can take an example. A radio button or hyperlinks are elements of a web interface. Contrast these with a 3Dimensional Cube or a 3Dimensional Flip Book, both being examples of interactivity. They are complete experiences of doing stuff that engages users with web pages whilst the user is going through the information displayed on the website. This is what makes these examples stand out. The use of interactivities woven very creatively with website content makes them successful in capturing user-attention.

This is because, with interactivity, you can get users to stay longer, engage better and return sooner to your websites. However, some of the most commonly known ways to achieve interactivity involve programming. This can be time consuming and tedious. Interactivity thus created can be hard to maintain. On the other hand, Rapid Interactivity – a new paradigm – allows web masters to add interactivity to websites quickly and easily and also permits easy customization. This is a new phenomenon that most web designers are choosing to employ.

Interactivity can take on a number of different levels of complexity, depending on the needs of the site and the tools used to create the interactive features. These tools require programming of interactivity which is complex to code and difficult to maintain. Rapid programming is about creating interactions within minutes through customization.

Interactivity is all about keeping users on a web page!

Website interactivity is fast catching the fancy of many web designers who want to make their websites stand out! I guess it’s time to make your websites turn exciting from plain boring!

Let us know what do you think about interactivity and excitement in web design.

Related posts:

  1. 50 Superb 3D Flash Websites You Must See!!!
  2. 35 Websites To Teach You How To Use CSS Effectively
  3. Showcase Of 50 Best Inspiring Gaming Websites
  4. 50 Gorgeous Flash Websites You Definitely Should See
  5. 53 Promotional Websites To Gain Traffic Quick And Easy

February 08 2010

10:10

Learn How To Create A Clean Layout In Photoshop [Very Detailed]

In this Photoshop tutorial we’ll learn how to create a clean looking website layout, we’ll also be using 960s grid system to keep everything aligned. This is very detailed tutorial, so if you have basic knowledge about Photoshop you should be able to easily keep up and let me guide you through this layout creation process.  I am explaining all small steps and every step is shown by visuals as well, good luck!!

Final Outcome

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

Creating New Document

We’ll be using 960s Grid system (Download here ) once downloaded open up the file 960_grid_12_col.psd; then right click on the “Background” layer >> Layer from Background. and call it “bg”.

Creating the background

Let’s starting creating our background, select the Gradient Tool (G) in the Gradient Editor panel set your colors from #dcdcdc to #ffffff:

Now with a Linear Gradient drag from down to top. Use the image below for reference:

You should have something like this:

Creating the logo area

Before we start creating our logo we need to set upper borders for our design, so we’ll drag a new Horizontal Guide after 50px. to do that go to View >> New Guide and follow with the image below:

It’s time to create the logo tag; we’ll start by creating a selection – I personally have use Polygonal Lasso Tool (L) – make about it 280×40px try making something similar to this:

Now click Shift+Backspace to fill it (with any color just in case).

We’ll give this tag a smooth gradient; from #efe352 to #db1b47 – check the image below:

Write your name with the following settings:

  • Font: Rockwell (it’s famous just Google it!)
  • Size: 46px
  • Type: Regular
  • Color: #1e1e1c
  • Anti-aliasing: Strong

Here’s how it should look!

Now create another selection for the catch tag, about 270×40px, something like this:

Fill it, and give it the same smooth gradient – that we’ve given to the name tag – and we’ll just add a Drop Shadow:

Now add your kickass catch with the following settings:

  • Font: Rockwell
  • Size: 33px
  • Type: Regular
  • Color: #1e1e1c
  • Anti-aliasing: Strong

Here’s how it should looks!

Before we move forward to the next step, make sure that all your layers are well-organized, and grouped. Here’s how mine looks:

Creating the navigation

We’ll start by creating a small rectangle, select the Rounded Rectangle Tool (U) and create a rectangle of about 65×30px – Radius: 5px.

Now let’s give it Inner Glow, Gradient Overlay, and Stroke. see the image below!

Add some navigation text, with these colors: #ffffff – #1e1e1c:

Select the navigation text layer and the small rectangle layer, then click on Align Vertical Centers in the control bar.

Before we move to the next step, group your layers!

Creating the featured designs area

First off let’s set our borders; drag a new guide at the end of the catch tag, leave 50px and drag a new one!

Writing welcome text

Write some text, with the following settings:

  • Font: Rockwell
  • Size: 30px
  • Type: Regular
  • Color: #e8204e – #676666
  • Anti-aliasing: Strong

Drag yet another guide after 50px:

Creating images of featured designs

We’ll start working on the images; create a selection of 250×150px and align it like the following:

Fill your selection with any color, and give it a Stroke with the following settings. the call it “pic_holder”.

Let’s add an image of a featured design, go to File >> Place and place an image from your computer.
Make sure that the layer of the image is right above the layer (“pic_holder”) of the rectangle we created
Now right click on the image layer >> Create Clipping Mask.

It’s time to create a shadow for our image! with the Elliptical Marquee Tool (M) create a selection like the one below; set your foreground to #1e1e1c then click Shift+Backspace to fill it.

Now go to Filter >> Blur >> Gaussian Blur – Radius: 2px.

Go ahead and make another copy of the image we’ve created and align it to the right.

We’ll make the center image a bit bigger; so create a selection of 340×200px and align it like this:

Repeat the same previous steps. finally you should have something like this:

Don’t forget to group all your layers!

Creating the sliding arrow

Now let’s create the sliding arrow, use Custom Shape Tool (U) to create an arrow with this color value #e8204e.

Now give it the following layer styles:

To align our arrow, we’ll select its layer and the layer “pic_holder” then click on Align Vertical Centers in the control bar.

Make a copy of the arrow and align it to the right.

Creating the upper content area

Start by dragging a new horizontal guide at the end of the featured area, leave 50px and then drag another one!

Add some text as a title (I’ve written “who we are”) use the image below for reference.

Drag two new horizontal guides according to the following image.

Add some text with these character settings.

Now drag yet another horizontal guide according to the following image.

Using the Rounded Rectangle Tool (U) create a rectangle of 100×30px – 5px radius. Give it the following layer styles.

Now create a circle and an arrow inside it.

Write the word “read more” with this color value #3e3e3e and give a Drop Shadow according to the following image.

Let’s create the separating line! create two lines next to each with the following color values: #ffffff – #979797:

Then align it according to the following image

Now write a title for the right part (I’ve written “featured services”):

Select the Ellipse Tool (U) and create a circle of 20×20px (fill it with any color) then give it the following layer styles:

Using the Custom Shape Tool (U) create a check shape and fill it with #dcdcdd:

Let’s give create a shadow for it! create a selection (like the one below) and fill it with #000000 then go to Filter >> Blur >> Gaussian Blur – Radius: 2px.

Add some text of a featured service, character settings goes according to the following image:

Make two copies of the featured service:

To align the three services, put each of them in a separate group, select the three groups and then click on Distribute top edges:

Creating the lower content area

We’ll start by dragging a new horizontal guide after 50px:

Write another title, and drag two guides, use the image below for reference:

Then drag another guide according to the following image:

Now write some text according to the following images:

Duplicate the text you’ve written, then align it like the following:

To create the separating line; create two lines on top of each other, fill them with #ffffff – #8d8d8d:

I think the best way to align the separating line is to do that visually. However, I have my own way of doing that! create a rectangle (like the pink one below) and while having the layer of the rectangle and the separating line selected; click on Align Vertical Centers in the control bar.

See how it works! ;)

Now repeat the same previous steps to get something like this!

Creating Social Media links

Now add the third title, Facebook icon, and write a link beside it. You can download the social media icons from deviantART – they’re called Aquaticus.Social by Junwei.

While having the link layer, and the icon layer selected click on Align Vertical Centers.

Make three copies of what we’ve created in the previous step. put each of them in a separate group, then select the four groups and click on Distribute Top Edges.

Creating the footer area

Drag a final guide after 50px.

We’ll start by creating another separating line, create two guides on top of each other and fill them with #ffffff – #8d8d8d.

Then align the separating line like following:

We’re almost there! add your sub navigation text according to the following image:

Finally add your copyrights text with the same character settings:

Conclusion

There we have it! We’ve created a clean and simple layout in Photoshop. Hope you enjoyed it!

You can download free, layered *.PSD version here!

Related posts:

  1. 1st Photoshop Web Design Professional Layout Tutorial
  2. How To Create Great Typographic Wallpaper In Photoshop
  3. 90 New And High Quality Photoshop Web Layout Tutorials
  4. 48+ Greatest Adobe Photoshop Keyboard Shortcuts
  5. Night Before Christmas : Photoshop Tutorial And WallPaper

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.
(PRO)
No Soup for you

Don't be the product, buy the product!

close
YES, I want to SOUP ●UP for ...