How Do I Get my Website from Photoshop onto the Internet

Posted by Marti Wedewer on October 5th, 2010

For the purpose of this article, we’ll be describing the transition from graphic file creation in Photoshop to published web content. These graphic files, be they gifs or jpgs, are manufactured at your “Photoshop factory” so to speak, and transported to your host server. There, they are available in a specified place on the “shelf” for your web page’s html code (or php, or whatever you are using) to be plucked off and fitted into the correct spot on the site when it is accessed. You can think of this transporting or “uploading” of files as a railroad taking the parts to the assembly plant (your web hosting server).

Since this article doesn’t cover Photoshop image manipulation, we’ll assume that your pictures are ready to go. You have two options here, depending upon whether or not Adobe Bridge is installed on your machine. If it is, you may upload your images from there. To do so, first make sure that your service is discovered by opening the Tools menu in Adobe Bridge. Under Photoshop Services you will see Automatically check for services. If Photoshop Services isn’t there, open your Bridge CS3 Preferences, and highlight “Startup Scripts”. Check the checkbox that says “Photoshop Services”, click Ok, then restart Bridge. You will now be able to upload.

The other option is to disregard Adobe Bridge altogether and use another program to upload them. Uploading files to your website is virtually the same regardless of what type of files they are. Normally some program that uses “ftp” (which stands for File Transmission Protocol) is used to transmit your files to the host server. There are several available, but a reliable and free one is “FireFTP” which is an add-on utility for the FireFox browser. It uses an intuitive web interface which looks something like a split file browser with arrows in the middle that point both left and right. The left side is your computer, and the right side is the ftp host.

To install FireFTP, simply open your FireFox browser, go to the “Tools” menu and click “Add-ons”. A window will pop up that lists several recommended add-ons. If FireFTP isn’t listed there, then click on the link at the bottom of the pop up window that reads “See All Recommended Add-ons”. This will open either a new tab or new window (depending on your FireFox settings) that takes you to the add-ons site for Mozilla. FireFTP will be listed there. Click on the FireFTP link and follow the instructions. Once installed, the FireFTP Add-on will appear under the “Tools” menu. It is assumed that the reader already possess knowledge of their FTP server login and folder structure.

Once you have created a profile in FireFTP for your server login, simply click on the files on the left hand side of the browser window, choose where they’re going on the right hand side, and hit the green arrow pointed to the right. It’s that simple.

Discover the Adobe CS5 Creative Suite through our very affordable Adobe Photoshop CS5 Classes.

Send this to a friend