Web Design from Psd.Tuts

Topics: Star, Color, Jodi Phillis Pages: 8 (2488 words) Published: March 24, 2013
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 with Blue Filter (RGB). Then to apply that effect just to the "skyline" layer in the layers palette, hold the Option key and click between the Channel Mixer layer and the "skyline" layer. Finally, change the "skyline" layer’s Blending Mode to Overlay.

Step 5
Apply a Layer Mask > Reveal all to the "skyline" layer. Then using a big and black (#000000) soft Brush hide the borders of the image, then select a Grunge brush (I’m using this Grunge Brush set by Kelzky13, especially brushes 250 and 181) and make the borders a little bit more irregular.

Step 6
Next type the title "Magic" using the Scriptina font. Then apply the layer styles shown below: an Outer Glow (#9EB6D0) and a Gradient Overlay (#70ABF6, #FFFFFF, #B4CBE7, to #FFFFFF). Also, now is a good time to organize our developing design into folders. Put all the layers into a new folder named "Background" and the text inside another folder named "Logo."

Step 7
Now we’ll add some stars to our design, you can use any star Brush set but I’m using this set: Star field brushes by BL1nX. Then using the brush 550 of the set, paint the stars in white (#FFFFFF) into a new layer inside a folder named "Stars." Notice that I’m putting the brightest star over the dot of the i. Then apply a gradient overlay using three colors (#3A8FEF, #FFFFFF, and #66C9FC) to the "Stars1" layer.

Step 8
Next, using the brush 615 of the stars field set, add more stars to the sky into a new layer named "Stars2," then with a soft Eraser, delete the stars over the buildings. Next, add a Outer Glow (#8AB2FF) to "Stars2."

Step 9
Add more stars to the "Stars 2" layer all across the design, then using the Eraser tool, delete some areas of the stars. Finally, apply a Gradient Overlay effect to "Stars2" layer, using four colors: #6AB1D1, #FFFFFF, #94CFED, and #FFFFFF.

Step 10
Now download these Star Brushes by jen-ni and keep the brushes handy because we’ll use them several times in this tutorial. Select a 65 px brush (I’m using...
Continue Reading

Please join StudyMode to read the full document

You May Also Find These Documents Helpful

  • Web Design Essay
  • Web Design vs Graphic Design Essay
  • Web Design and Advanced Web Development Essay
  • Graphic Design Versus Web Design Essay
  • Sample Web Design Proposal Essay
  • Quality Web Design Research Paper
  • Quality Web Design Essay
  • Skills for Web Design Essay

Become a StudyMode Member

Sign Up - It's Free