Create a Flash Web2.0 Icon in 10 Steps

Step 1
Open photoshop > new file > using the Ellipse Tool creates a circle. > Center of the layout.





Step 2

While the circle is selected to go to layers (right side on this screen) > right click on the shape layer, Select blending option.




Step 3
Layer style window opens > under it > Apply Gradient Overlay Effect.



Step 4

We have to put original colors code of icon which I had already (Dark red. #961700 , Red #f60101,Light red #ffd4d4 ) to change it, go to > gradient > click on edit gradient > gradient editor > fill the right side color code to #961700 and left side to #ffd4d4. 20% from the right side , insert new “Color stop” > change color of it as #f60101, that’s it. We get the right color. Click “ok” for close the window. Now we will back on the layer style window > under it, there is “Style” > change the linear to be radial. Then select apply”Stork” > structure > change size to 3 > change color to. #fb7272 click ok for close this windows.





















Step 5

Select Ellipse tool create oval shape . Align it to center top of a circle > make sure the color of circle should be white. While the circle is selected. Go to layers (right side on this screen) > right click on the shape layer.
Select blending option > layer style window opens > under it > apply gradient overlay effect.







Step 6

Under gradient > we have select colors, for that click on edit gradient > gradient editor > presets > select 2nd presets(Foreground to Transparent) >
click ok to close gradient editor window > layer style window is still open > gradient > under it angle > change it to -90 degree > then clicks ok to close.





Step 7

While the oval shape is selected under “Layer” > there is fill on top of it > make that 100%to 0 % .



Step 8

Create a shape of “F” using the Pen tool.



Step 9

After creating F shape > go to layer > while the shape is selected, right click on it . Select blending option > layer style window opens > under it > select stroke > stroke structure > size increase to 7 px > click ok to close it.







Step 10

Go to file menu > save as > name it > change the format to .png > and save it . That’s it.

Read more...

Portfolio Gallery Layout

In this tutorial you will learn how to create a portfolio styled layout for your design studio gallery.
This will be your final result


1. The first step is to create a new document with the dimensions of 1024×1000. The size of your document may vary on your choosing.



2. The next thing we want to do is to go ahead and use our paint bucket tool to fill our background layer with #424347

3. Next, using your rectangle marquee tool, make a selection spanning the top of your document that looks similar to this and fill it with #353638.



4. We then want to add a inner shadow to this layer. To do so, right click its layer in the layers pallet and choose blending options from the drop down menu and insert the following



5. In the top right, I decided to add a little text showing the address to our business. The color of the font I used is #999a9a



6. The next step is adding our navigational buttons at the top. Go to your tools pallet and use your rectangle marquee tool to make a selection similar to the following and fill it with any color you’d like



7. Now we would like to add some blending options to our layer, so insert the following onto your layer





8. Next lets go ahead and choose our text tool from our tools pallet and insert a title for our button. I used the color #B1EE85 for my font



9. We then want to make a subtitle with the color #A4A5A7, and then place a number in the top left corner showing which number button it is



10. Just repeat steps 6-9 and you will have something that looks similar to this



11. The the extra space to the left, I added a little text logo with a slight gradient



12. For the blue gradient I used the following blending options on its layer





13. And for the green I used these blending options





14. Next lets go ahead and make the background to our sidebar, and to our main content display area. Using your rectangle marquee tool, or rectangle tool, make two rectangles similar to the following and fill them with #353638



15. Then go ahead and make a footer area for your design. Fill it with the same #353638



16. Now all thats left is to plop in some content and some text and your layout is finished



Donwload Files

Read more...

Simple 2 Column Blog Layout

In this tutorial you will learn how to create a simple 2 column blog layout using Photoshop similar to the one used for PSDVIBE. If you have any questions about this tutorial be sure to ask in the comments. Also, remember with all the tutorials, the psd is available for download.


This will be your final result



1. The first thing we need to do is create a new document with the size of 1024×998. This may vary depending on how large you would like your layout.



2. We want to go ahead and start from top to bottom. So using your rectangle tool, or rectangle marquee tool make a rectangle similar to the following and fill it with any color



3. Now move to your layers pallet and right click your newly created layer and choose blending options from the drop down menu and insert the following





4. Next we want to add a little ’shine’ to the top of our horizontal navigation. Make a 1px high selection spanning your whole document at the top of your navigational menu and fill it with #FFFFFF. Lower the opacity on that layer to 36%, and change the blend mode to ‘Overlay”.



5. Now lets go to our tools pallet and pull out our text tool and create some links similar to the following. On your text layer, input the following blending options to give it a little more detail



6. This is what it should look like



7. Next lets go ahead and make dividers between our links. To do so I used my rectangle marquee tool to make a selection similar to the following and filled it with #FFFFFF



8. I then lower the opacity to 59% and changed the blend mode to Overlay. Copy that layer and place it in between all your links and your document will look something like this



9. The final step for our links is to show what a link will look like when you place your mouse over it. To do so use your rectangle marquee tool to make a selection similar to the following and fill it with #FFFFFF



10. Now right click that layer and insert the following blending options





11. Your menu will now look something like this



12. The last thing we want to add to our horizontal navigational menu is a search field. I wanted to go with an Apple feel search so pull out your Rounded Rectangle tool with a radius of 3px and make a Rounded Rectangle similar to the following



13. Then all you need to do is add a little search icon. You can use the one I provided here.

14. Next make a selection similar to the following and fill it with #000000 on its own layer.



Then go to your layers pallet and right click your newly created layer and insert the following blending options





15. Next I chose to make a small selection at the bottom of my header to add a sort of ‘divider’ between the content and the header. So using your rectangle marquee tool make a selection similar to the following and fill it with #000000



16. Then go ahead and insert the following blending options onto your layer







17. Now using the same method I used in step #4, we want to add a little shine to the back of our header. Make a 1 px high selection across the top of your blue background and fill it with #FFFFFF. Then lower the opacity on its layer to 17% with a blend mode of Overlay

18. Your document will now look something like this



19. To have a layout its good to have a logo, so lets go ahead and add one. I went ahead and plop the PSDVIBE logo onto the layout and used these blending options to achieve a gray gradient







20. Your logo will look something like this


21. The last thing I added to my header was a place for an RSS Feed. Using a icon from Smashing Magazine, and some simple text I came up with this



22. Next lets add a light gradient to our background. Create a new layer right above your background layer and make a selection similar to the following and fill it with #FFFFFF.



23. Now insert the following blending options onto its layer





24. Now lets make a simple little sidebar. Using your rectangle marquee tool make a selection similar to the following and fill it with #FFFFFF.



Now insert the following blending options onto your sidebars layer





25. I went ahead and added some filler content and your sidebar will look something like this



26. Our left side is where our posts will be displayed. It is pretty generic, so set it up something similar to the following for each post



27. All thats left now is to add a footer. Make a selection with your rectangle marquee tool similar to the following and fill it with #FFFFFF.



28. Then insert the following blending options onto its layer







29. Thats it! Now you should have something that looks similar to the following



Download Files

Read more...