
Color Scheme:
The base-color for my color scheme was #3B9#C8 (light blue). From that I created a "Triad" color scheme which included: #D15355 (dusty pink), #18567B (darker blue), #95931D (Light Olive Green), and #7B7A1E (Darker Olive Green). Although most of my page was composed of stock images, I selected images that approximately reflected these colors. I'm not sure if this will work, but here goes: My Color Scheme
Tools Used:
1. Pen Curve: I attempted to use this tool on the bowl of eggs, but it didn't go so well so I ended up just using the quick selection tool on that image.
2. Burn Tool: I used the burn tool on the barn.
3. Blend Modes: I used the soft light and dissolve blend modes on the white background behind the header. I also used multiply on the barn. I used pass through on the white rectangle behind the text.
4. Filters: I used the the blur filters on the rooster in the header as well as in the background of the barnyard.
5.Polygon: I used this to to extract the barn and duplicate that layer.
6. Magic Wand/Quick Selection: I used these to extract the rooster, corn, and bowl of eggs,
7. Stamp Pad: I used the stamp pad in the header to extend the barnyard in the background
8.Gradient: I used a blue to transparent gradient in the header.
Process:
Header:
I had a bit of a hard time getting started with the header. I had initially planned to put a basket of eggs where you now see the rooster and corn, but i just couldn't figure out how to seamlessly incorporate it with the barnyard background. After numerous failed attempts I scrapped that idea and opted for the rooster, which I extracted from the background of the original image with the quick select and magic wand tools. I then added an outer glow. I still wasn't convinced, and wanted to add something simliar to the green in my color scheme so extracted and cut out numerous layers of corn an stacked them to create the diagonal line that you can see. I mainly used the magic want tool to do this since the background was pretty different in color, but there were some edge artifacts that I had to polish up with a light brown outer glow. I added text, with drop shadow, bevel and contour, and outer glow and merged all layers. I accidently cut off part of the "y" in Lacy so I had to create a separate layer and place this over the header. I used a clipping mask to round the corners and added some white rectangles in the background to set it off from the red page-background. I was happy with the header and think the gradient smooth the transition between the blue background and barnyard image. I was pleased with how the corn helped create movement and incorporate the rooster image.
Body:
I wanted to have a field behind the text, but knew that this would't allow for much readability. I took a field image and extended the sky using paint bucket and spot-healing brush. Those worked really well and the effect was the seamless addition of much more blue sky. I added a clipping layer to round the corners and define the size. Over this I added a white rectangle with 56% opacity and a pass through blending mode. I rounded the corners with a clipping mask. I extracted the hen and bowl of eggs which was really easy using the magic wand and quick select tools. I selected a serif font for the main text and 24px leading. I used drop-shadow on this.
Navigation System:
I had original made white buttons, but later decided to go for the green from the color scheme. I think this tied the colors together nicely. The current display reflects the off-state. In the on-state the buttons are white. I used drop-shadow, outer-glow, and bevel and contour on these buttons.
Background:
I extracted a piece of a barn door from another image which I repeated in the background of the page to further incorporate the dusty pink color from the color scheme. I liked the effect very much and think this could be done very easily in CSS.
Summary:
I did quite a bit of extracting for this page and must say that my favorite is definitely the quick selection tool. I used masks and the polygon tool and tried to use the pen, but generally speaking I find the quick selection tool is easiest. I am very happy with my final mockup. I took a lot more work that the explanation would imply, but it was a great learning experience. I enjoyed the challenge of incorporating photos in a color scheme.
My Tutorial
No comments:
Post a Comment
Note: Only a member of this blog may post a comment.