28
How to prepare images for web using photoshop
Posted by Atif Nazeer | Posted in How Tos | Posted on 28-01-2012
Before uploading your images (from Camera/Other Sources) to your CMS, you need to prepare or resize them properly to upload at your website. In our case, our clients most commonly add product images so I’ll talk about product images only throughout this tutorial. There are various methods to achieve this but for now, I’ll focus on the preparation of image using Adobe Photoshop only. For other methods and batch image preparation, I will write another tutorial. Lets start mentioning the steps:-
1.) Get the required image dimensions. You can ask your web developer to provide you the dimensions or you can get these from the images which are already placed by your web developer. You can yourself get the dimensions using latest version of Mozilla Firefox by right clicking on the image. The image that you’ll right click on will be the product image because you are preparing product images.
2.) Get your image ready and open image in Adobe Photoshop
3.) Go to Image -> Image Size or simply press shortcut ( Alt+Ctrl+I ). You will see a dialogue box like this:-
4.) Make sure that ‘Contrain Propotions’ is checked and change only height or width of the image. With ‘Contrain Proportions’ on, if you’ll change height of the image, its width will be automatically adjusted.
5.) If you are satisfied, save this image and add it into your CMS.
At times, you need to crop your images to add in CMS. I will cover this topic in next tutorial.
Feel free to ask in case you have any question.



















