Step 1
Make a new Document in photoshop of size 500*200
Set it background to #08181e like following
I choosed more height just for easiness
Step 2
Make new rectangle shape using Rectangle tool ,Shortcut “U” just like following figure
Set the blending property of this layer by going on the layer palatte .(Right clicking on that and blending option)
or by going on the Layer>Blending option menu.
Following setting
A)Color Overlay
B)Gradiend overlay
C)Stroke
After doing all of those settings Set the opacity of this layer to 23% and you will see the following outcome
Step 3
Now with help of text tool write “HOME “ and set its color to #4b6b77
then you will see the following image
Step 4
Now we need some border which seprate the two links
Draw another rectangle on a new layer like following image with color #283b4c
Step 5
Now we have to change the blending of this layer
A)Inner glow
B)Gradient Overlay
C)Satin
E)Stroke
and set the opacity to 17%
Now you will see the following figure
Step 6
Duplicate and arrange the layers according to your use
i got the following appearence
Final out come
Design a Clean and Colorful Portfolio in Photoshop
This portfolio design focuses on using typography to grab your readers’ attention. We’ve gone for a simple style on this one, with two primary colors and minimal layer styling to make it easier to read. It’s perfect for a personal design portfolio. We’ll show step-by-step how we did it in this tutorial.
This tutorial will show you how to create a minimalistic portfolio in Photoshop. This web layout allows you to display your web design work on the front page as well as take full advantage of fonts by using large typography to grab your readers’ attention. Don’t forget to download the free PSD of this web design portfolio at the end of this tutorial!
Final Product:
Step One:
Create a new Photoshop document, 1200×660 px. Set your color palette to: foreground- #27343c and background- #000000. Select your Gradient Tool (G) and drag from the top of your document to the bottom, vertically. Name this layer “Main BG” as this is your main background layer.
Now that we have the base of our design we’ll move on to the next step.
Step Two:
In this step we’re going to create the template background, or the secondary background. This is where your content will be displayed. Select the Rounded Rectangle Tool (U) and use these settings:
Now create a new rectangle sized about 1000×560 px. If you used the same settings, you’ll only see an outline of your new rectangle. To make it an actual layer you need to click the Paths box and right click “Work Path” then select “Make Selection”. This will make a new selection based on the shape of your path and you’ll see the marching ants. Make sure to create a new layer for this shape (Layer > New > Layer)!
Select the Paint Bucket Tool (G). Using the color #1978a2, fill the new layer. Name this layer “Content BG”
Step Three:
Time to make the navigation bar, select your Rounded Rectangle Tool (U) again and create a new shape sized 1025×60 px. Follow the same steps as above to convert this shape into a selection. Once you’ve converted it into a selection, create a new layer (name it “Nav Bar”) and fill the new layer with #ff9000. (The navigation bar should stick out over the “Content BG” layer).
To give the navigation bar some depth we’re going to add a drop shadow, manually. Here’s how to do it. First, create a new layer and name it “Shadow Bottom” place it underneath your “Nav Bar” layer.
Make sure you’ve selected the Foreground to Transparent Gradient and set the “Shadow Bottom” layer opacity to 70%. You can duplicate this layer and Edit > Transform > Flip Vertical and move it to the top of the navigation bar to make a top shadow also, this is optional though.
Now we’re going to add a 3D shadow effect to make the navigation bar appear to pop out of the background and over our “Content BG”. Select the Polygonal Lasso Tool (L) and create a selection like this:
Create a new layer for this selection and fill it with #ff9000. Name this selection “3D Shadow”. We’re going to burn/dodge it to give it a more realistic look. Select the Burn Tool (O) and burn the 3D Shadow layer to make it slightly darker than the “Nav Bar” layer. Put this layer underneath the “Nav Bar” layer we previously made. Duplicate it and flip it horizontally (Edit > Transform > Flip Horizontal), move it to the other side and you’ve got your shadow effect.
Burn Tool settings
Add some text to your new navigation bar and add a drop shadow to make the text pop a little bit. We used the “Nevis” font which can be downloaded from our list, here and here’s the settings we used:
The text by itself works great for a navigation, but it’s kind of boring… let’s add some icons! Venture here and download the Function Icon Set. Use whatever icons you like, this is what we did:
Let’s add the headline to the center of the layout… this is going to give your clients their first impression of you so make it worthwhile. Here’s what we did:
Time to take a breather, this is where we all should be (or close to it!):
Step Four:
We’re going to make a “Top Bar” so we can add our latest tweet from Twitter and our logotype. To do this, follow this picture (it’s pretty straight forward).
So while you were following that last picture, we were busy adding more stuff to the layout. Here’s what we did:
Quick snapshot…
Oooohhh.. pretty.
Step Five:
Time to add our latest work, we’re showcasing four of our last projects but you can certainly add more. We also added some slight effects to the images so it doesn’t look like they were just slapped in there. Crop (C) some of your latest work into a 200×90 rectangle and add it to your layout, then apply these layer styles:
Inner Shadow
Outer Glow
Stroke
Now we’re going to add some information below the navigation bar. Maybe some of your most frequented websites, recent blog posts, testimonials? Check out what we did:
We hope you enjoyed following this tutorial and we hope you like the outcome. We tried to go with a more image-based tutorial this time (unlike our others which were focused more around text directions) so let us know if it was easier to follow! Thanks for reading and don’t forget to download the free PSD below!
Copyright by : http://tutsarena.com
0 nhận xét:
Post a Comment