Creating a WEb Site in Photoshop and Image Ready


Your project will consist of a three page website based on a theme which we will discuss in class. This project will be completed as two separate assignments: the experiment and the actual website.
You will be required to create a sketch of your three pages and get approval of the design and content possibilities open to you in this project. This project will be your final project for Graphic Design and will be 20% of your final grade. Be sure to complete the "experiment" exercise first to see how the process of designing a website is done. Then move on to the actual final project. Please save all work in the same folder. At the completion of the project you will burn the project to a CD and hand in for grading.

COMPLETE THIS EXPERIMENT TUTORIAL FIRST
then move on to your final project,
The "index" or "home page" will contain two links to the pages you create. Each page will have a "back" link which will take the user back to the index page. Use this tutorial to begin designing your web site. You must relate all three pages in color , form, subject matter and concept. Complete one sketch of the site on papter to be handed in.
This technique will get your design juices flowing for your Website project. After you choose a theme for your site, you will complete this exercise to create a striking design for the background of the pages. Remember, your site must have a consistant design theme. Color, form, shape, style, choice of font and subject must reflect the meaning and concept of the site. You must get approval for the final website project from the teacher.

Step 1:
Make a new page 800 x 600 pixels, resolution 72.
Open two images inPhotoshop, landscapes work particularly well. Be sure these images are color schemes that you like.
Choose six colors with the eyedropper and add them to your swatches palette.

Use the Motion Blur to Create an Interesting Background
Step 2: Choose the first image, go under the filter menu and choose Blur>Motion Blur and set the angle to 999 and click OK. If too much color washes out, duplicate the layer a few times until the colorbecomes richer and then merge the layers together.

Create a New Layer
Step 3: Duplicate the image, go to edit>transform> scale and grab the top handles while holding the shift key and drag the handle down to form a smaller rectangular which takes up about one third of the page. Grab the move tool. Click once on the image, hold the shift key and click the plus sign on the keyboard to change the blending mode. Experiment until you are satisfied. Rotate the layer 90 degrees clockwise (CW). (refer to demonstration)
Create a Second Layer with Transform and Blending Modes
Step 4; Make a duplicate layer of the original layer and go to edit transform, left click inside the area and choose perspective from the dialog box, stretch the image fromthe top right corner tward the center of thepage forming a trapozoid shape. Play with the Blending Modes to create a pleasing effect. (the blending modes are in the layer palette to the left of the opacity slider)
Make a new layer on the bottom of all the layers and fill it with a color from your image. You may choose to change the blend mode of thelayer to see new effects.
Step 4:
Add Design Elements to the Page
Step 5: Add a new blank layer and add some "high tech" little add ons. For example, use a row of 10 or 12 point x's or plus signs. Add a few vertical or horizontal lines, holding the shift key will make the lines perfectly straignt. BE SURE TO MAKE A NEW LAYER EACH TIME SO YOU CAN MANIPULATE THE DESIGN ELEMENTS. Try changing the blend mode or the opacity of the design elements also.
Create Outlined Shapes Using the Marquee Tool
Step 6: Make a new layer, choose the eliptical marquee tool. Make a circle by holding the shift key, choose select> Modify border>border and choose about 5 pixels.( you can make the border smaller or larger by changing the number of pixels here) Choose a color from your swatches palette, go to edit>fill> forground color to fill the circle.

Create a Title for Your Page
Use the colors from your page and the text tools to create a title for your page.

Bring in A second Image from Your FilesStep 7:
Open a Second image from your files and bring it into the web page. Use the quick mask technique to bring in part of an image to blend into the background of your image. Use the blending modes to fade the image into the design.
Create Buttons to Be Used as Links to Other Pages
STep 8: Use the Marquee tools and the text tools to create a row of four links on your web page. Use the color scheme and the layer styles to use the some of the styles like emboss or drop shadow. Experiment with a variety of ideas. Remember to keep a consistant design theme throughout your work

Click Here for Part Two Instructions.