| DESIGN INFORMATION: | Home | Graphic Design | Web Site Design | Custom Logos | Search Engine Optimization | Portfolio | Pricing | Contact | |||
|
|||||||||||
Reichel Graphic Design
Photoshop tips | Optimize an image for the web
Photoshop tips | Image optimizaiton
Learn how to optimize an image for the web. This photoshop tutorial on image optimization is for people who want to put images and photos on the interenet. This tip on image optimization will also teach you how to crop an image .
Photoshop Tips
Image optimization tutorial
learn how to optimize an image
Reichel Graphic Design
Photoshop Tip -Optimizing images for the web
This Photoshop CS tutorial is for optimizing images for the web.
Goal:
Reduce a large image to a final size of 301 pixels X 301 pixels with a resolution of 72 dpi and a black frame.
Step 1.
Open the image. In this tutorial we are using a "Bubinga Plumb Bobble Pendant"
(designed by Tom Zieg at www.woodworkertom.com).
Step 2
To Reduce the resolution go to photoshop's text menu. Click "image". When you click "image" a drop down menu will appear, click "image size..."
...You will then see the image pallet like the image sample above. In this example, the Resolution is 230 pixels/inch and the pixel dimensions are W:2160 and H:1440. We want to reduce the resolution and then resize the image using Pixel Dimensions.
Step 3
Uncheck the Resample Image box. Change the Resolution to 72 pixels/inch.
Step 4
Check the Resample Image box. This will activate the pixel dimensions fields. In this example we want our final image to be 301px X 301px. However we don't want to distort the image so for now we want to keep the width and height above 301px. To get the image as close as possible to our final size of 301px X 301px, we will use 501px for the width. This way the Height automatically resizes to 334px (just above the final size 301px)
Click Ok.
Step 5
In this step you want to "rename" the background layer.
In the photoshop layer palette, double click the "Background" layer. This will bring up the New Layer pallet (see image below).
Step 6
"rename" the background layer to "Image Layer".
Click Ok.
Step 7
To create a new layer, click the new layer icon on the bottom of the layers pallet.
Drag the new layer so it is under "Image Layer ". This will make Layer 1 the canvas.
Step 8
Click Layer 1 to make sure it is activated.
To change the canvas size go to Photoshop's text menu. Click Image. From the drop down menu click Canvas Resize ...
Change the Canvas Size to 301 pixels x 301 pixels. You will be warned some clipping will occur.
Click Proceed.
Step 9
Merge Visible Layers. If you use "flatten layers" it will make the layer a "background" layer and you can NOT apply a style to a background layer.
After Merging Visible Layers, there will only be one layer -"Layer 1".
To Add the stroke use the "add layer style" bottom on the bottom of the layer pallet. It is the icon with the " f ".
Change the stroke Position to "inside". Change the color to #0000 (black).
Click Ok.
Step 10
Save For Web.
In Photoshop use the text menu. Click save. In the drop down menu click Save for web ...
Change the File type to jpeg and the resolution to medium.
Click Save.