Thursday, 26 September 2013

Posted by Muhammad Naeem On Thursday, September 26, 2013
Under this shape i will add another shape. This shape will be used as a body of our layout.
Right above the slideshow area i will add a nice slogan. This will be very visible, and sometimes these types of slogans can turn your users into customers. I have used Horizontal Type tool to write the text there.
With Rectangle Tool i will create a dark shape like in the following image.
Then i will select pen tool to create a trapezoidal shape. As you can see i have used the same layer styles i have used for the header shape.
In the middle of the previous shape i will draw another one, but this time i will use a dark color. Later this shape will be replaced with a stock image.
On the left side of the slideshow i will create another shape with pen Tool.
Bellow are the layer styles used for this shape
The same layer styles will be used also for the right side of the slideshow. To create the same effect as mine you need to check the reverse checkbox in the stroke settings
With Ellipse tool i will create a black shape under the slideshow. This dark slideshow will be used to create a realistic shadow.
Make sure you have the dark shape selected, and then go to Filer > Blur > Gaussian Blur, and enter a value between 20-30 in the Gaussian Blur settings window
I will us line tool to create a a nice shiny line. First add a Line with Line Tool. make sure you create a white line in the same spot you see from the following image.
Right click on this line in the layer palette, and choose Rasterize Shape. Select Eraser tool, and with a smooth round brush erase the ending lines.
This is how my layout look so far, after i have used one of the most know wallpapers. The Mac OS X wallpaper with Aurora.
On the bottom, and on the top of the slide show i will add some transparent shapes with Pen Tool.
Then with line tool i will create the following lines and dividers.
Under this slide show i will create two shapes. here i will add later some vector icons.
As you can see the shapes from above have a nice pressed look. If you want to create the same effect, then you can add the following pressed layer styles.
On the top of the layout i will create a simple navigation bar, and in the same time i will use a round shape to create a pressed button.
on the middle of the layout i will add some text and some vector icons. You can find a few hundreds vector icons 
Over the slide show i will add some text.
Then you can add more text to the layout until you re happy with your result.



WEB CSS AND HTML LAY OUT TUTORAIL PART 2

WEB CSS AND HTML LAY OUT TUTORAIL PART 2 WEB CSS AND HTML LAY OUT TUTORAIL PART 2 WEB CSS AND HTML LAY OUT TUTORAIL PART 2 WEB CSS AND HTML LAY OUT TUTORAIL PART 2

you are reading : WEB CSS AND HTML LAY OUT TUTORAIL PART 2

Amazing content i did not see before thanks..
Naeem Sagar
Date published: 10/13/2015
4.8 / 5 stars
How this Post..

0 comments :

Post a Comment

Write some thing Good for us...........

Note: only a member of this blog may post a comment.