CREATING A BANNER IN PHOTOSHOP

Transcription

1 CREATING A BANNER IN PHOTOSHOP 1 This tutorial will take you through how to create your own basic banner in Photoshop. We will go: A. Creating a background 1. Launch (Open) Photoshop CS5 The interface of the workspace may vary slightly depending of the version of Photoshop you are using. 2. Click on File in the Application Bar - New. A window will open. Enter the dimensions of the graphic in the Width and Height fields. Make sure you have the right Resolution, Color Mode, Color Profile and Pixel Aspect Ratio and then click OK. 3. An OK opens as workspace similar to the image below. Notice that the document bar indicates an image size of 66.7%, if you want to see the full size, click on the Zoom Tool and click on the Workspace till you see 100% in the document bar.

2 1. Next you want to save the document first as a.psd file (Photoshop document), by doing the following: a. Click on File in the Application Bar, b. Choose Save As and save it in the root folder of your defined site in Dreamweaver as illustrated in this image. 2 File format is Photoshop Note: The.psd file format is editable and is considered the raw editable file of your banner or logo. 2. Next you want to pay attention to your layers panel, Being able to working with panels in Photoshop is key to creating graphics successfully. A look to the left of our Photoshop Workspace reveals the Layers Panel. If the Panel is not available. You may make it visible by showing it in the workspace. 3. To do this, click on the Windows Tool in the Application Bar 4. Choose Layers in the options of the drop down menu.

3 5. Usually it is a good practice to Double click on the lock of the background layer to unlock it. By unlocking it, it becomes more flexible and responsive to your creative ideas or options. 3 When you double click the lock, you will see the above dialog box. Type in the name of the layer and click OK Double click on the color selection tool and select a color that will become the background of your banner (if you do not want the white background color or whatever the default color is). Click OK. The Color will appear here after you click OK. See picture below. Color selection Tool Gradient and Paint Bucket Note: Photoshop displays 2 colors at a time. The one on top (green) is the foreground color and the one below in the background color. A click on the color selection tool opens a palette similar to the image below. Note: The Paint bucket Tool is used to do a quick color fill. The Paint Bucket Tool alternates with the Gradient Tool. Click and hold the mouse to see other options. This works the same with all the other tools in Photoshop.

4 4 1. You can either fill you graphic with color or a pattern using the Fill options under the Edit Tool in the Application bar. Click on Edit in the application bar and choose Fill option. A Dialog box pops up. With Content and Blending Options as indicated in the image below. 2. Click on the Use field in under the Content option and choose what you want to fill the Layer with. a. The options available under Use are; Foreground and Background colors, Colors and Patterns. There are other options but these are probably the ones you will need to use. Choose a Color or pattern for your design. Depending on what you chose you will either have a color or a pattern fill as shown in the image below. A pattern fill A color fill Make sure you continue to save your work. Use the save option available under the File Tool on the Application Bar.

5 5 3. Add text to your banner. Click on the text tool in the Photoshop Toolbar. a. Notice the text tool options that appear at the top similar to the image below. b. Change font format by changing the Font style, size, color in the Text Options. By default, the font color is the foreground color in your color pallet. So make sure you change it using the font options at the top. 4. Type in your text, when done, you may have to commit the changes by clicking on the check sign in the Text Tool. You can use the move tool to move the text to the desired position. You can always change the font style and size by selecting the text layer and changing the options in the Text Tool options.

6 6 The completed logo may look like this with text well positioned based on your creative preference. Save your work by clicking on File on the Application Bar: 1. Choose Save for Web and devices 2. And save it in the desired file extension in the images folder, or the root folder of your site. 3. In Photoshop your options are to use.jpg,.gif, or.png (24) or.png(8) file extensions. i. JPG and PNG (24) are for Polychrome (many colors) images and graphics, and GIF and PNG (8) are for Monochrome (few colors) images or graphics.