When we will done the tutorial you should look something like this.

Let's start

Create a new document 300 x 500 pixels with a transparent background. Then take rectangle tool and choose color #9cc8d2.

And now just draw rectangle for background. After that take rounded rectangle tool with radius 30px and choose color #cbcbcb.

And now draw rounded rectangle like picture below.

Then select it and go to Edit->transform->distort. And drag a little bit rounded rectangles top and botton. How you can see in previous picture it not regular rounded rectangle so we need a little bit transform it. And when you done with this set up following layer style for this rounded rectangle.

And after that should look something like this.

Ok now duplicate this rounded rectangle and resize it a little bit smaller and set up following layer styles.

And after that should look like this.

Now we need draw display. take rectangle tool choose color #1e1919 and draw rectangle middle of phone case. And set up following layer styles.

And after that should look something like this.

And now take rounded rectangle tool and draw rounded rectangle for speaker with following layer style.

And after that should look something like this.

Now duplicate this rounded rectangle and resize it a little bit smaller, change color to black.

Now we need draw buttons. So take again rounded rectangle tool and draw bottom of display wide rounded rectangle tool with same gradient overlay like we use for speaker back.

Now duplicate rounded rectangle and resize it a little bit samller. Set up following layer styles.

Ok and now should look something like this.

Now take line tool and draw two 1px lines with next to other like picture bellow.

Now draw two rounded rectangles like picture bellow with following colors. green: #35c91c and red: ff0000.

For middle button draw white rectangle like picture bellow.

Now take custom shape tool and from list choose campfire and set up color #2cb5dc. draw like picture bellow.

Ok take text tool and write down your company name with following text settings.

Allmost done. Finaly we just need set up a liitle shine effect for display. Take polygonal lasso tool and create selection like picture bellow.

take gradient tool set up color white to white and drag over selection. And set up opacity 1% for this layer and it is all.

We Are Done

Thanks for reading tutorial. I hope it‘s was useful for You

Download phone.psd

Bookmark It

Hide Sites

When we will done the tutorial you should look something like this.

Let's start

Create a new document 1000x 1000 pixels with a transparent background. And after that take rectangle tool, choose any color and draw background for our work stage.

After that for our background layer set up following layer styles.

And after that background should look something like this.

And now we can start write down text. So for all main text we use the same text settings. Just layer styles will be different.

Note: there are 3 text layers "CLICK", "ON" and "POST". So for "CLICK" and "POST" layers we use following layer styles.

And for text layer "ON" set up following layer styles.

The same "Drop shadow" and "Stroke" like for previous two layers. Just will be different gradient overlay.

And after that should look something like picture bellow.

Now duplicate all text layers and move a little to left like picture bellow.

For all duplicated layers we need change "Gradient overly" style settings.

And now our text need looks something like this.

Next take line tool with 2px and black color. And we need draw some lines for realistic 3D effect. Like picture bellow.

We Are Done

For grater look and effect, you can also do like i do. Write small text into our animated text like you can see in post main picture. I use the same font just size 30pt.

Download  simpleanimetext.psd

Bookmark It

Hide Sites

When we will done the tutorial you should look something like this.

Let's start

Create a new document 900 x 300 pixels with a transparent background. And after we need set up work stage. So create New Guide(view->new guide) on vertically: 20, 30, 165, 170, 305, 310, 445, 450, 585, 590, 725, 730, 870and 880px. And horizontally: 30, 90 and 270px.

Now we can start draw first button for navigation menu. Take rounded rectangle tool, set up radius 10px and choose color #025d8c.

Ok now draw down first button between 30px and 165px guideline and to the down draw a little bit across 90px guideline. And set up following layer styles.

And after that should look something like this. How you can see button is a little bit across 90px horizontal guideline.

And now just duplicate button 5 times to get 6 buttons. And after that should look something like this.

Now take rectangle tool, choose color #0b4b6d and draw rectangle like picture bellow.

And set up following layer style.

After that we can write down text for buttons. So there you have settings what i use for button text.

And i also use following layer styles for text.

And after that should look like picture bellow.

Great now take again rectangle tool, choose color #e9e9e9 and draw down background for news panel. And set up following layer style.

And after that should look something like this.

