Getting organised with text and images
By the end of this chapter you’ll have a well-organised folder of text and images on the desktop of your computer, ready to upload to your site later on.
Creating a folder structure for your website
First, let’s get all the written content you created earlier into folders to make life easy down the line.
1. Create a new folder on your desktop and name it My Website.
2. Within the My Website folder, create folders for every page you plan to have on your site and name them Home, About, Gallery etc.
3. If you have sub-pages (for example, sections of the Gallery), create folders within the folders you have already created. So for within the ‘Gallery’ folder for Daren Redman’s site I included two sub-folders for the different sections of the gallery (‘Art for the home’ and ‘Installations’).
4. Now open a new document in a plain text editor such as TextEdit for Mac or TextPad for Windows and name it HomeText. Write the text for your homepage in this document (if you have already written it in a different programme such as Word, copy and paste it into a plain text editor with no formatting). Having no formatting will make life much easier later on when transferring the content to WordPress.
5. Save this document to the folder you created called Home (which is in the My Website folder).
First of all, make a list of all the images you’d like to use on your site and on which pages they’ll appear. The page names should correspond with the folders you created earlier. This is also where you will save your images once they’ve been prepped for use on the web.
Now let’s get your images web-ready in the simplest way possible (using Adobe Photoshop) and organise them into the folders you’ve created.
There are free online tools that can perform the same transformations; these include Pixlr.com.
Although there may be further image editing to do once you’ve chosen a theme for your website, the majority of image optimization can be done in advance.
In general, the smaller the image (in kilobytes) the more web-friendly it is. Large images may look great, but they can significantly slow down your site and take a long time to load. It is of course important not to severely compromise the quality of images, especially as your are building a website specifically to showcase your artwork. Photoshop can significantly reduce the image size without it becoming distorted.
1. Open your image in Adobe Photoshop.
2. Go to Image>Image size. In the dialogue box that opens once you’ve clicked on Image size, adjust the Pixel Dimension Width to between 800 and 1200 pixels. The Height will automatically change to keep the image dimensions. Click OK.
3. Now go to File>Save for Web and Devices.
4. Once you have clicked on Save for web and Devices a new window will open.
5. On the right hand side of that window, select JPEG from the Optimized file format dropdown menu. JPEG is generally the best option as images can be compressed to up to 5% of their original size making them quick to load on the internet.
NOTE: If you are showcasing a sculpture or something that requires a transparent background, a PNG file format will better suit your needs.
6. Underneath that you’ll see options for Compression Quality in another dropdown menu. It is tempting to choose Maximum because you want your images to look as crisp as possible. I would suggest that High is nearly always the best option, as it gives us the best of both worlds: good image quality and relatively small file sizes. Selecting the High preset will automatically set the Quality setting to 60.
7. Make sure the Optimized option is checked – this will reduce the file size further, making it even more web-friendly.
Everything else can be left as it is.
8. Next click Save and give the file a name. I like to use the following naming convention as it makes things easier when uploading to WordPress later on.
So for the image I’ve been preparing for Daren Redman’s site I would name it: darenredman_breakingdown_2011.jpg.
9. Next choose the folder in which you’d like to save the image to (refer to the list of images you made earlier so you know where to place it – if you’d like the same image on more than one page of your site, save it in both of the appropriate folders) and click Save.
10. Repeat the process for every image you wish to use on your artist website.
You should now have a well-organised folder that contains all of the raw material for your artist website.