Templates by BIGtheme NET
Home / Basics / Photoshop Tutorials: Design and Slice Lush Web Page

Photoshop Tutorials: Design and Slice Lush Web Page

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.

Enter the name of New Document for Web Page. Image © reserved 2015 Photoshop Helps.com

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.

Set the Size, Width and Height for the Web Page. Image © reserved 2015 Photoshop Helps.com

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.

Set the Resolution and Color Mode of the Web Page Document. Image © reserved 2015 Photoshop Helps.com

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.

Pick up white item from Background Contents for Web Page Document. Image © reserved 2015 Photoshop Helps.com

Now the document will appear with the size of 1280 by 1024. The original document is here in the below picture.

First look of White Blank Web Page sheet on the screen. Image © reserved 2015 Photoshop Helps.com

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/.

Make a header for Web Page first by Rectangular Tool. Image © reserved 2015 Photoshop Helps.com

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.

Write first Text for Website Logo with Type Tool. Image © reserved 2015 Photoshop Helps.com

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/.

Write second part of Text for Website Logo with Type Tool. Image © reserved 2015 Photoshop Helps.com

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.

In below of Header make Menu Bar by Rectangular Tool. Image © reserved 2015 Photoshop Helps.com

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.

Write down the Names of Menu by Type Tool. Image © reserved 2015 Photoshop Helps.com

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.

Plot first block of Solid Color in body of Web Page. Image © reserved 2015 Photoshop Helps.com

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.

3 blocks of Solid Color added in Web Page. Image © reserved 2015 Photoshop Helps.com

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.

Pick up a figure for Blocks header from Custom Shape Window. Image © reserved 2015 Photoshop Helps.com

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.

On 3 blocks make header by the Custom Shape Tool. Image © reserved 2015 Photoshop Helps.com

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.

Write the Text on First Block Header With Type Tool. Image © reserved 2015 Photoshop Helps.com

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.

Write Text on all blocks headers with Type Tool. Image © reserved 2015 Photoshop Helps.com

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.

Draw a footer of Web Page with help of Rectangular Tool. Image © reserved 2015 Photoshop Helps.com

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.

Insert background of Web Page and write Footer Text. Image © reserved 2015 Photoshop Helps.com

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.

Slice out the Web Page with help of Slice Tool. Image © reserved 2015 Photoshop Helps.com

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.

Pick up Edit Slice Option from list on the Web Page. Image © reserved 2015 Photoshop Helps.com

give the URLs to every text which you want to link, see the below image. Do the same step as well for more linking.

Write the link address and Alt Text in Slice Option Window. Image © reserved 2015 Photoshop Helps.com

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.

Our Final Design and Slice Lush Web Page in Photoshop. Image © reserved 2015 Photoshop Helps.com

Ultimate Results

Conclusion

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.

About Ali Imran

Howdy! I’m + Ali Imran and CEO of Photoshophelps.com. I have passed BS Computer Science degree in the year of 2013. I’ve a great experience in Content Writing, Photoshop, Graphics Designing, SEO, Web Developing and Web Designing.

Leave a Reply

Your email address will not be published.