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.
baby with laptop – I like this image because to me it says “technology is easy!”
Happy woman with laptop because elearning is fun!
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.
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.
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.
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.
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.
For this image I replace the red shirt with blue. I also replace the flat white background with a textured background.
I again apply the grey-scale to the background. To create balance I shift the laptop screen over to the left.
I also add blue to the stripes on the baby’s shirt.
And the final product looks something like this:
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. Displays, 22(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.
