The point of this exercise

  1. Photoshop skills are transferable to web design as a means to combine text and images.
  2. For many of the design projects in this course, you don't need your own original photographs. Use techniques like searching Creative Commons images at Flickr.
  3. Browser windows have dimensional implications for sizing images.
  4. Saving an image file for the web flattens layers and introduces choices about file compression. In this course, we'll use JPG as our primary file format for web images, but sometimes GIF and PNG will be preferable.
  5. WordPress will be used for various exercises throughout this course. Your WordPress site may be useful to you as a web presence outside of this course.
  6. Find ways like this to start working on your technical skills without having to pay attention to content.

Start a design blog at WordPress.com
...using this album cover exercise

In this exercise, you'll create a piece of cover art to accompany a fictional band and their make-believe album name. The final image composition will be posted to a blog account that you create at Wordpress.org.

The content isn't important in this case—understanding the points listed on the right is important.

1Get an image from Flickr.

Select a photo from Flickr, browsing only images that are posted as "Creative Commons, Attribution, Non-commercial License".

To select a random image from 2011, pick your favorite number between 1 and 861 and go to that page number. For example, you would use the following link to browse to page 7 of all the Creative Commons-licensed pictures tagged with "2011":
http://www.flickr.com/creativecommons/by-nc-2.0/tags/2011/page7

Download the third decent image on your page to the desktop of your computer.

2Open the downloaded image in Photoshop. Crop and resize the image to be 400 pixels square. (Be sure to check your units in Photoshop: we'll be working in pixels all semester, not inches.)


3Format text in Photoshop with the name of your band.

Get a random article from Wikipedia—the title of the article is the name of your band.


4Format more text in Photoshop with the name of your album.

Third, get a random quotation from the Quotations Page site. Take the last four or five words from the last quote on the page. This is the title of your album. Save the entire quotation for later.


5Export from Photoshop using File menu > Save for the Web...

Use Photoshop to put together an album cover in a square shape, using the band's name, album title, and picture. Export the composition as a JPG file. (Save the image only; don't save an HTML file.)


6Sign up for a blog at WordPress.

WordPress is a popular web site development platform. Choose your site name carefully. We'll use WordPress for blogging and will also take a look at the cascading style sheets that control how themes are presented.


7Make your first blog entry and include your album cover image.

StrojcowPapillon JH

8When you are finished with this exercise, send an e-mail to paulhyde@udel.edu with the address of your WordPress site.

 

Tip of the hat to Kota Buck for the original idea—modified here to use Creative Commons licensed images.

For slightly more advanced work, customize your WordPress blog appearance.