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:-

Image Rezie Dialogue

Image Rezie Dialogue

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.

How to upload your website/data using FTP

Posted by Atif Nazeer | Posted in How Tos | Posted on 02-09-2010

Every hosting comes up with some FTP accounts. To know that how many FTP accounts are allowed, you need to log into your hosting cPanel or you can contact your host to get technical details of your hosting.  Most of the time, FTP username/password is same as of your default hosting username/password.

There are various methods to transfer data through FTP like there are specialized commercial products like CuteFTP and WS FTP. Most of the development tools like Microsoft FrontPage, Adobe Dreamweaver also come up with built in FTP transfer capability.

As the focus of most of these tutorials is to get you working without delving more into technical details, I’ll today demonstrate that how can you upload your website/data through FTP? The requirements are:-

1.) FTP Account ( FTP username/password )
2.) Mozilla Firefox
3.) FireFTP
4.) Your data ( Of Course )

As stated above, I am assuming that you already have a FTP account. If you don’t know yet, please contact your host to provide these details

FireFTP is an add-on to Mozilla Firefox so to run FireFTP, you first need to download Mozilla Firefox. You can download it from this link.

Once you’ve installed Mozilla Firefox, click on this link:-

https://addons.mozilla.org/en-US/firefox/addon/684/

You’ll see something like this:-

FireFTP Install Window

FireFTP Install Window

Click on Add to firefox button and you’ll see a similar window:-

Add to firefox

Add to firefox

Click on Install Now button, It’ll take a little to get installed and you’d be required to restart your Mozilla Firefox in order to successfully install FireFTP. After restarting Mozilla Firefox, you should see an option ‘FireFTP‘ in Tools menu of Mozilla Firefox. If you can see FireFTP in Tools menu that means you have successfully installed FireFTP.

FireFTP under Mozilla Firefox Tools menu

FireFTP under Mozilla Firefox Tools menu

When you’ll click on FireFTP, you should see a similar window:-

FireFTP Main Window

FireFTP Main Window

In the next part of this tutorial, I’ll show you how can you actually upload your files to your server.  Meanwhile, if you need any information, please feel free to ask!

Short for File Transfer Protocol, the protocol for exchanging files over the Internet. FTP works in the same way as HTTP for transferring Web pages from a server to a user’s browser and SMTP for transferring electronic mail across the Internet in that, like these technologies, FTP uses the Internet’s TCP/IP protocols to enable data transfer.