Prior to Photoshop CS3, web designers created rollover buttons using Photoshop and Image Ready, which were previously packaged together. Adobe discontinued using Image Ready when it purchased Macromedia’s Dreamweaver, assuming that web designers could use this specialized program with Photoshop to create their rollovers. You create the rollover buttons in Photoshop the same way. Then, you can use Dreamweaver, other web editors or a text editor to create the rollover code. Learn how to create rollover buttons in Photoshop CS3.
- Open a new document that is size appropriate for your buttons. This can be the size of the website or the size of the button banner. Click on “File>New” and enter the size in the corresponding boxes.
-
Step 2
Create the first button as it will appear when it is not selected. Select the correct shape tool from the “Tools Palette” and draw the button. Then, select the “Type” tool and enter the text inside the button.
-
Step 3
Apply the desired effects to the button or text. Adobe has provided several ways for you to apply effects. To apply your own custom effects, select the layer from the “Layer” palette. Then, select the desired effect from the “FX” drop-down box that is located on the bottom of the “Layer” palette.
Photoshop CS3 provides preset web styles designed specifically for web buttons. If the “Styles” palette is not visible, select “Windows>Styles.” From the “Styles” drop-down menu, select “Web Styles.” Make sure the button layer is selected and choose the desired layer from the “Styles” palette.
-
Step 4
Create the remaining buttons. Hold down “Control” to select the text and the button. Right-click inside the “Layer” palette and select “Duplicate Layer.” Move the copied layers to the location of the next button. Change the text to the new button’s name. Repeat this step to create all of the buttons.
-
Step 5
Slice the buttons. Select the “Slice” tool and draw a box around each button. Double-click on each button to add slice options. Make sure that the “Image” is selected in the “Slice Type” drop-down box. Enter a name that describes the button turned off, such as “[button]_off.” Enter any information pertaining to the website in the remaining boxes.
-
Step 6
Select “File>Save for web. . .” Press the “Save” button. In the “Save Optimized As” dialogue box, select the location for your images. Create a new folder called “Off.” If you entered information for the website, change the “Format” to “HTML and Images.” Click “OK.”
-
Step 7
Select “Windows>Layer Comp.” Create a new layer comp by selecting the “Create New Layer Comp” button. Name it something that describes the current set of buttons such as “Off.”
-
Step 8
Edit the buttons to apply the rollover state. Apply the styles, colors or effects to the current buttons. Create another layer comp and name it “On.” Repeat Step 7 to save the buttons in a new folder called “On.” Open the folder containing these buttons and rename them to reflect the “on” state.
-
Step 9
Create the rollover code in a web editor. Use Dreamweaver, another web editor or a text editor to create the rollover code. Here is the JavaScript code for the home button in this tutorial: <a href=”index.html” onmouseover=”home_off.src=’images/on/home_on.jpg’;” onmouseout=”home_off.src=’images/off/home_off.jpg’;”> <img alt=”home_off” name=”home_off” src=”images/off/home_off.jpg” width=”130″ height=”47″ border=”0″/></a>
One of the easiest and best ways to create a spectacular web site is to use Adobe Photoshop. By working directly in Photoshop, you get an exact idea of what your final web site will look like as you are building it. The process is relatively simple.
- Open a new document in Photoshop. Make the size match the setting you will be using for your page, such as 1024×720 or 800×600.
-
Step 2
Create the “image” part of your web page. Use the drawing tools and the filters and blending modes to create the logos, icons, buttons and so on for your site. Use layers to keep all your elements separate so you can more easily move them around as you work.
-
Step 3
Copy and paste into the document any images or photos you want to use. To do this, go to the Edit menu and select the Transform tools to resize and reposition the images.
-
Step 4
Use the Slice tool to cut your overall image into slices. Try to conform the slices to the major features of your web page when you are doing this. Next, save your document.
-
Step 5
Go to the File menu and click Save for Web. Save as the best low resolution version of your image from the options presented. Usually, if your page has pictures or photographs in it, you will want to export the slices out as JPGs. If the page has no photos, you might be able to get away with exporting the slices as GIF files, which will load even faster.
-
Step 6
Open a web page editor, such as Dreamweaver or Expression Web, and create a web site sized to match the size of the one you did in Photoshop. Create or draw a table, using a series of columns and rows that will fit the sliced images you made.
-
Step 7
Start inserting your images where they need to go. Type in your text, create your hyperlinks, and then it’s time to publish.
Whether you are wanting to install a newer version of Photoshop or you simply want to get rid of old software you no longer use, know that uninstalling Photoshop CS3 is a quick and relatively simple process that only requires a few mouse clicks.
Removing Photoshop CS3 in Windows
-
Step 1
Click your “Start” button and select the “Control Panel” from the list of options.
-
Step 2
Select the “Add or Remove Programs” option. In Vista, this will be known as “Uninstall a Program.” This will open a new window that shows a list of all the programs currently installed on your PC.
-
Step 3
Choose the “Adobe Photoshop CS3″ option from the list of programs. You will see a “Remove” button appear in the same bar as the program name.
-
Step 4
Click the “Remove” button. This will bring up a small window asking if you are sure you want to uninstall the program. Click “Yes” and the uninstall will commence.
Remove Photoshop CS3 in Mac
-
Step 1
Locate the Photoshop CS3 installer. This will most often be found in Applications/Utilities/Adobe Installers. Once found, double-click the icon.
-
Step 2
Authenticate as an administrator. You can do this by selecting the “Authenticate as an Administrator” option from the menu that appears.
-
Step 3
Select “Remove Components” once you have authenticated. This will bring up a new window asking you if you want to uninstall the product.
-
Step 4
Select “Yes” from the window and follow the on-screen instructions for the installation to remove the program from your Mac.
Creating your own banner for a web site is fun in Adobe Photoshop CS3! Don’t settle for ready-made banners when you can design a personalized banner ready to post on your web site.
- Start a new Photoshop CS3 document by going to ‘File”, ‘New’. In the New window, set the width to 700 pixels, the height to 120 pixels, color mode RGB, and the Background Contents as ‘transparent’. Click ‘OK’
-
Step 2
Create a new layer. [go to 'Layer'>New>Layer.] Name the layer “background”. Then, select the gradient tool, adjust the right side color to #f4be18 in the Gradient Editor, pick the upper left adjustment to 0% opacity, and the right upper adjustment to 100% opacity. Click OK.
-
Step 3
Create New Layer. Name the layer “YellowRose”. Paste image and position to left side of banner. I use the Yellow Rose image file.
-
Step 4
Create New Layer. Select Text tool, Type the business name. I used “Park Avenue BT” in 84pt, color= # f8d907 and added a drop shadow layer effect. You can select the Layer Style palette by going to ‘Layer’ > Layer Style> select any of the effects to open the palette.
-
Step 5
Then, “Save for Web & Devices” and choose the image that offers the best resolution for the smallest file size. Save as a JPG image.
Here is an example of how the banner would look on the page. By modifying the color and image, you could create a variety of banners for different sites.
Eyeglasses, lakes and other reflective surfaces can produce aggravating glare when photographed, especially when using a flash. With the Clone Stamp tool in Photoshop Creative Suite 3 you can re-create the image behind the glare by copying color and pattern from similar areas and pasting it on top of the reflection. If your camera flash or the sun creates a glare on your photograph, remove it in Photoshop CS3.
- Open Photoshop CS3. Click “File” in the top menu bar and choose “Open,” then select your photograph file and press “OK.”
-
Step 2
Press “File” in the top menu bar and select “Save As” from the drop-down menu. Save your unaltered photo for future use. Press “OK.”
-
Step 3
Select “Window” in the top menu bar and choose “Arrange” then “New Window for [file name]“.
-
Step 4
Click and drag the original photo to one side of your screen.
-
Step 5
Select the second window and press the “Zoom” button on the main Toolbox. Click the “Zoom In” button until the glare fills most of the viewable window.
-
Step 6
Press “Clone Stamp Tool” in the main Toolbox. Choose a soft-edged brush that is sized smaller than the glare area.
-
Step 7
Drag your mouse to an area directly beside the glare. Hold the “Alt” key on your keyboard while you click the mouse once to sample a color.
-
Step 8
Move your mouse to the edge of the glare and click. Continue clicking to replace the glare. Increase the brush size by pressing the left bracket key (“[") on your keyboard or decrease by pressing the right bracket key ("]“).
-
Step 9
Repeat Steps 7 and 8 as needed to cover the glare.
-
Step 10
Click “File” from the top menu bar. Choose “Save As” from the drop-down menu and input the final image name and file format. Press “OK.”
Adding text to an image is a great way to enhance a design. Adobe provides several different types of fonts. You can also download or purchase additional fonts to add to your font folder. Adding fonts to Photoshop is quick and easy.
- Download the font you want add to Photoshop from a website that sells fonts (see resources section below). Note that while many fonts are free, some require a purchase. Save the fonts to a location that is easy to find, such as the desktop.
-
Step 2
If you are using Windows, open the “Control Panel.” Select “Start>Control Panel.” Double-click on “Fonts” folder.
-
Step 3
If you are using Mac, navigate to your library or open “Fontbook.” To navigate to the library, open “Finder.” Select the following folders: “Macintosh HD>Users>[Account Name]>Library>Fonts.” To open Fontbook, select “Applications>Fontbook.”
-
Step 4
Place the font in the “Fonts” folder. Drag the font from the location where it is saved into the “Fonts” folder, or right-click on the font and select “cut.” Then paste the font in the folder. If you are using Fontbook, drag the font onto “All Fonts” or select “File>Add Fonts…” and select the font to add.
-
Step 5
Open Photoshop. Select the “Type” tool from the “Tools” palette. Select the new font from the “Set the Font Family” drop-down box. Click inside the pasteboard and begin entering your text.
The “Replace Color” adjustment command in Adobe Photoshop makes it easy to change a single color to a different color in a matter of minutes. The steps below will tell you how you can use this powerful command to replace any color in your Photoshop image.
- Start Adobe Photoshop and open an image that contains a color that you would like to replace with another color.
-
Step 2
Choose the “Image” menu, point to “Adjustments” and click on “Replace Color” to open the “Replace Color” dialog box.
-
Step 3
Click on the color within your image that you want to replace with another color. Your cursor will be replaced by the eyedropper tool at this point to pick up that chosen color.
-
Step 4
Increase or decrease the fuzziness of the image by using the “Fuzziness” slider in the “Replace Color” dialog box. The more you increase the fuzziness, the more color will pick up. Decreasing the fuzziness of the image means the less color the image will pick up.
-
Step 5
Click the color well toward the bottom of the “Replace Color” dialog box to bring up the “Select target color” dialog box.
-
Step 6
Choose the color you want to use to replace the existing color in the “Select target color” dialog box, using the color field and other color settings to pick your custom color.
-
Step 7
Select the “OK” button to close the “Select target color” dialog box and “OK” again to close the “Replace Color” dialog box. You will now see the results of the color replacement. You can return to the “Replace Color” dialog box at any time to readjust the color replacement settings.
A brief article explaining how to use layers in Photoshop CS3.
- I know that using photoshop can be tough, i’ve been there and so have many other graphic artists. But once you learn how to use it, it’s like driving a car or riding a bike. That is-if you don’t forget how it works. (I paid too much money for college to forget how Adobe works
)
-
Step 2
First, load photoshop. Now open a new file, make it whatever you want, you can even load an image if you like. But, in this tutorial I will be working from scratch.
-
Step 3
Once you have your file opened you should notice in the lower right corner, which is your layers panel, it says “background”. You never want to work directly from the background, just in case you have problems and you need to fix something (If it is not in a layer then you have to start over if the “undo” button doesn’t work all the way)
-
Step 4
Now, take a look at your layers panel. Below the first layer, or very bottom layer you will see a set of icons. There is an icon named, “Create new layer” and it resembles one small box with a large box behind it. Please view image for more detail.
-
Step 5
Now, click on the “create new layer” icon. You will now see “new layer 1″ or something similar to that in your layers panel. And, below it you will see “background”. So-lets’ forget about the background, it doesn’t exist. Please view image for details
-
Step 6
In this step I want you to put your mouse over “layer 2″ and just click on it once. Just remember, the layer you work on is the layer that is highlighted. So, you want to have “layer 2″ highlighted, or clicked on. Please view image for details
-
Step 7
Now, your layer is ready to be worked on. Let’s start by coloring “layer 1″. Go to the paint bucket and choose any color you like. Then click on the canvas area. I chose to do my background red. Please view image for more details
-
Step 8
After you have colored your background of “layer 1″ go on ahead and click the icon below, “create new layer” and create “layer 2″. Now you can work with Layer 2.
-
Step 9
Above Layer 2(technically 3) I used a custom shape to get the star and then used the fx options to create the dropped shadow and inner shadow. Now I could stretch this tutorial several more steps, but I think I have explained using layers well enough. Please view image for more details
-
Step 10
Just remember to use a layer for each piece you wish to retouch or create. Not only does using layers organize your data in the image, but it helps when you have to go back and edit something. Good luck using layers.
You may take a pretty good photo, only to get home and realize that the horizon is not as straight as it should be. Luckily, an angled horizon can easily be fixed in Adobe Photoshop.
How to Straighten the Horizon in Adobe Photoshop CS2 or CS3
-
Step 1
Duplicate your layer.
-
Step 2
Click on Filter/Distort/Lens Correction from the top of your Photoshop screen. A window will pop up with a few settings on it.
-
Step 3
Choose the Straighten Tool. You can find this tool as the second of four buttons on the upper left hand of your Lens Correction window.
-
Step 4
Click on one part of the horizon, and drag a line over to another part of the horizon.
-
Step 5
Let go of the mouse button, and the photo will automatically rotate to be straight.
-
Step 6
Hit OK, and return to the main screen.
-
Step 7
Select the Crop Tool from the left hand toolbar. The Crop Tool looks like a
framer’s square.
-
Step 8
Draw a box around the adjusted image of your straightened photo, and the crooked part will be trimmed away.
Tips & Warnings
-
You can also straighten vertical lines using the same technique – for example, along the side of a skyscraper.
-
Always keep a spare file of your image before you start making adjustments.
-
Get in the habit of duplicating your layer before you begin.
Photoshop is an extremely popular software choice for graphics professionals. It is considered the gold standard for creating graphics and editing images. Installing the software is a simple procedure that includes nothing more than selecting a few choices that are right for you during the install. It will take no more than a few minutes of your time, and almost all of the process is automated, making it something that anyone can do.
- Insert the disk into your DVD-ROM drive. This will make the installer automatically open up so you can get started. If for some reason it does not, simply go to your “My Computer” folder and double-click the disk drive it is in.
-
Step 2
Enter your serial number. It will be located on the paperwork you received with the software and must be entered correctly to continue. Enter it in the boxes provided and click “Next.”
-
Step 3
Accept the Licensing Agreement. The first thing Photoshop CS3 will ask you to do is read and accept the End User License Agreement for their software. This is common among software companies and says that you will not do anything like rewrite the code to the software or claim it is your own. Check the box that says you agree and then hit “Next.”
-
Step 4
Choose the installation location. If you only have one hard drive, Photoshop CS3 will do this by default, as there is only one destination drive for it to use. If you have multiple hard drives, the one your Windows installation is on will be the default. If you want to install Photoshop to a different location instead, click “Browse” then navigate to your destination drive. With your selected drive highlighted, click “OK.” Now click “Next” again to move on.
-
Step 5
Review the summary to make sure all of the options you selected are entered correctly. Photoshop CS3 will show you the destination directory you have chosen to install it to, as well as your serial number and how much hard drive space Photoshop will use out of your available hard drive space. If you are OK with everything listed here, click “Next” to start the automated install.
-
Step 6
Wait for the automated installer to complete. Click “Finish,” and Photoshop CS3 is now ready to be launched on your system