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
Continue Reading

You may also like

Digital Imagery in Web Design Intro

I earned my bachelor’s degree in Consumer Economics from The University of Georgia in May of 2012 (Go Dawgs!) but after graduation, love led me to Virginia, which I now call home.  I married my favorite human, Cory, and became Rachel McCart in September of 2016; sharing love, life, and home with your best friend is the jam. 

I love traveling and spending time with my husband, chatting with friends over a strong cup of coffee (or three), and I hold a strong affinity for the word y’all…it’s that Georgia blood. Oh, and I take my role as world’s best dog mom to a sassy lab quite seriously. I’ve got the coffee mug to prove it.

The Daily Apple is an outlet for me to share my musings, creative inspirations, and daily truths. Getting this blog up and running has been on my New Year’s Resolutions list for the past three years… but hey, third time’s a charm, right? What’s been holding me back? Fear, perhaps. Creativity is vulnerable work, but this is my year of ‘yes’.

I’m constantly looking for ways to infuse creativity into my daily life and hope to channel the skills developed over the course of this class to grow The Daily Apple aesthetically and create beautiful content that uplifts and encourages others… and elicits a good laugh along the way.

Throughout the course of Digital Imagery in Web Design, I’m particularly excited about digging deeper into typography, logo creation, and branding. I’m currently a self-proclaimed novice in Photoshop but am eager to increase my confidence within the powerful software as we make our way through each lesson. It’s critical that as I learn more about Photoshop, I’m able to identify not only ‘how’ to perform certain tasks and achieve certain design goals but the ‘why’ behind the steps to get there; develop a strong foundation of best practices to help me become a more well-rounded communications professional so I can bring added value to the businesses I work for in the future.

Join me on my About Me page to learn more and ‘connect’ with me!

Continue Reading

You may also like