Now take Polygonal Lasso tool and create selection like picture bellow.

Now take Gradient Tool and set up color from black to black.

Do the same for right side next to last button. And after that should look something like this.

We Are Done

Just type text what you like, insert pictures or something like that. its free choice what you put on news panel. I simply write down some text.Thanks for reading tutorial. I hope it‘s was useful for You. And excuse about bad quality pictures.

Download  newsmenu.psd

Bookmark It

Hide Sites

When we will done the tutorial you should look something like this.

Let's start

Create a new document 300 x 400 pixels with a transparent background. Then take rounded rectangle tool with radius 10px and choose black color.

Now draw down rounded rectangle like picture bellow.

Next draw one more rounded rectangle inside previous, just little bit smaller. And set up following layer styles.

And after that should look something like this.

Ok now we need draw first button. take rounded rectangle tool and set up radius 5px, choose color #999999. And draw rounded rectangle like picture bellow.

And set up following layer styles.

Ok now just copy and paste buttons. And after that should look something like this.

How you can see we need one more button. So take rounded rectangle tool and draw one more button with same layer styles. After that should look something like this.

Great. now we just need set up one more layer style for one of button. Set up following layer style for last button in the first row.

And after that should look like picture bellow.

Select text tool and type text for buttons. Before that set up following setting for text.

And type texts like picture bellow.

How you can see we have two empty buttons. So choose white color take line tool and draw symbol like picture bellow.

Now we need draw rounded rectangle tool with radius 5px top of the buttons with color #0c0b0b.

Ok. Great. So take again rounded rectangle tool with radius 5px and we need draw down display with following layer styles.

Almost done. We just need calculator brand name with following text settings.

We Are Done

Thanks for reading tutorial. I hope it‘s was useful for You

Download calco.psd

Bookmark It

Hide Sites

Welcome everyone. Another Adobe photoshop day. Today i want show you how to create office table layout. Will be useful for portfolio or informative blog.

When we will done the tutorial you should look something like this.

Making background and set up work stage.

Create a new document 1200 x 1200 pixels with a transparent background. Set up color #e6e5e0 and take rectangle tool.

After that draw rectangle for background. And should look something like this.

Now we need set up work stage. So create New Guide(view->new guide) on horizontal: 85px, 150px, 170px, 1100px and vertical: 150px, 205px, 355px, 365px, 515px, 525px, 675px, 685px, 835px, 845px, 995px and 1050px.

Creating The Navigation, Page Conture And Design Elements

Ok. Lets start with navigation. Take rounded rectangle tool and set up following settings.

Now we need draw first navigation button like picture bellow.

And now draw all buttons and should look like picture below.

Now we need draw page conture. Take rounded rectangle tool, choose white color and draw rectangle between horizontal 150px and 1100px gude lines. And vertical 150px and 1050px guide lines.

While rounded rectangle is still selected we need set layer style. We need 1px line.

After that layout should look something like this.

Now we need a little bit transform our navigation buttons for better look. Its free choice what side and how many you transform them.

Select text tool and type you navigation buttons texts. And set up following setting for text You can download Luna Bar font here.

After that your navigation should look something like this.

Ok now we need download some design elements.

Coffe cop, keyboard, pen, flash drive, iphone, and mouse.

After that just insert all elements and arrange like picture bellow.

Creating Logo And Advertise Area

Select rounded rectangle tool, set up radius 10px and draw 100px height rounded rectangle with white color and 390px from left side of workstage.

And set up following layer styles.

Ok now we need type logo text. Choose following settings like picture bellow. Space Age font you can download here.

Now we need draw down advertise rounded rectangle. Use the same settings like for logo rounded rectangle.

Creating Content

Ok now we need write down some text for post. Use following setting like picture bellow.

Ok now we need create read more button. take rounded rectangle tool, choose color #c12e2e and draw rounded rectangle like picture bellow.

And set up following layer styles.

And type read more text with following settings.

Now we need create line under post. So take line tool and draw 1px line with color #cccccc like picture bellow.

And then just copy posts down to the page end.

After that for every post we need thumbnail picture to the left side. Just use any picture what you like. use picture with size 230* 230px . And set up 1px stroke with color #bbb2b2 in layer styles.

Creating Footer

