After having success with placing my logo with Lesson 4, I realized my muted, dark, color scheme did not seem to fit the idea of baking cakes. I am wanting a more lively website and decided to create a custom background image. I am going to backtrack and create a background image with a brighter color scheme.
Overview: Using Adobe Photoshop, I am going to create a a lively background image with a new color scheme for my web-site using the colors I have already chosen in Kuler. (see Lesson 3)
If you want to follow along, you can download a trail version of Adobe Photoshop here.
(Double-click images to make them bigger.)
How to make a custom background image in Photoshop:
- In Adobe Photoshop open a new page. From the menubar click file, new. When the pop-up window appears, give your image a name like background, scroll down to web in the present box, and change the size to 1280x 1024, then click OK. (see figure 5.0)
- Using the colors already loaded into your color swatches from Kuler (see lesson 3), create vertical lines of varying widths across the page. You can use the Rectangular Marquee Tool to create long rectangles and then use the color picker to pick your color from the color swatches. Then use the Paint Bucket Tool to fill the rectangles. (see figure 5.1)
- After you have created lines of your basic colors, go to the layers menubar and double-click on background. This will pull up a new pop-up, click ok. This will create Layer 0. (see figure 5.2)
- Right-click on Layer 0 and select duplicate layer. Using the move tool while holding down the shift key, drag your copy and drop it adjacent to the lines you already created. (see figure 5.3)
- Go to the Layers toolbar and select Layer 0 copy. On your keyboard click ctrl+E to marry the layers down.
- Repeat steps 4, 5, and 6 until your page is full of lines.
- Now let's brighten it up. Pick a color that matches your color scheme from the color picker. In my case, I want to add more pink. (see figure 5.4)
- In the Layers toolbar click new layer. (see figure 5.5)
- While in Layer 1, use the Paint Bucket Tool to fill the entire background and make it pink. (see figure 5.6)
- In the Layers toolbar select normal and scroll down to select hue. (see figure 5.7)
- On your keyboard click ctrl+E to marry the layers down.
- Finally, save your image for the internet. Click file, save for web and devices, select png-24 and save in your images folder within your site folder. (see figure 5.8)
figure 5.0
figure 5.1
figure 5.2
figure 5.3
figure 5.4
figure 5.5
figure 5.6
figure 5.7
figure 5.8
No comments:
Post a Comment