• SamWeb iconSamWeb
  • My Sam iconMy Sam
  • E-mail iconE-mail
  • SHSUOnline | Blackboard

Fast Links

IT@Sam - Technology Tutorials

  • Home >
  • Services & Resources >
  • Information Technology >
  • Photoshop

 

Photoshop Web Graphics

SHSU Technology Tutorials | Photoshop Graphics



PHOTOSHOP: WEB GRAPHICS AND BACKGROUNDS
 

In this tutorial, you will learn how to make Textual Web Graphics, Web Buttons, and Backgrounds for your web site as well as learn how to save these items for the web.

Making Textual Graphics

  • Create a new image by going to File > New
  • Set the Image Properties such as size and background.
  • Set the background to “Transparent.”

    New Image Properties


Select the Text tool from the toolbar.Text Tool

Click inside the image at the point where you want the text to begin.  A text cursor will appear allowing you to type.

 

Text Graphic

 

Once you have put in the text, you can change the text orientation, color, type face, and size. Start by highlighting the text using the text tool. When you have the text tool selected, a Text Formatting toolbar will appear at the top of the screen.

Text Toolbar

These tools allow you to change the font, font style, size, sharpness, alignment and color as well as arch the text.

 

 

Changing the font and size

  • Make sure text is highlighted (Text tool must be selected).
  • Select a size from the pull-down menu, or you can type in the size and hit enter.
  • You can also use the pull-down menu to select a type face.

To change the color

  • Make sure text is highlighted (Text tool must be selected).
  • Single click the color box in the Text Formatting toolbar, and then choose a color for your text
  • Select OK to apply the color to the text.

 

If you want to add a little something extra to your text, you can add a Drop Shadow.

 

  • Go to Layer > Layer Style > Drop Shadow
  • You can change the Angle of the shadow by clicking on another location on the circle
  • you can also adjust the Distance, Spread (thickness), and Size (blending of color) of your Drop Shadow. Feel free to mess around with it.
  • Click OK when you're done.

If you don't like where the text is on the image, you can move it by using the Move tool Move Tool to drag the text.

 

Making Web Buttons

Layers Palette

Many websites use “rollover” buttons, that is, buttons that change when the mouse arrow is over it. To create a rollover button, you will first create the components in Photoshop, and then use ImageReady to set them up for your site.

Start by creating a new image in Photoshop. Make a separate layer for each state of the button, the Normal state (when the mouse is not over the button), the Over state (when the mouse arrow is over the button) and the optional Down state (when the mouse is clicked over the button). Make them look however you want – you can use different filters and textures on the image. Also, if you put text on the button, make it in its own layer as well. Rename the “Background” layer in your layer palette to “normal,” which will be how the button looks when the mouse IS NOT over it.

To view layers separately, you can click the eye [Eye] to the left of a layer to want to make invisible on the Layer Palette, shown below.

Next, select the layer in your lay palette that is the “normal” layer. Next, go to Layer > New Layer Based Slice. It turns that layer into a slice, which determines the area where when the mouse is over it, will trigger the rollover.

Save the file, and choose File > Edit in ImageReady. This will open your image in Adobe ImageReady. It may take a while, so be patient.

Under the Web Content palette, select the “normal” state. Then in the Layers palette, make sure the correct layers are visible and hidden for this state. Click the eye icon [Eye Icon] to hide or show a layer.

In the Web Content palette, choose the slice that you created for the button in Photoshop before. Then, click the Create Rollover State button [Create Rollover State button] at the bottom of the palette. Photoshop inserts the Over state below the slice. The Over state occurs when the user positions the mouse over the button.

Layer Palette with Normal state  selected

Layer Palette in ImageReady. Notice that the “normal” layer has an Exacto blade icon next to it. This means that there is a Layer Based Slice in that layer, which we created in Photoshop Earlier.

Web Content Palette

With the Over state selected in the Web Content palette, click the eye [Eye Icon] next to the layers in the Layers palette that you want to hide or show for this state.

Important: Before you make any changes to the layers of a button, always make sure you have the correct rollover state selected in the Web Content palette.

If you want to add additional states to this button, such as a “down” state (the state when the user presses the mouse button), then repeat the steps for the normal state.

If you want to change the state Photoshop creates to a different state (for example, from “down” to “selected”), select the state, and choose Rollover State Options from the Web Content palette menu. Then, select the desired state, and click OK.

To preview the rollover states, select the Preview Document button [Preview Document button] in the toolbox, and move the mouse over the button. If you created other states, try activating them as well by clicking the mouse button. Select Preview Document again to turn off the preview mode.

Lastly, save the file. You may want to save it in Photoshop file format also, so that it will save the layers and you can edit them later if you wish.

 

Backgrounds

In Photoshop, you can create backgrounds for your webpage. Here are 3 different kinds of backgrounds that you can create – a side bar, a top bar, and a top and bottom frame background.

Start by creating a new file File > New. Set the size to 800 x 600 with a transparent background.

New Background Image

To add a color to the image, first add a new layer by clicking Layer > New > Layer… Next, go to Edit > Fill then choose “Color” from the menu, and choose a color.

Fill Color

You can also fill by choosing the Fill tool Fill Tool from the toolbar, then choose a color from the palette at the bottom of the toolbar and click an area in the image, with the new layer selected. Remember to always create a new layer for each element you add to your background, so that you can come back and change it later.

You should now have one transparent layer and one colored layer in your Layer Palette. Create a new layer for the side or top bar.

With the new layer selected in the Layer Palette, choose the Rectangular Marquee tool Marquee Tool from the toolbar.  Drag it down or across the image to create a selection on the top or side of the image.

Side Bar Selection Top Bar Selection
                              side                                                                     top

Fill in the selection with color by using Edit > Fill or the fill tool. Fill Tool

You can also add a simple shadow to the bar. To do this

  • create a new layer.
  • Select the pencil tool from the toolbar Pencil tool
  • Starting at the very edge of the bar and the top of the image, draw a black line along the edge of the colored bar. Hold down the shift key to make a straight line.

  • Make another layer, and repeat using a lighter grey line right next to the black line.

You now have a very simple shadow on your color bar that you can change later if you wish.

Create a new layer. In this layer, use the crop tool Crop Tool to select an area from the image. This smaller image will be repeated in a CSS to create a background for your webpage. For a sidebar, you will set the repeat to repeat-y, for a top bar repeat-x. Double-click to crop the image.

Back Ground Crop Selection  Background Cropped

Save For Web

Saving for the web optimizes your image to give you the best quality image at the smallest size so that those who view your web page will not have problems viewing content due to their connection speed.

To save your image for the web, go to File > Save for Web… The “Save for Web” window will come up and allow you to set options for your image.

Safe For Web

Here you can set the different options for saving your image. Always make sure to have “Optimized” checked. The rest of the options depend on what quality and loading time that you want for your image. In the grey bar under the preview of the image are the calculations of the size of the optimized image and loading time for a user whose modem is a 28.8 kbps modem. By clicking on the “2 up” and “4 up” tabs, you can preview lower levels of quality for the image. You can also choose between JPG and GIF format. GIF format is optimal for an image that has a transparent background, such as the textual graphic demonstrated earlier in this tutorial. JPG is better for photographs and images with a lot of detail.