Many designers conceptualize and mock up their Web pages in Photoshop before they compile the components in an HTML editor such as GoLive, Dreamweaver, or FrontPage.
If you plan on really getting into preparing graphics for Web design purposes, I highly recommend getting a book solely devoted to the topic, where you’ll find tons of great tips targeting your specific needs.
Although the exact steps for designing and mocking up a Web page vary widely according to the style and nature of the page, this example at least gives you some idea of the process. For example, you might want to create a logo, button, or other standard element that appears on your page, identifying it as yours and yours alone. Follow these steps to create a splash page with great images, buttons, and logos:
1. Open all the images you want to use in the page.
For example, you can create a splash page (also called a home page in some circles) for a pseudo company called adventuretrekker.com. Before you sit down in front of the computer, have an idea of what you are going to create. I always do some rough sketches of any page I design. That way, I’m not staring at the monitor waiting for my page to magically take form.
2. Choose File-->New to create the canvas you will use to composite your Web page.
The New dialog box appears.
3. Specify your dimensions, mode, resolution, and background contents.
You can set your background contents to any color or to transparent. The resolution is really irrelevant because it’s the pixel dimensions that count for on-screen viewing. However, people often use 72 ppi (pixels/inch) to make it easy. The dimensions depend on the demographics of your audience. If you want to design a page that anyone in the world can view, even those in less-developed countries who are still cruising on old 486 PCs, you may want to stick with 640 x 480 pixels. The page can be even smaller if you want to take into account the browser menu bar and controls. If you’re designing for the middle of the road, 800 x 600 pixels may be the ticket, again a little less to account for the browser controls. If your audience is made up of sophisticated and high-end users only, you can get away with 1024 x 768 pixels. I’m sticking with 800 x 600, 72 ppi, and white contents for my splash page. You can also give your file a name in the Name text box. You don’t have to create a new blank canvas to composite your multiple images. Instead, you can use an image as your canvas and drag your supporting images onto it. Just be sure that the base image is the correct mode and dimensions.
4. Make your first selection. Then with the Move tool, drag and drop the image onto your blank canvas.
For my page, I made a rectangular selection with the Rectangular Marquee tool and dragged the image onto my white canvas. I left an open area at the top where my navigation bar will go. Be sure to name all your layers (double-click the name in the Layers palette). Creating a splash page can require a lot of layers, so layer management is essential.
5. Make your second selection and again drag and drop the image onto your splash page.
6. Apply any layer masks you need for your images to blend in with the canvas or the other images.
Click the Add Layer Mask icon at the bottom of the Layers palette. Use the painting tools to create your desired mask. My polar bear doesn’t quite look like he actually is part of the snowy landscape background, so I applied a layer mask and blended him in accordingly. I then used the Brush tool, with a feathered tip, set to Airbrush mode with a Flow Rate of 10%, to paint around the edges of my polar bear. I also added a layer mask on my snow layer because I wanted to mask out some of the snow over my polar bear so that he would stand out a little better.
7. If you have prepared a logo, drag it onto the splash page.
If you’re using a vector art logo, such as one created in Illustrator, just choose File➪Open. Specify your rasterization settings. If the logo is at least 100% of its intended size, rasterize it as RGB, 72 ppi, and leave the dimensions at the default setting.
8. Create the type and/or buttons for your navigation bar.
I’m not a big fan of buttons unless they are simple and understated. I prefer to use type only for my navigation bars. But hey, it’s a free world; if you like buttons, go for it. Be sure that your type looks legible onscreen. I used the font Verdana for both my logo and navigation bar, using 24 points and 12 points, respectively. I set my anti-aliasing to Crisp. You can create buttons quickly and easily in Photoshop. Using the Marquee or Shape tools, draw a shape such as a rectangle, an ellipse, or even a custom shape on a separate layer. Open the Styles palette and, with that layer active, simply click a preset style. Several preset libraries are dedicated to buttons. You’ll find them at the bottom of the palette options menu.
9. Apply any layer effects or styles to your images or type.
I kept it simple and just applied a drop shadow and inner bevel to my logo type and a drop shadow to my logo. Be sure to keep Use Global Light selected so that your light source for effects is consistent among all your elements.
10. Add title text to your page and apply any layer effects or styles desired.
I added my title type in the font Impact by using two sizes. Because my type overlapped and was offset, I put it on two different layers. I then applied layer effects — drop shadow, inner glow, and inner bevel. Of course, you can do this step concurrently with Steps 7 and 8, if you want. Then again, you can do any of the steps in whatever order you desire. There are no hard and fast rules, so just let your creative juices take over.
11. If you want to, you can now slice your image into chunks, which you can optimize separately.
Although not mandatory, sometimes slicing your image can help your viewers to perceive that a page is downloading more quickly. A Web page with slices loads as pieces, so users can get glimpses of the graphics and don’t have to wait for the entire page to load at once. Slicing also allows you to take chunks of your page and apply separate optimization settings to them in the Save for Web dialog box.
12. Use the Save for Web dialog box to compress the slices at different rates according to the quality needed.
You can also apply image maps and rollovers to slices in ImageReady. If it makes more sense to apply your slices to individual layers, rather than the image as a whole, you can do that as well. To preview how your image would look in a browser without HTMLcoding it, save a copy in the JPEG file format. Launch your browser and choose File➪Open. Your image appears in the browser window.
If you plan on really getting into preparing graphics for Web design purposes, I highly recommend getting a book solely devoted to the topic, where you’ll find tons of great tips targeting your specific needs.
Although the exact steps for designing and mocking up a Web page vary widely according to the style and nature of the page, this example at least gives you some idea of the process. For example, you might want to create a logo, button, or other standard element that appears on your page, identifying it as yours and yours alone. Follow these steps to create a splash page with great images, buttons, and logos:
1. Open all the images you want to use in the page.
For example, you can create a splash page (also called a home page in some circles) for a pseudo company called adventuretrekker.com. Before you sit down in front of the computer, have an idea of what you are going to create. I always do some rough sketches of any page I design. That way, I’m not staring at the monitor waiting for my page to magically take form.
2. Choose File-->New to create the canvas you will use to composite your Web page.
The New dialog box appears.
3. Specify your dimensions, mode, resolution, and background contents.
You can set your background contents to any color or to transparent. The resolution is really irrelevant because it’s the pixel dimensions that count for on-screen viewing. However, people often use 72 ppi (pixels/inch) to make it easy. The dimensions depend on the demographics of your audience. If you want to design a page that anyone in the world can view, even those in less-developed countries who are still cruising on old 486 PCs, you may want to stick with 640 x 480 pixels. The page can be even smaller if you want to take into account the browser menu bar and controls. If you’re designing for the middle of the road, 800 x 600 pixels may be the ticket, again a little less to account for the browser controls. If your audience is made up of sophisticated and high-end users only, you can get away with 1024 x 768 pixels. I’m sticking with 800 x 600, 72 ppi, and white contents for my splash page. You can also give your file a name in the Name text box. You don’t have to create a new blank canvas to composite your multiple images. Instead, you can use an image as your canvas and drag your supporting images onto it. Just be sure that the base image is the correct mode and dimensions.
4. Make your first selection. Then with the Move tool, drag and drop the image onto your blank canvas.
For my page, I made a rectangular selection with the Rectangular Marquee tool and dragged the image onto my white canvas. I left an open area at the top where my navigation bar will go. Be sure to name all your layers (double-click the name in the Layers palette). Creating a splash page can require a lot of layers, so layer management is essential.
5. Make your second selection and again drag and drop the image onto your splash page.
6. Apply any layer masks you need for your images to blend in with the canvas or the other images.
Click the Add Layer Mask icon at the bottom of the Layers palette. Use the painting tools to create your desired mask. My polar bear doesn’t quite look like he actually is part of the snowy landscape background, so I applied a layer mask and blended him in accordingly. I then used the Brush tool, with a feathered tip, set to Airbrush mode with a Flow Rate of 10%, to paint around the edges of my polar bear. I also added a layer mask on my snow layer because I wanted to mask out some of the snow over my polar bear so that he would stand out a little better.
7. If you have prepared a logo, drag it onto the splash page.
If you’re using a vector art logo, such as one created in Illustrator, just choose File➪Open. Specify your rasterization settings. If the logo is at least 100% of its intended size, rasterize it as RGB, 72 ppi, and leave the dimensions at the default setting.
8. Create the type and/or buttons for your navigation bar.
I’m not a big fan of buttons unless they are simple and understated. I prefer to use type only for my navigation bars. But hey, it’s a free world; if you like buttons, go for it. Be sure that your type looks legible onscreen. I used the font Verdana for both my logo and navigation bar, using 24 points and 12 points, respectively. I set my anti-aliasing to Crisp. You can create buttons quickly and easily in Photoshop. Using the Marquee or Shape tools, draw a shape such as a rectangle, an ellipse, or even a custom shape on a separate layer. Open the Styles palette and, with that layer active, simply click a preset style. Several preset libraries are dedicated to buttons. You’ll find them at the bottom of the palette options menu.
9. Apply any layer effects or styles to your images or type.
I kept it simple and just applied a drop shadow and inner bevel to my logo type and a drop shadow to my logo. Be sure to keep Use Global Light selected so that your light source for effects is consistent among all your elements.
10. Add title text to your page and apply any layer effects or styles desired.
I added my title type in the font Impact by using two sizes. Because my type overlapped and was offset, I put it on two different layers. I then applied layer effects — drop shadow, inner glow, and inner bevel. Of course, you can do this step concurrently with Steps 7 and 8, if you want. Then again, you can do any of the steps in whatever order you desire. There are no hard and fast rules, so just let your creative juices take over.
11. If you want to, you can now slice your image into chunks, which you can optimize separately.
Although not mandatory, sometimes slicing your image can help your viewers to perceive that a page is downloading more quickly. A Web page with slices loads as pieces, so users can get glimpses of the graphics and don’t have to wait for the entire page to load at once. Slicing also allows you to take chunks of your page and apply separate optimization settings to them in the Save for Web dialog box.
12. Use the Save for Web dialog box to compress the slices at different rates according to the quality needed.
You can also apply image maps and rollovers to slices in ImageReady. If it makes more sense to apply your slices to individual layers, rather than the image as a whole, you can do that as well. To preview how your image would look in a browser without HTMLcoding it, save a copy in the JPEG file format. Launch your browser and choose File➪Open. Your image appears in the browser window.
Creating a Splash Page Mockup with Photoshop
![Creating a Splash Page Mockup with Photoshop]()
Reviewed by Pepen2710
on
4:33:00 AM
Rating:
No comments:
Post a Comment