For Class March 2


Illustration by David Lloyd, guest artist at MoCCA Fest 2017

For class, bring in your MoCCA product to show. The artwork should be nearly done and ready to go into production before spring break.

Start work on optimizing images for your website; see instructions below. Even if you have a well designed site, ensure your images are of the correct resolution. Most CMSs (Content Management Systems, like SquareSpace, WordPress, Wix, Cargo, etc.) will automatically adjust sizes for your images but if you don’t have enough pixels to start with, your work will look crummy on art directors’ big retina display monitors.

Prepare your artwork for your websites. Using Adobe Bridge, attach metadata to each file. Select a picture file in the Content panel, go to the Metadata panel and scroll down to IPTC Core. For Creator, click to the right and type in © 2016 Your Name. (Option G for copyright symbol.) Scroll down to add your web site url and email address, and at the bottom add the copyright again at Copyright Notice. Hit Return to save. Repeat steps for each image.

Open the high-res file in Photoshop. Go to Image > Image Size. Change the resolution of the image 1o 72 ppm (pixels per inch), then change the width to 2070 pixels (it doesn’t have to be 2070px, but no less than 1500px). Whatever you choose, be consistent with all of your images. Let the height be whatever it is. If the image is very wide and not very tall, you’ll have to modify the dimensions. Your CMS (Content Management System) will adjust so that your artwork sizes look compatible on screen.

If you’re using Adobe Creative Cloud Go to File > Export > Save for Web (Legacy). If you’re using Adobe Photoshop CS 6 got to File > Save for Web. Choose the tab that says 4-Up so you can study the original art compared to the different settings. Fiddle around with GIF and JPEG so you can see what they look like, selecting a different panel with your image and look at the metadata below to see the file size. In the end, choose jpeg and adjust the Quality slider so that your file size is under 2MB. Study areas with fine detail and gradients to make sure it looks as good as possible while keeping the file size small enough. When done, click “Save” and when asked, create a new folder for you web images and save them all there. The file names cannot have spaces and hyphens will be added where you do have spaces between words.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s