Dark navigation

or

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

Bookmark It

Photoshop brushs | Blen | pattern | stock | photoshop

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

Continue Reading...

Create a Cool 3D Smashed-Looking Text

In this tutorial you’ll learn how to create the image above..

The things you’ll need are Adobe Illustrator and Autodesk 3ds Max..

1 - So let’s start: open up Illustrator, create a new Web Document and choose any dimension you want.. i’m going with a 1000px square image.. Now, with the Type Tool (press T), write any text you want, but not too much.. I’ve chosen “I MAKE THIS T-SHIRT LOOK GOOD” so that it could be printed on a t-shirt.. I want the text to be in a rather square layout… So, i’ve wrote each line of text in a single layer that i can edit freely.. Choose any font you want, but i recomend a strong bold one.. I used the Century Gothic, bold…

2 - Well, we now have the text, but i’m still not happy with the font’s width.. So, let’s add some thickness to the letters.. With all the layers and the text selected press Ctrl-Shift-O (which will transform all the text in paths that can be editable).. Now, to increase the thickness of the letters go to the Object menu and in there, Path, and then Offset Path.. In the options, activate the Preview option and change the Offset value until you’re happy with the letters.. i’ve chosen 3 px.. but it depends on the font size you currently have.. Be careful not to lose some of the letters’s details when the font is too thick.. Now just press Ok.. Making this created duplicated paths of all the letters but thicker.. so, actually, you now have two of each path.. Just open the Direct Selection Tool (A) and drag one of the inner paths out and you’ll see there are two.. press Ctrl-Z to undo that and go on to the next step.. we’ll take care of the “clones” later..

3 - We now have to bring the letters more close together.. just drag all of them together.. and then select them all with the Selection Tool (V) and press the Horizontal Align Center button in the bar above the image.. So, if we look at the image, we’ll see that it looks poor and lacks style.. To correct that, we’re going to change the size of some of the lines of text to add some dynamic.. I’ve scaled down the “THIS T-SHIRT” and increased both the “I MAKE” and the “GOOD” parts.. Hold down the Shift and Alt keys while resizing so that the image stays in its place while resizing.. Also hold the Shift key after you started moving some of the text so that it only moves in a perfect line… Look at my image to see how i’ve arranged the text.. In the next step, we’re going to merge all the text into the same layer, so, if you think that your image needs any change, this is a good time to change it..

4 - To merge all the paths into one, we first have to merge all the layers.. To do that, select all the layers and press the button i show on the screenshot and select Merge Selected.. Now we have to join all the paths.. so, with the Selection Tool (V), select all the paths and press Ctrl-Shift-F9 to show the Pathfinder window and in there press the Add to Shape Area and then the Expand button.. ok..

5 - Now we’re going to create all the broken parts in the text.. To do this, lets first place the text shape in the center of the image so that it can be more easily manipulated later, to do this, just select it with the Selection Tool (V) and press Ctrl-C and then Ctrl-V to copy it and then paste it.. the new shape that was created is rigth in the center of the image so just select and delete the other one.. Now.. tricky bit.. open up the Pen Tool (P) and draw a triangle like the one on my screenshot above.. Then select both the triangle and the text and Copy them (Ctrl-C) and Paste them (Ctrl-V) to duplicate them.. Still with the new two shapes selected, go to the Pathfinder window and click on the Intersect Shape Areas and then in the Expand.. This will create a shape that is only the intersection of the text and the triangle.. now, select the text shape and the other triangle and in the Pathfinder window press the Subtract From Shape Area end the Expand.. ok.. This created the layer of text except the triangle part.. Now just select the intersection part and make it smaller and rotate it a bit and place it like its a glass shard exploding away from the rest of the glass.. like in my picture.. Select the two shapes and press the Add to Shape Area so that they become the same again.. Ok, now that you know how to do this, repeat it some more times around the text to make it look like it exploded or something like that.. To sum up: create the triangle, select both, duplicate, intersect and expand, select the other two, subtract and expand, resize and rotate and move, select both and add them together.. ok..

