STEPS ON CREATING WEBSITE USING ADOBE PHOTOSHOP AND DREAMWEAVER

 

Creating an HTML/CSS Web Page using Adobe Photoshop and Dreamweaver

Part 1

Many people have told me that they wish that they could design web sites. So I thought I'd create this tutorial, since there doesn't seem to be too many free courses online that teach both the graphic design skills and HTML and CSS necessary for creating web pages.

I would like to outline (not a good word for right brained people like me) a workflow (?) for creating a web page using my home page as an example and Windows as the operating system (Mac users will have to find alternate keyboard shortcuts). Since I am a self taught designer, I'm not sure how unconventional my methods will seem, but hope this will be helpful. As you know, technology quickly becomes obsolete, so may the expiration date on this project live long and prosper...

Adobe® Photoshop® is the industry standard for digital imaging. Since the web is a low res (72 dpi) graphics experience, the images that you create will not not need the kind of quality as print media. With photoshop, you can create RGB raster images, which basically means they're quick and easy to work with. The tiny file sizes are perfect for the web. If you ever want to use them for anything else, like a magazine ad, you'll find that the quality is not good enough (You may want to use Adobe InDesign® or Illustrator® for print media).

The types of files we will use are jpgs and gifs. Png files are the best, but we'll have to wait until everyone stops using old web browsers. I use png files all the time with Flash projects (See my Flash Tutorial) because of the transparent effect in animations.

I don't know which version of Photoshop you have, so you'll have to at least play around with it for a few hours to find out how the layers link together and other basics.

First, I'll start off with a blank canvas. Because computer screen resolutions are becoming increasingly wide, very few people still have their displays set to 800x600 to surf the web. I'll start with 1000x800 pixels, because that is a comfortable size for me to work within Photoshop and it will allow me to create a site that is a good size.



