Graphic Design Sample #3: Slider Images

Click here to view the finished product

I currently have a slider on my homepage the problem is that I have nothing to slide!

I want some nice looking images to cycle there that illustrate my skills and interests in becoming an eLearning instructor.  For anyone who doesn’t know I am interested specifically in using technology to assist in language instruction.  So for my third digital artifact I am going to attempt to design some slider images for my home page. I want them to communicate these concepts: learning, technology, engagement and simplicity of use.  All four are things that I try to keep in mind when I am designing an eLearning object.

Let’s break it down:

Goals:

To create a home page/slider image.

Continue to develop a deeper understanding of Photoshops features and functions.

To choose appropriate colors and use appropriate design techniques to create a visually appealing image for my homepage.

Create it well so that the image complements my future marketing materials without looking messy or unprofessional.

To find images that I can use freely through the Creative Commons.

Barriers:

I have never created anything like this before!

I am a little concerned that I won’t be able to find anything in the creative commons.

I will need to familiarize myself with some of Photoshop’s more advanced features.

I will need to pick visually aesthetic colors an appropriate font if this is going to turn out properly.

I will need to design the images in such a way that they compliment my site and don’t look amateurish.

Tools:

Adobe Photoshop

Creative Commons Image Search

Tuts+ Photoshop Tutorial Site

Adobe TV

Design Elements: Contrast, texture, color, balance and personality. 

Timeline:

2-4 Weeks.

Step 1: The Creative Commons search.  So I just spent the last hour or 2 combing through the Creative Commons.  I found a few images that I may be able to use. I used photoshop to crop them into the rectangular shape required for my slider.

splash-concept-3

baby with laptop – I like this image because to me it says “technology is easy!”

splash-concept-1

Happy woman with laptop because elearning is fun!

splash-concept-2

This image stood out to me because the student looks very engaged. Maybe she is on Facebook but for argument sake we’ll say she’s studying.

 

Step 2: Draft the concept.  I drew a quick concept of how I envision the slider looking on my site complete with the logo and one of the images I found in the creative commons.

 

concept3

 

Step 3: Adding my logo and applying color theory to create balance and harmony with the rest of my site. I want each image to have my logo on it.  I also want the imagery to be consistent with the rest of my site.  I use a dark blue and light grey for my first and secondary menu bars. My logo is also blue so I will have to figure out how to apply that color or a complimentary color to these images.

 

manabu-splash-thin1

Version 1: Girl on couch.

Step 4: I cropped the image and added my logo but it doesn’t really look good. The colors of the girls shirt and the room don’t compliment my logo.

Step 5: Using Photoshop I remove the background colors. I also added a bit of shadow to give the logo some dimension. It doesn’t look so flat anymore.

manabu-splash-thin2

Version 2: Following my websites color scheme. Blue and Grey.

Step 6:  It’s starting to look like my vision but now it’s a bit boring.   I would like to have some complimentary colors in the background image.  So I will use the Photoshop Color Select option to isolate the models shirt.  Then I change the shirt color to BLUE to match my logo and then discard the remaining background colors.

manabu-splash-thin3

Version 3: The shirt now matches my logo.

Step 7: I also wanted to add some more contrast to the background so I added a slight checker board overlay of the wall on the left hand side of the image.

Step 8: I apply these same steps and principles to the other 2 images.

 

manabu-splash-thin23

For this image I replace the red shirt with blue. I also replace the flat white background with a textured background.

manabu-splash-thin

I again apply the grey-scale to the background. To create balance I shift the laptop screen over to the left.

manabu-splash-thin-4

I also add blue to the stripes on the baby’s shirt.

 

And the final product looks something like this:

[metaslider id=828]

Through this project I have learned to use several more features of Photoshop. Including the cloning stamp, the image adjust, hue/saturation, color replace, select color and many more. I feel I have also applied the concepts of balance, symmetry (Ngo, 2001), texture, color and personality.  The blue color scheme is an effective choice as a marketing piece (Singh, 2006;  Nijdam, 2009) and I hope that each image makes a statement without words which would be.  My website is fun! My website is so easy a baby could use it and my website is engaging.

References:

Ngo, D. C. L., (2001). Screen design: composing with dynamic symmetry. Displays22(4), 115-124.

Nijdam, N. A. (2009). Mapping emotion to color.

Singh, S. (2006). Impact of color on marketing. Management Decision, 44(6), 783-789.

I would appreciate and value feedback. Here is my peer assessment.

imagebot_com-2012042714194724316PEER ASSESSMENT FORM: SLIDER