6 - Now starts the 3d part… Open up 3ds Max.. and while it loads all its stuff, go to Illustrator again and with the shape ready, all the parts added toguether, got to the File menu and Save As.. select where you want to save the file and its name and keep the file type as .AI, now a window opened and in there select Illustrator 8 as the version.. Press ok and accept all the following messages.. Thats it for this step…

7 - 3ds Max must already be open by now, so, open it and in the File menu, select Import, and in the new window, select the file type .AI and go to the place where you saved the Illustrator file and open it.. Press Ok in the two dialogs that follow and now you have our shape in 3ds Max.. With the Rotate Tool, rotate the shape according to the X coordinate 90º so that it stands up perpendicular to the floor.. Now right-click on the shape and press Convert To and then Editable Poly.. Now, in the Modify Panel, select Polygon (the red square) and press Ctrl-A to select all the polygons in the shape.. Still in the Modify panel, find the Edit Polygons section and in there press the black square beside the Extrude button, and in the dialog box insert 10 or more and press Ok..

8 - We’re now going to make the object smoother by adding to it a modifier.. Press Ctrl-A to select all the polygons and in the Modifier List select Smooth, and in its options, activate the Auto Smooth and the Prevent Indirect Smoothing.. Now, let’s change the material to a grey one.. Open up the Materials window by pressing M and in there select any of the spheres and press the button that says Assign Material to Selection and close the materials window..

9 - Let’s set up the render.. Press F10 to open up the Render Setup window and in the Common panel, go to the Output Size section and change the render size to a bigger one, like 1600 for 1200 (see my image).. You can now close the Render Setup window..

10 - Well, the image doesn’t look that interesting, so, we’re going so spice up the camera view a little… To do that, change the view into a 3/4 side view like in my image.. and continue in the next step..

11 - Now, lets increase the Field of View.. Select the Field of View tool and click in the window and drag the mouse down so that our object looks like it is a bit far from us.. You can exagerate a little.. Now the object is far away, so, with the Zoom tool zoom it in closer and you’ll see the effect of the Field of View.. The perspective is a little distorted.. Try to place the camera like in my image..

12 - We have to save the current view, so that we can get back to it later, so, in the Views menu, select Save Active Perspective View.. and now press F9 to start the rendering process.. when it finishes, save the image as a PNG file.. In the Window that shows up, use this settings: RGB 24bit and Alpha Channel.. close the rendering window and lets get back to our 3d object..

13 - We want to select all of the front polygons of the object, without the extrusion.. Only the original faces.. So, rotate the object until you can see its side and select all the back of the object until approximately half the length of the object and press Delete.. Now you just have your front faces… Go to the Views menu again and press the Restore Active Perspective View and press F9 again and save the new image with the same settings but different name (obviously).. You can now close 3ds Max (save if you want) and lets get back to Illustrator.

14 - In Illustrator, create a new 2000×2000px image and drag the two renderings into this image.. Select the one with the all the object with the Selection Tool (V) and go to the menu Object, select Live Trace and select Make and then Expand.. Now, with the Direct Selection Tool (A) click on the black path inside the traced image, copy it (Ctrl-C) and paste it (Ctrl-V) and again with the Selection Tool (V) select the traced image and delete it.. Now for the other image.. Do all you did for the previous one, except the part when you select it and copy, because in this image you have lots of paths and not just one, so, with the Direct Selection Tool (A), select the points in the corners of the image and delete them.. Now select the whole shape and press Shift-F6 to open the Appearance window.. and in there, double click on the Fill and set it to white.. You have now 2 paths.. Place the white approximately in the right place relatively to the black one.. But the black is too small, so, in the Appearance window double click on the stroke and set it to black, Press Ctrl-F10 to show the stroke window and increase it until you like..

Now just save the image and use it wherever you want.. This was my result:

If you’re a perfectionist, you can change the rendering size in the 3ds Max to something like 6000×6000px, which will give out a muck bigger image for the Live Trace to interpret.. So the results will be much better, even though everything will be much slower.. Here’s an image i made earlier with large resolutions, notice all the perfect details…

So, i hope this was somehow helpful =D

Continue Reading...