Web Design from Psd.Tuts
Magic Night Themed Web Design from Scratch in Photoshop
Source : Source : http://psd.tutsplus.com/tutorials/interface-tutorials/photoshop-web-design-night-theme/
Step 1
Let’s the design begin! First of all, this isn’t a basic tutorial, so I’ll skip some basic explanations. Anyway, anyone with an intermediate – advance level of Photoshop skills will be able to do it. Second, it’s really hard to obtain exactly the same result that I’ve got, and you must use your imagination and good taste to get something similar or better than my design. And third, this was designed by considering application into a WordPress template, but you can quickly convert it into another engine’s theme, or even a custom website.
Moving forward then! Create a new document 960 pixels by 1000 pixels and RGB. Draw some guides to mark the limits and go to Image > Canvas Size to resize the document making the canvas’ width bigger (1460 x 1000 px). This way you’ll have your design centered into a big document and see how it looks on widescreen resolutions. Also, draw a guide to mark the header height.
Step 2
It’s time to add a post. First, add the title and the metadata row into a new layer named "Post." See the image below to view the Character values. Also, I’m adding a little star near the metadata as a visual detail. Step 3
Since one of the Psdtuts+ readers suggested using real pictures instead of the classic Clouds filter, we’ll try that this time. Paste this picture of some storm clouds into a new layer named "Clouds" and change its Blending Mode to Overlay. Then go to Layer > Layer Mask > Hide all, and draw a Radial Gradient from white to black (#FFFFFF – #000000), which goes from the middle top to almost the middle bottom. Then adjust the "Clouds" Levels a little bit to make the clouds darker.
Step 4
Now paste this nice skyline of a spanish shore into a new layer named "skyline." Then create a new Adjustment Layer > Channel Mixer… and select Black & White
Source : Source : http://psd.tutsplus.com/tutorials/interface-tutorials/photoshop-web-design-night-theme/
Step 1
Let’s the design begin! First of all, this isn’t a basic tutorial, so I’ll skip some basic explanations. Anyway, anyone with an intermediate – advance level of Photoshop skills will be able to do it. Second, it’s really hard to obtain exactly the same result that I’ve got, and you must use your imagination and good taste to get something similar or better than my design. And third, this was designed by considering application into a WordPress template, but you can quickly convert it into another engine’s theme, or even a custom website.
Moving forward then! Create a new document 960 pixels by 1000 pixels and RGB. Draw some guides to mark the limits and go to Image > Canvas Size to resize the document making the canvas’ width bigger (1460 x 1000 px). This way you’ll have your design centered into a big document and see how it looks on widescreen resolutions. Also, draw a guide to mark the header height.
Step 2
It’s time to add a post. First, add the title and the metadata row into a new layer named "Post." See the image below to view the Character values. Also, I’m adding a little star near the metadata as a visual detail. Step 3
Since one of the Psdtuts+ readers suggested using real pictures instead of the classic Clouds filter, we’ll try that this time. Paste this picture of some storm clouds into a new layer named "Clouds" and change its Blending Mode to Overlay. Then go to Layer > Layer Mask > Hide all, and draw a Radial Gradient from white to black (#FFFFFF – #000000), which goes from the middle top to almost the middle bottom. Then adjust the "Clouds" Levels a little bit to make the clouds darker.
Step 4
Now paste this nice skyline of a spanish shore into a new layer named "skyline." Then create a new Adjustment Layer > Channel Mixer… and select Black & White