Change an images size In Photoshop you can change the size of an image by going to: Image Image Size and change the dimensions of the pictures in pixels. Once you adjust the top number the bottom number will automatically adjust. You can also do the reverse if you need the height to be a set number. 200 x 132 pixels 125 x 83 pixels Smaller image sizes are important on a web site because the larger the file size of an image, the longer it takes to download in a browser. Whenever you have images on a page, it is important to add an alt tag. The alt tag tells the viewer what images are being downloaded and makes the page accessible.
Another way to make an image smaller is by cropping.. To crop an image click on the crop tool Click and draw the tool over the area you wish to crop. Press enter to complete the operation. Image size has change from 200 x 115 (68 K) to 108 x 80. (26K) Photoshop will also tell you how long the image will take to download. As you Save for Web in the 2- up or 4 up boxes you can compare how the image will look at a lower quantity or Optimized. original cropped Hue & Saturation You can change an images color by selecting the Hue & Saturation option. Select: Image Adjust Hue/Saturation or Control + U Select:: Layer New Adjustment Layer By adjusting the sliders you will achieve different results. For example, you can go from red apples to green apples. By selecting the colorize box Photoshop will provide you with a funky effect (as blue apples) You can add text to your image by selecting the text tool Click on the T tool then type your message on the image.
red apples green apples blue apples text & apples Brightness & Contrast is one way to adjust the lighting in the image. However, when you make this adjustment you are changing all the colors. One recommendation is to adjust an image by selecting Adjustment Layers. By selecting Adjustment Layers the middle tones of the image can be adjusted. Select Image Adjustment Layers Levels (Control + L) Adjust the middle slider to adjust the mid-tones of the image.
Add Drop Shadow to Text Create a new file 250 pixels x 250 pixels Type your word Click away from the text tool to the arrow tool for the next step to work Select Layer Layer Style Drop Shadow Experiment with the sliders to achieve different effects Multiple techniques can be added to text or images Drop shadow using an image Create a new file (as above) 250 x 250 Select a gif image with a contrast between the picture and the image Select the magic wand tool to get rid of the white background on the image and create a well defined edge Click once on the white background of the image (hold down the shift key to add to your selection) once all of the white background is selected - Choose: Select Inverse Edit Copy New Image transparent paste Choose: Layer Layer Style Drop Shadow Adjust sliders for varying effects original image drop shadow effect
Merge images: Take two images and put them together before after Choose your first image Choose your second image and create a well defined edge (use technique above for creating a well defined edge) Copy second image Toggle back to your first image and paste This technique can be used with photographs. The selection process is a bit more difficult and you may want to try this technique once you are adept at image selection with the magnetic lasso & pen tool. Picture Inside Text Effect Open up a picture with a blue sky in Photoshop Create a new document. Make it 300 x 225 pixels transparent rgb mode Make your foreground color black. Click on the Text tool. Set text to Arial Black - Regular 80 point Strong Type the word Relax Use the arrow selection tool to adjust the text so it is in the transparent window centered. Switch windows so you are back on your sky background picture.
Using the Rectangular Marquee Tool select enough of the sky to match the size of your word Choose Edit Copy Return to the screen with the word Relax Using the Magic Wand click inside each letter while holding down the shift key (dancing ants will appear around each letter) After all the letter have been selected and letters have dancing ants around them choose Edit Paste Into Use the arrow tool to adjust the image inside the letters if necessary Save file as a gif - transparent Create an image from specialized text Open up a new Photoshop document 5 inches (wide) by 3 inches (height) white background Select a specialized text as Brush Script MT- size 24 Type from The Road Not Taken by Robert Frost the first or fourth stanza in the specialized type. Save for web gif Your text can now be inserted as an image file into a web page. Two roads diverged in a yellow wood, And sorry I could not travel both And be one traveler, long I stood And looked down one as far as I could To where it bent in the undergrowth; I shall be telling this with a sigh Somewhere ages and ages hence: two roads diverged in a wood, and I -- I took the one less traveled by, And that has made all the difference.
Emboss Filter for a Background Background images can add interest to your webpage. One way to achieve a subtle effect in for a background design is to use the Emboss Filter technique. Use the Emboss Filter with either words or pictures. This example uses words. 1. Choose a background color that is light to medium, as long as it contrasts with the foreground color. Select New Document make it 5 inches x 5 inches background color. 2. Select the type tool { T } from the Tools menu. a. Choose the font, size and style. This example is using Rockwell Extra Bold, Size 60, smooth. Type a word. Click, OK. 3. Select the arrow tool and move the text to the middle of the window. a. Go to Image - Rotate Canvas - Arbitrary from the pop-up menu. b. Type 45 degrees CCW c. Click OK. 4. On the menu bar select Layer Flatten Image. 5. Select Filter Stylize Emboss. The image will change in appearance. a. Rotate the line in the angle bar. b. Move the triangle under the height and amount boxes. When satisfied with the appearance of the image, click OK. 6. From the menu bar, select Image Adjust Hue/Saturation. 7. Select Colorize. a. Adjust Hue slider to find the desired color b. Use Saturation/Lightness & Darkness bars to fine tune the image. c. Click OK when you have a subtle background image. 8. Return to Image menu. select Adjust Brightness/Contrast.- 9. Adjust size by cropping the image. 10. Insert in the background of a webpage to see the Embossed Filter effect.
Create an Animation with words In Photoshop create a 300 pixel by 300 pixel document new transparent At the top of the canvas in blue Arial Size 24 write - Go Mustangs! Select the Move tool Duplicate Layer then with the move tool you should drag the Go Mustangs down a notch Change the color of the text of the second Go Mustangs to Green Repeat the steps above with the colors red and purple. Select Jump to Image Ready Now you are ready to make your animation. Your first frame will be the blue Go Mustangs! Set the timing to 1 second Turn off the other layers by clicking on the eyeball in the Layers Palette In the animation frames click on the button to duplicate frame (to the left of the trash can) Frame 2 will be the green Go Mustangs! Repeat the steps above for frames 3 & 4 (red and purple Go Mustangs!) If you have a blue underline beneath any of the words go to View and uncheck Show Extras Frame 5 will be all of the Go Mustangs turned back on in Image Ready Now you can play your animation. Save as a PSD file so you can edit it at a later date. Save Optimized As mustang1 (this will save it as a gif file) Tween your image (optional) Now see what it looks like with tweening Tween between each frame to get a fading out effect. (Frames 1-7-13-19) When you are done you need to Save Optimized As mustang2 Now try doing this with some pictures. You will want to use the 3 gifs that are similar in size. Open 3 gif images and make each image transparent with an image size of 75 pixels. Using the selection rectangle copy your first image o Choose File - New to start a new psd file and paste in your first image o Choose Layer New Layer o Using the Rectangular Marquee Tool select your next image then paste it into your new layer o For your third image repeat the same process o It is helpful to name the layers as you create them so when you work with them you can identify what layer you are on at that moment.
Once you get your images in the right order and in layers in Photoshop select Jump to Image Ready Create the animation the same way you did it with words. Tween if you like between each image or leave it plain. How to make a gif image with a white background transparent. 1. Open the gif file in Photoshop. 2. Using the Magic Wand click on the white area of the image. (hold down the shift key if you wish to select other white areas that were not selected) 3. Select Inverse (this will select the image you want) 4. Edit Copy 5. File New (be sure Transparent is selected under Contents keep other info there by default) 6. Edit Paste 7. Save as *****.gif Create a banner for a web page 1. Create a canvas that is 700 pixels wide x 200 pixels high 2. Your banner size will be dependent on the width of the page you choose for your website. Adjust the banner size accordingly. If your page size is 640 pixels in width you would start with a smaller width. 3. Your background could be transparent, a color or white. 4. Select the type tool along with the font size, type, and color. 5. Type in your heading as you would like it to appear on your website. 6. If you are creating a rollover you can save the first image then simply resave the first image and modify the color or background as you wish. When you go to save the second image simply call it image_over 7. All images should be saved as gifs and use web safe colors. See additional samples at: http://www.medford.k12.ma.us/examples/graphics.html