Ok. Finally we need create footer. Take text tool and write down text with following settings like picture bellow.

We Are Done

Thanks for reading tutorial. I hope it‘s was useful for You.

Download Office.psd

Bookmark It

Hide Sites

When we will done the tutorial you should look something like this.

Making background and set up work stage.

Create a new document 1200 x 1200 pixels with a transparent background. Then take gradient tool and then linear gradient tool and choose from #beeffe to ffffff. And after that drag cursor from bottom of work stage to top.

And your work stage should look something like this.

Now we need set up work stage. So create New Guide(view->new guide) on: 200px, 500px, 625px, 750px, 875px and 1000px

Creating Logo Text And The Navigation

So we need select text tool and write down your company name. For logo text i use 48pt text and for subtitle 18pt. We need write down text between 200px and 500px guide lines and 40px from top of work stage. (Use horizontal guide lines that helps you write text exactly 40px from top).

Select the rounded rectangle tool, choose white color and draw menu rounded rectangle with radius 10px  between 500px and 100px guide lines. 40px from top of the work stage and 60px height menu.

Once you’ve created your rectangle and button add the following layer styles.

After that your menu should look something like this.

Now we need separate all button area. So how can we do that? I use two 1px lines next to each other. One black, one white. Take line tool and set up width 1px and choose black color. Once you’ve created your lines set the layer opacity to 50% and blend mode to soft light. And draw lines where is guide lines for menu (625px, 750px and 875px). And you should look something like this.

Select text tool and type you navigation buttons texts. And set up following setting for text.

After that your navigation should look something like this.

Creating The Community Area

Select rounded rectangle tool set up radius 10px and draw 200px height rounded rectangle with color #0090ff, 5px bellow menu. And set up following layer style.

Now we need draw a half smaller white rounded rectangle inside previous. And set up opacity 5%. After that your community panel should look something like this.

Now we need type text for community area and import icons for twitter and rss. So for text i use the same settings like for site logo text. But with following layer style.

Icons i download from iconfinder.com, but you can use icons what you like. And after you do that your community area should look like this.

Creating Latest Works Stage

Now we need create latest work stage area. So firstly we need type text 5px bellow community area and center of work stage. Use these text settings.

After that take line tool and draw 1px line with color #cccccc like picture bellow.

How you can see under text we can see line but we don‘t need this. So for that create new layer above line layer and with rectangle tool draw rectangle 5px bigger than text. (For rectangle use background color). And now should look something like this.

Now we need create latest works panel. For that we need take again rounded rectangle tool and draw 300px height white rounded rectangle with the same layer styles like menu.

And after that latest works panel should looks like menu after we set up thees styles.

