Creating Web 2.0 Wallpapers for your Logo

作者:我就是个世界 发表于:2011-07-15
来源:http://www.dezinerfolio.com/2007/04/06/creating-web-20-wallpapers-for-your-logo
-------------------------------------
Here is a simple Photoshop Tutorial to create Cool Web 2.0 looking wallpapers for your logo. In this example I have used my logo. Hope you like it.[separator]
[img]http://www.dezinerfolio.com/wp-content/uploads/2007/04/a1.jpg[/img]
First we start off with a 1024 * 768 Blank Document.
Create a new layer and fill with any color.
Now move to layer styles and choose gradiend and pick the gradient from the image below
[img]http://www.dezinerfolio.com/wp-content/uploads/2007/04/gradient.jpg[/img]
You could also use different Web 2.0 Gradients. [url=http://www.dezinerfolio.com/2007/03/14/ultimate-web-20-gradients-free-download/]Here is a Free Download[/url] of a Huge Collection of Web 2.0 Gradients for Photoshop which I made.
[img]http://www.dezinerfolio.com/wp-content/uploads/2007/04/a2.jpg[/img]
Now create a new layer
Create a simple gradient as in the above image. The two ends are transparent and the middle with white.
Using the Gradient tool, horizontally apply the gradient for the whole layer
[img]http://www.dezinerfolio.com/wp-content/uploads/2007/04/a3.jpg[/img]
[img]http://www.dezinerfolio.com/wp-content/uploads/2007/04/a4.jpg[/img]
Now Transform the layer ( Ctrl + T )
First reduce height by scaling vertically
Right Click > Perspective and get the selection as in the above image.
"Enter" to make changes
[img]http://www.dezinerfolio.com/wp-content/uploads/2007/04/a5.jpg[/img]
Make the selection as above
Ctrl + Alt + D - Apply a feather of [b]30[/b] and delete the selection
[img]http://www.dezinerfolio.com/wp-content/uploads/2007/04/a6.jpg[/img]
Create a new layer
Create an Elipse with white fill
[img]http://www.dezinerfolio.com/wp-content/uploads/2007/04/a7.jpg[/img]
Transform > Perspective to the elipse as above
[img]http://www.dezinerfolio.com/wp-content/uploads/2007/04/a8.jpg[/img]
Apply a [b]40px Gussian Blur[/b]
You could also horizontally scale this elipse based on the size of the logo you will be using
[img]http://www.dezinerfolio.com/wp-content/uploads/2007/04/a9.jpg[/img]
Create a layer below the blurred elipse as above
Apply the [b]Stripe [/b]pattern to the whole layer
If you are not sure how to do this, you could refer the previous article of creating stripes [url=http://www.dezinerfolio.com/2007/03/24/creating-seamless-web-20-stripe-site-headers/]here[/url]
[img]http://www.dezinerfolio.com/wp-content/uploads/2007/04/a9a.jpg[/img]
To the layer which you applied the stripes, Choose "[b]Lighten[/b]" in the layer blending properties as above.
Then change to opacity from 100% to [b]8%[/b]
[img]http://www.dezinerfolio.com/wp-content/uploads/2007/04/a9b.jpg[/img]
To this layer, make a selectionfrom bottom as shown in the above image
apply a feather of [b]150px[/b]
Delete the selection
[img]http://www.dezinerfolio.com/wp-content/uploads/2007/04/a9c.jpg[/img]
Now here is the main part of this tutorial
Above is my logo which I had created long time ago.
Place the logo such that the base of the Logo lies on the center of the Blurred White Elipse.
Please try to have good Shadows and Reflections for the logo as above.
This is all. Your Web 2.0 Wallpaper for your Logo is done. Hope you enjoyed this tutorial. Please comment below if you liked it.
Below is the Final Output. Please click on the image to view the Hi Res Wallpaper.
[img]http://www.dezinerfolio.com/wp-content/uploads/2007/04/hireswallpaper.jpg[/img]

分享:

扫一扫在手机阅读、分享本文

请发表您的评论