Generally web designers search out relax approach to design web pages in squat time. Because everything is not possible through coding if it is possible it may take an extended period to complete. Photoshop is a king of designing software’s which bounce facilities associated with Photo editing, text effects, graphics designing as well as web designing. So a lot of professionals use it to generate beautiful web pages. If you’ve not known about developing customize pages. here we are going to design and slice lush web page in Photoshop.
Be attentive, here you’ll be guided step by step. After reading this, you’ll be talented to generate web pages at your end without any difficulty. So read it thoroughly and do exercise with us.
Design and Slice Lush Web Page Properly Step by Step
Step 1: Create New Web Document
First of all you’ve needed a new Web Document, so go to Menu Bar and click on File -> New or press the command Ctrl + N from your command board. A new window will open having lot of further options. First change the Document name as Web Page with default name Untitled-1. After putting the name enter the Preset Value as WEB. This will express to Photoshop that you’re going to work especially on a web layout.
After filling the Name and Preset now set the size of a web page, there are many choices but you must select require size. Pick up 1280 by 1024 web page size from drop-down menu. When you’ll pick the size the values of Width and Height will be auto-filled, so don’t modify these values if you’ve required size. Otherwise, you can change it easily no issue.
Now set the resolution values, one more thing is very important.
When you are setting the value of resolution hang onto mind your page must be lighted weight and small size. Because if your page will have very light weight this will open speedily and have not engaged with much loading time. The speed of web page can affect SEO strategies so make web page well optimize.
If you select the Preset value as Web then there is no need to modify the resolution because these things are automatically controlled the settings of resolution so don’t change Width, Height, and resolution anymore.
In the last option choose a White item from Background Contents drop-down menu. Because you are going to start work on the simple blank white sheet.
Now the document will appear with the size of 1280 by 1024. The original document is here in the below picture.
Step 2: Create Header and Logo
The page is ready for designing, retain attention a web page contains Header, Menu bar, Sidebar, and footer. First construct header of the web page, so pick the Rectangular Tool and draw header with a color of #6c017c and give Stroke as White color.
If you want to create unique and custom banner for your website header see this http://www.photoshophelps.com/2015/08/21/photoshop-tutorials-make-actual-pixels-web-header-poster/.
Header filled now add a logo at left side of the header. Write text logo only with a help of Type Tool. Click on Type Tool and select an area where you want to write text logo. Choose the text format Berlin Sans FB with text size 60pt and Write text “Photoshop” with color #07ef6a then click on Tick Icon.
Add another text layer to type second part of the logo. Select the area in below of the first text layer and Write Helps.com with text format Arial size 24pt with color #fe033e then click Tick sign above.
If you want to make more beautiful logo than see this http://www.photoshophelps.com/2015/08/22/photoshop-tutorials-design-emblem-for-company-or-website/.
Step 3: Create Menu Bar With Links
The header has prepared, now it’s time to make menu bar. Select the Rectangle Tool and draw the menu bar below the header with a fill color of #07ef6a and Stroke color White. Write the menu names on it with the support of Type Tool.
Click on Type Tool and select appropriate Font Style and color for menu and write name one by one. With Text format, Arial, size 30pt and Text color #6c017c add Home, Contact Us and About Us on the menu bar as well.
Step 4: Design Web Page Body
The menu has arranged, currently generate a body of the web page. Like a hosting web home page, all plans details are mentioned in separate blocks. Select the Rectangular Shape with Fill color #07ef6a and Stroke White. Draw a shape in the body of the web layout like below picture.
1st rectangular block has completed, here 2 more blocks are needed. Select the Move Tool and click on a block with Holding Alt Key and Left Click. Move the block with a mouse at the results one more duplicate block will be shaped. Replicate this step again to make more blocks. You can write the details of every hosting plan at these blocks.
Blocks are prepared, yet here is a necessity to add a title of blocks so pick Custom Shape Tool and select a figure from Shapes Box. Draw this diagram above each block in the body of the web page.
The Shape must choose carefully, now draw this shape on every blockhead with Fill color #6c017c. After drawing the first heading box, generate duplicated shapes by picking Move Tool and grip Alt Key with Left Click.
Add the Text on every head block, for this purpose you must select Type Tool and Layer where you want to add text. Select the text format as Arial with size 48pt and color white, type Plan 1 and click on Tick Icon above.
1st heading is added now type two more Plan 2 and Plan 3 in a head of blocks. Just repeat the same above steps and add 2 more Plan text like below.
Step 5: Design Web Page Footer
Web header and body in ready but now design web page footer area. Choose the Rectangular Shape Tool and draw it at footer fill color #6c017c and Stroke White.
Add the background image into the web layout, just drag and drop an image from one tab to another tab. Make the order button in below for all blocks. At the footer add copyrights and designer or developer name text.
Your lush web page is complete now according to design here is essential to link building of menus.
Step 6: Slice Web Page In Photoshop
Web front page design has completed, now slice out the web layout by using Slice Tool in Photoshop. Choose the slice tool from Toolbar. Slice out every menu and embed the links.
This is an important step understand it carefully. Do Right Click on every slice area a menu list open, select Edit Slice Option then a new window will expose having lot of options related to hyperlinks.
give the URLs to every text which you want to link, see the below image. Do the same step as well for more linking.
Now your lush web page has finalized just need to save it in your computer. Go to File -> Save for web or press the command Alt + Shift + Ctrl + S from your keyboard. You’ll find a text file at your desktop or where you saved it, now just open this file with Google Chrome. This web page has finest results on the resolution of 1280 by 1024 so open page at this resolution. Enjoy the tutorial and try it your own to design attractive web pages.
At the above tutorial we’ve learned about usage of Slice Tool in Photoshop and make a lush web page by using Slice Tool. First we created web new document in dimension 1280 by 1024. Then designed header by Custom Shape Tool and filled out color #6c017c. On header designed a text logo with help of 2 text layers. After that made menu bar with color #07ef6a and added text of menus on the bar. In body generate three blocks by Round Rectangular Tool and filled color #07ef6a. Added title of every block Plan 1, Plan 2, Plan 3 on the head shape. Created page footer with color #6c017c and at the end sliced all menu and gave links in Edit Slice Option. At the end saved document as Save For Web in your computer.