Professional Web Design Tutorial. By Nathan Hernandez

Transcription

1 Professional Web Design Tutorial By Nathan Hernandez

2 Learning Objectives THE PURPOSE of this tutorial is to allow you to use techniques previously acquired in Adobe Photoshop and apply them to the following: Developing an advanced website template in Adobe Photoshop Broaden your knowledge of the capabilities of the skills that you have previously acquired. LETS JUMP RIGHT IN..

3 STEP Open up Adobe Photoshop, go to File New and select New. Create a document with a width of 1200px and a height of 1200px. (This allows us to have plenty of space to design our site on). Set the resolution to 300 pixels/inch and select background contents to be white.

4 STEP 2. WE NEVER want a website with a width wider than 1000px, and usually no less than 800px for best results on all different resolution types. In this instance, we ll create a site with a width of 800px With your new document open, go to View and make sure than there is a check mark next to Rulers and Snap to guides under the snap menu. (if not press CTRL + R). Right click on a ruler and make sure Pixels is selected.

5 STEP Set one horizontal guide to 200px, and another at 1000px. 2. Set a vertical guide 40px. You may need to zoom in (CTRL + ) to do so. Guides are great tools to allow us to have an idea of the dimensions of our site during the design process.

6 STEP 4. Create a new transparent layer and name is nav_back (for navigation background). 2. Select everywhere from 0px to 1200px wide, and select 40px down and fill it with # (black). (refer to the image below to see what portion needs to be selected.) 1.

7 STEP Set 4 more horizontal guides at 320px, 440px, 560px, 680px. These are the dfferent intervals for our navigation, allowing us to create buttons with 120px width. Create a new text layer by selecting the text tool, and place it in between the 200px guide and 320px guide, and type in some text for your first button. For our purposes, we are going to use home as our first button. You can style it as you wish, but make sure it looks as neat and presentable as you can make it. Next, center your text so it is centered between the two guides.

8 STEP 6. USING THE SAME PROCESS, create the next three buttons, naming them what you want. (for our purposes, our navigation will consist of the following buttons: home about work and contact ).

9 STEP Now we want to create a rollover image. Duplicate the home text layer and hide the first one. (to duplicate: Right click and select duplicate). Change the duplicated layers text color to black. 2. Create a new layer below the duplicated text layer and name it over. 3. Select the area of the button between the two guides using the rectangle tool and fill it with white. Now we have a simplistic rollover image for our site.

10 STEP 8. (CONTINUED) THESE ARE THE OPTIONS THAT COME UP FROM THE PREVIOUS SLIDE. NOTICE IN THE BACKGROUND OF THE IMAGE, WE NOW HAVE A GRADIENT OVERLAY UNDER OUR NAVIGATION. THIS IS A BACKGROUND FOR OUR LOGO. YOU SHOULD HAVE SOMETHING SIMILAR TO WHAT YOU SEE TO THE RIGHT

11 STEP Create a new text layer and come up with a logo name that you want to use. For our purposes we are going to call it My Portfolio. From the guide at 200px and over, write in your text. Select the text and set its size to 12px and align it to where you want it. Highlight the word portfolio and set its color to #

12 STEP 10. NEXT we are going to want to open up a web browser and go on Google images to find a picture that we are going to want to incorporate as a placeholder for our flash content. The image should be relevant to the website we are creating. For our purposes, we googled business people and selected an image that we liked. The width of our flash content is 800px wide, so we need an image that is at least that width so it does not become blurry and distorted. If a image is to large, you can always resize it. The height of our image is going to be about 400px high, and anything over this is very inappropriate for our purposes. Place the image below the logo background we created, and in between the guides set at 200px and 1000px.

13 STEP 10. BY NOW you should have something similar to this image

14 STEP 11. NEXT WE WANT to organize the content of the webpage. Go to Lipsum.com and copy and paste some lorem ipsum into your document as placeholder text. This step is based on personal preference, so style it as you wish. Some people add pictures, titles, etc to make effective content. Often, a two column layout works effectively. Look online for examples on how to organize your content in a professional display.

15 STEP 11.(CONTINUED) YOUR CONTENT ORGANIZATION SHOULD BE IN A SOMEWHAT PROFESSIONAL DISPLAY AS SEEN TO THE RIGHT.

16 CONGRATULATIONS! At this point, you have a complete interface developed ready to be incorporated into Dreamweaver. Admire your work!