Digital Imagery in Web Design-Image Manipulation


This week in Photoshop, we reviewed the use of layers, image cropping/resizing, and implementing text, filters, and shapes to create an inspirational graphic optimized for the web.

Image and quote selection: 

Most of my inspiration and motivation is drawn from organic sources; i.e. nature. My selection of a foggy landscape was symbolic of the clarity we seek in life, but the raw reality of opportunity passed  by or the fear that sometimes paralyzes us and prevents us from pursuing our dreams. was the source of this beautiful landscape image (this photo database has stock photos available for licensing-free use). This Chinese Proverb is a timely reminder that the perfect time to sow was yesterday, but that it’s never too late to begin again; opportunity is never completely missed, but the best time to prepare is now.

Creating a new document and placing the image: 

  • To create an 800px X 800px image with 72 resolution, I opened Photoshop and created a new document, entered 800 by 800 into the dimensions (height, width) and selected 72 resolution.
  • To import the landscape image, I clicked File > Place Embedded to insert the image onto the canvas.
  • To resize the image, I clicked Shift + the transformer tool and resized to fit the canvas and “placed” the image when it’s location and size were satisfactory.
  • To name the layer, I double clicked on the generic label and renamed the layer “trees”.

Applying a filter to an image: 

  • To apply a filter to the image, I selected the image’s layer and clicked Filter > Filter Gallery on the menu bar.
  • Once the Filter Gallery populated, I selected the Distort- Diffuse Glow filter and adjusted the graininess and clear amount levels to soften the filter and make it appear more natural; keeping in theme with the raw nature of the image.

Creating a shape in a new layer:

  • To create a new layer, I used the shortcut Command + Shift + N. To name the layer, I double clicked the layer’s generic default label and typed in “Shape”.
  • To create a shape in this new layer, I selected the Shape- Ellipse Tool, held Shift (to maintain equal proportions) and dragged the cursor across the image to create the desired circle.
  • For the circle’s fill color, I used the eye dropper tool to select a deep blue hue from the image itself to provide contrast to the white fog. I brought the opacity down to 61% to reflect the sheer, shifting nature of the fog in the image.

Adding a text layer: 

  • To create a new layer used for applying text (the Chinese Proverb quote), I used the shortcut Command + Shift + N. *The text layer automatically names itself according to the text being input.
  • I selected the Text tool and clicked the cursor in the spot I wanted the quote to be positioned.
  • I selected a simple sans serif font (Century Gothic) in a 48 point size to keep the focus on the quote’s message instead of an elaborate font.
  • Again, I used the eye dropper tool to select a white hue from the image to provide contrast against the deep blue shape serving as a background for the text.

Exporting the image in different formats:

  • Saving a web optimized image:
    • I selected File > Export, Save for Web 
  • Saving a JPG:
    • I selected File > Save As, and named the file according to my filing system, and selected JPEG from the format drop down menu
  • Saving a PSD:
    • I selected File > Save As, and named the file according to my filing system, and selected PSD from the format drop down menu

You may also like

Leave a Reply