Select black (#000000) in your foreground color and then hold down Alt>Delete to fill the canvas with black as your background color. You can create gradient and textured backgrounds that tile, but here we're just using solid black.

Create a new layer. Make sure that your rulers are set (View menu>Rulers). With your selection tool create a rectangle that is 880x190 pixels. You can tell the height and width by looking at the Info palette in the windows menu as you're creating the rectangle. Select a color in your foreground color picker and then hold down Alt>Delete to fill the rectangle with color. I used orange for visibility. Drag and drop vertical guide lines from the ruler area to the dotted lines of the selection rectangle. Hold Down Control>Delete to deselect the rectangle.



I double click on the current layer to open the Layer Style box and check the Gradient Overlay checkbox and click on the words 'Gradient Overlay' to toggle to the gradient options. I click once on the color strip to open the Gradient Editor. Double click on the bottom left color stop and choose #a6d0ff. I double click on the bottom right color stop and choose #7588ff and click okay on all open dialogue boxes. Remember to save as often as possible.



I create a new layer. We're going to create a series of radiating triangles that I like to call a 'burst'. First, hold down the rectangle tool in the tool bar until you see a menu appear. Select the 'custom shape tool'. In the tool options click on shape and select a triangle. If you don't see a triangle, click on the small arrow in a circle toward the right of the box and choose 'shapes' from the drop down menu.



Choose white (#ffffff) as with your foreground color picker. Turn off layer 2 (the one that has the rectangle) by clicking on the eye. Make sure that layer 3 is selected and draw a white rectangle about 100x100 pixels. Hold down Control>T to transform the triangle. Grab the top anchor and stretch it. Then hold the shift key and the lower right anchor to scale it down to about 70x350 pixels.



Then hold the shift key and the lower right anchor to stretch it to about 70x350 pixels. Duplicate the layer and transform this triangle also. This time move the center point to the anchor at the tip of the arrow and rotate the entire triangle so that the second triangle tip stays in the same place and the base of the triangle begins to form a circle of triangles. Remember, the center point has to be moved to the anchor at the tip for this to work. When you are rotating you'll see the rotation symbol when you mouse is just off an anchor.



Repeat this until you have formed a complete circle of triangles. Merge all the layers of triangles together (select layers and hold Control>E) to form one layer. Turn on the rectangle layer to see it. Make sure you are on the 'burst' layer and transform (Control>T) the burst and move it until it covers the rectangle and the center point is about 2 thirds of the way up on the rectangle. Then select the rectangle layer and Select the negative space (black) by selecting the magic wand tool and clicking on the black.



Press the delete key to cut off the burst that 'bleeds' over the rectangle. Deselect the rectangle (Hold Control>D). Select the rectangle layer again and adjust the opacity to 11%.



It is now fun time with brushes. Since this is a personal site, there are many free brush downloads available. Just Google 'photoshop brushes' and find something you like. Download the file and add it to the brushes folder (C:\Program Files\Adobe\Adobe photoshop-version\Presets\Brushes). I found some stars and swirley borders on http://psbrushes.net/.

Create a new layer. Using the brush tool, and selecting a new brush, adjust the master diameter and click once over the rectangle. I added some stars on one layer and adjusted the opacity of the layer to 40%. On another layer, I added the swirley borders at 74%. The intention is to have very subtle effects that activates the plane with 'energy'. Be sensitive and find what is pleasing to the eye.



I applied some tree silhouette brushes that I also found on the web on a new layer. I didn't want these to be solid black so I double clicked on the layer to open the Layer style box. I checked the color layer checkbox and toggled to 'color overlay'. I selected #3e2613 with the color picker, clicked okay and made the opacity 17% on the color overlay color option.



I continued to add more tree brushes on different layers with the foreground color set to black. On the leaf brushes, I adjusted the layer style to have a green color overlay even though the actual brush color is black.



Fun time with type. If this were a company logo, then we would have to make a big deal out of this by carefully creating vector graphics that could be used in all applications and possibly spending a gazillion dollars on a font. However, since this is just my personal web site, all I need is Photoshop and Google to find a nice free font to download. I went to 1001Fonts.com and found this interesting font by Chris Hansen called "Got Heroin?". Not crazy about the name, but I love the grunge look and feel.



Type is a powerful graphic element. There is about as much to learn about positioning type as there is in creating representational art. Quick tip: Click in between letters and use the (Hold down Alt key/arrow left or right) arrow keys to make sure that the closest space between letters is a small gap. This is an extreme oversimplification of typography, but nice to practice.



I took the 'Carlos Aleman' text and rotated it (Hold Ctr>T) slightly. Then I rasterized it (Layer>Rasterize>Type) so that I would be able to cut off some of the shapes (under the m and n) with the polygon lasso tool (select a region and use the delete button). Then I double clicked on the layer and added some layer styles (Gradient overlay and outer glow). I wanted a dark outer glow so that the text would be readable against a light background. The outer glow blend mode must be 'normal' for this to work.




The next image shows a still from a video teaching series I had up on the web. I did a screen capture/shot of it and pasted it on a new layer. I needed to remove the background (yes, that's a mural of some killer whales). There are many techniques to removing the background such as the background eraser tool, magic wand, extract filter and countless of other complex techniques. Sometimes you need to use a combination of techniques on different layers to take advantage of the effectiveness of each method on different edges.



One of the easiest methods is using the polygon lasso tool with anti-alias checked in the options. Since I don't have much hair this will be an simple step. I just select areas around my head and press the delete button.



Here, I pick a color from the rectangle with the eye dropper tool and open my Hue/Saturation box (Hold Ctr>U). First I check the 'Colorize' check box. Make sure that the Preview is also checked. I slide the Hue a little into the bluer range and click okay.



Duplicate this layer by dragging the layer to the New Layer icon. I want more of a high contrast 'graphic novel' effect to compliment the trees, so on the new layer I select filter>artistic>poster edges and slide the settings until I'm happy with the posterazation.





Click Okay and turn the opacity on that layer to 60% so that the filter effect 'blends' with the previous layer. Select both layers (link of shift key -depending on your version of Photoshop) and transform (Hold Ctr>T) to scale down and move over the rectangle.