Now take again rounded rectangle tool and draw a liitle bit smaller white rounded rectangle with 1px line (color: #cccccc) inside previous rectangle. From top 10px, left 10px, right 10px and from bottom 55px.

After that add some pictures for latest works screenshots. You can resize it from bigger to smaller for greatest effect like picture bellow.

So after that we need create previous and next works arrows and active theme title text. Now take ellipse tool and draw white ellipse on left side of latest works panel. And set up following layer styles.

Should look something like this.

Now draw one more ellipse inside of this one but a little bit smaller.

And set up following layer style.

Now take custom shape tool and choose arrows in shape panel.

Choose color: #8e8b8b and draw arrow like picture bellow.

Now just duplicate all layers for this button and rotate to opposite side and put it on right side.

Finally we need active themes title text. Use following settings for text.

And we are done with latest works stage.

Creating News Stage

For news stage we need the same header like we have for latest works stage. So Duplicate layers with 1px line and latest works text and rename „latest works“ text to „News“. And drag it under latest works stage with 5px space.

How you can se we have problem with line masking because background color now is another. So – how to fix this. Firstly we need resize line mask rectangle a little bit smaller because now it is a little bit wide. And after that set layer style „color overlay“ and set up background color. And after that should look something like this.

Now we need create 3 same sizes rounded rectangles. Width: 260px and height: 300px. Take rounded rectangle tool and draw rounded rectangle like picture bellow.

And after that set up 1px, #cccccc color stroke and gradient overlay.

After that just type some dummy text and you can also use some icons. When you do that then just duplicate this all and paste into other places.

Creating Footer

Ok. Finally we need create footer. Take rounded rectangle tool and draw white rounded rectangle 5px lower than „news stage“. Draw white rounded rectangle set up again 1px line like for every previous blocks, but gradient overlay set up following layer settings.

After that just type following text into footer. Font size 14pt. Colors for text like in previous texts.

We Are Done

Thanks for reading tutorial. I hope it‘s was useful for You

Download Myportfolio.psd

Bookmark It

Hide Sites

When we will done the tutorial you should look something like this.

Step 1

Create a new document 600 x 300 pixels with a transparent background. Choose color #e5e5e5 and take rectangle tool.

Step 2

Now draw rectangle for background and after taht should look like this.

Step 3

Now we need set up work stage. So create New Guide(view->new guide) on verticaly: 90px, 160px, 190px, 480px, 510px and two horizontaly 90px and 210px.

Step 4

Take again rectangle tool and choose black color. After that draw rectangle between 160px and 480px vertical guide lines.

Step 5

Select ellipse tool and draw extended ellipse between 480px and 510px guide lines like picture below.(use black color i use red to easier to understand what you need draw).

After that merge both layers.

Step 6

Now take rectangular marquee tool and take selection like picture bellow.

Step 7

Then go to edit->copy and edit->paste. And move new pasted half ellipse to left side like picture bellow.

Step 8

While half ellipse is still selected set up following layer styles.

And after that should look something like this.

Step 9

Now select previous layer and set up following layer styles.

After that your usb stick should look something like this.

Step 10

Ok now take rectangle tool and draw down rectangle like picture bellow.

Step 11

After that set up following layer styles.

Step 12

Ok now we need draw two 1px wide lines one black, one white. See picture bellow.

Step 13

Now we can remove guide lines we don't need them anymore. Ok take ellipse tool, choose color #02b7e1 and draw down small ellipse like picture bellow.

Step 14

And set up glausian blur for blue light indicator.

Step 15

Now take text tool and choose what font you want i use following settings.

Step 16

After you write down text set up gradient overlay with following settings.

And now should look something like this.

Step 17

Now choose black color, take rectangle tool and draw down two rectangles like picture below.

Step 18

Allmost done. But we need get a little shine effect. For that take polygonal lasso tool and creat selection like picture bellow..

Step 19

Take gradient tool, choose color white to white.

Then drag over selection and set up opacity 2%.

We Are Done

Thanks for reading tutorial. I hope it‘s was useful for You.

Download usb.psd

Bookmark It

Hide Sites

What We’ll Be Creating

When wee will done the tutorial you should look something like this.

Making background and set up work stage.

Create a new document 300 x 400 pixels with a transparent background. Set your background color to #ffffff.

Then draw rectangle for background. And now we have work stage with white color.

Now we need set up work stage. So creat New Guide(view->new guide) on verticaly: 50px, and 250px. And horizontaly: 50px, 150px, 200px, 250px, 300px and 350px.

And after that workstage should look something like this.

Creating The Navigation

Select the rounded rectangle tool with a radius of 10px, drag out the navigation rectangle in the workstage between all 50px guidelines. (horizontal and vertical)

Once you’ve created your rectangle add the following layer styles.

And after thar should look like this. (I remove guidelines, for easier to see how should look like now, but we need guidelines so do not remove them).

Creating The Navigation Buttons

Now we need seperate all button area. So how can we do this? I use simple 2px line. So take line tool and set up width 2px and choose #f4f4f4 color. And draw lines where is guide lines. And you should look something like this.

Select text tool and type you navigation buttons texts. And set up following setting for text.

After that your navigation should look sommething like this.

Creating The Navigation Triangle and Hover State

Select polygon tool set up sides 3 and choose color #78c51f.

After that draw triangle for every navigation button. And after that should look like this.

Ok now we need create hover button. Choose rectangle tool and draw #78c51f color rectangle for second button bottom of text and triangle layer. After that should look like this.

Now select Studio button triangle and set up following layer styles.

After that should look something like this.

Ok almost done. But we need create shine effect. Now above hover_rectangle layer we one more layer for shine effect. Take Polygonal Lasso tool and select area like picture bellow.

Then take gradient tool and choose color from white to white.

Now just drag over selection and set up layer opacity to 10% and we are done. And finished hover state should look like this.

Congratulations you have finished the tutorial. So don‘t forget tell friens about this tutorial. Thanks!

Download greenmenu.psd

Bookmark It

Hide Sites

What We’ll Be Creating

When wee will done the tutorial you should look something like this.

Step 1

Create a new document 400 x 400 pixels with a transparent background. And with rectangle tool draw white rectangle for background.

Step 2

Ok now we can start. Take ellipse tool and draw white ellipse and set up following layer styles.

Now should look something like this.

Step 3

Now we need draw one more ellipse inside previous ellipse. And Set up foollowing layer styles and 1px white stroke.

After that should look something like this.

Step 4

Now take custom shape tool and choose radiactive symbol.

And draw this symbol in white color with opacity 11%. And after that should looks like picture bellow.

Step 5

Ok lets create shine effect. Take polygonal lasso tool and select range like picture bellow.

After that take gardient tool with white color and drag cursor inside selection.

Set up opacity 30% and should looks something like this.

Step 6

Ok now we can create numbers for our clock. Take text tool and type numbers 12, 3, 6 and 9. I use font verdana with size 24 and color #363636, and put it in folllowing position.

Step 7

Now take line tool and draw 8 line. With color #363636 and 3px wide.

Step 8

Take rounded rectangle tool with radius 10px and draw height rounded rectangle for minutes meter with the same settings like we set up for first ellipse. We need gradient overlay and stroke, tust this time 1px nor 3px. And after that should look something like this.

Step 9

Now take again rounded rectangle tool with radius 10 and draw rounded rectangle with color #23a6c6 like picture bellow.

Step 10

After that duplicate both layers for minutes meter and create hour meter. Just resize it and should look something like this.

Ok finaly we need create center ellipse. Take ellipse tool and draw ellipse like picture bellow with the same layer styeles like we use for hour and minutes meters. And it‘s all.

Well done!

Download clock.psd

Bookmark It

Hide Sites

What We’ll Be Creating

When wee will done the tutorial you should look something like this.

Step 1

Create a new document 500 x 400 pixels with a transparent background. Set your background color to #363636.

Step 2

Then draw rectangle for background. And set up gradient overlay from #363636 to #797979 and scale 150%.

Now your background should look something like this.

Step 3

Select the rounded rectangle tool with a radius of 70px, choose color #090803 drag out the speaker rectangle.

Once you’ve created your rectangle add the following layer styles. (Gradient overlay and 3px stroke).

Step 4

Now we need start create first speaker. So take ellipse tool and draw ellipse like in picture.

And we need set up following layer style for ellipse.

Step 5

After that we need draw one more ellipse inside previous, just little bit smaller.

And set up following layer styles. (Bevel,emboss and color overlay to #000000).

Step 6

Now choose white color and draw inside previous ellipse on more little bit smaller ellipse.

Step 7

We need one more ellipse for speaker with color #cfc8c8. And again inside previous and little bit smaller. And set up following layer styles.

And after that should look something like this.

Step 8

Ok almost done with speaker. But we need one more element for them. Take rounded rectangle tool with radius and color #090803. And draw rounded rectangle like picture bellow.

And set up following layer styles.

Step 9

Now we are done with left speaker. Duplicate it and put it right side. And after that should look something like this.

Step 10

Ok now we need power led light. Take rounded rectangle tool and draw white, small rounded rectangle like picture bellow.

And set up 2px glausian blur and now should be following effect.

Step 11

After that take text tool choose what font you want. I use verdana, 18pt and bold with black color. Type text „Phone Speaker“. And after that should looks something like this.

Step 12

Now we need create shine effect. Take polygonal lasso tool and select area like picture bellow.

Step 13

Take gradient tool, set up white color and drag over selected area. And set up opacity 3%. And we get following effect.

Step 14

Almost done. But finally we need create reflection effect. Ok select all layers and duplicate them. After that merge all duplicated layers. Rotate it 180 degrees and rotate horizontal. And move like picture bellow.

Step 15

Now set up 3px glausian blur. After that take eraser tool and set up flow 23% and bleach a little bit reflection bottom.

Well done!

Download portable_speaker.psd

Bookmark It

Hide Sites