Israel's Final Project

I really enjoyed this project. I did spend out 4 hours making my web page. I was quite the ride creating the page too. First, I decided to use the banner I already made from a previous assignment because the ducks had just won the Civil war and were headed to the rose bowl. The colors that I used of kuler are #242424, #437346, 97D95C. I used Gradient tool on the buttons and the banner. Stamp tool on the bottom by the footer. I copied the autzen picture that is in the background and stamped it on the sizes of the bottom of the page. I used a lot of outter glow on the text to make it stand out more. I created the banner and the buttons in different psd files and brought them into the website. I Quick selection tool was used to import the O's found on the footer and also used to import the lineman on the banner. For the blends, I did use the outer glow on the linemen to eliminate the rough edges and blend it in with the banner background. I also used the outter glow to blend the middle content containers and the footer to blend it with the background a little. Overall, I was satisfied with my page . The only thing I didn't like was how long it took me to make it.

Thanks for the great class Patricia.

Cameron Wold Web Mock

So as for the tutorials I finished the beach one I finished it but have no idea where the file is. I searched for a 30 minutes until I gave up so I do not have that completed but I did another tutorial of a simple navigation which I used on the left of this and it started my color scheme. My color scheme uses 4 main colors, #c46000, #242424, #000000, and #FFFFFF.
So basically my site is a fictional soccer league and because of the various languages I put buttons with 4 major national languages with their flags and their language in their language. So that if they did not speak English they could choose one of 3 other languages to see the site in. The site just has 6 different places for navigation for different events, stats, schedules, etc.
As for tools I actually did not use that many tools but the basics really came in handy like eraser, pen, and quick select. If I had to say what was the best thing for this I would not say it is a tool but the blending options because without it nothing on this page would look the same. I basically use different gradients, pen, quick select, and a filter or two to try to get all the images to go well with eachother from extracting images to creating the buttons. All of the tools for the most part worked how they should other then one event I found with the tutorial involving those buttons. So overall this turned out pretty well. The only thing that really bothers me is the header because I would like the grass to be sprawling out rather then just cut it at a line but I would not be able to do that with that picture.

Final - Vincent Phan

I worked on the tutorials before starting on the mock-up. Here is the url for the second tutorial that I chose:
http://www.tutorialshot.com/design-a-unique-header-for-your-website-with-photoshop/

The kuler color scheme used for this website is 8 bit, which consists of #2AA626, #248C20, #175915, #0A2609, and #0D0D0D.

I started with the background, which is a simple gradient using the colors of the color scheme. In order to create a vintage feel, I applied Pixelate>Mosaic to the gradient, which makes it less smooth and more blocky.

After the background, I moved on to the nav bar. I created the bar with a rounded rectangle, and also added a gloss by using marquee and white-to-transparent gradient.

For the header, I formed the shape by combining a rounded rectangle with a normal rectangle. To make the header background look like it currently is, in a new layer, I applied Render>Clouds with default black/white color followed by Pixelate>Mezzotint, Type:Long Strokes, and then Blur>Motion Blur, Distance: 999px. In another layer, I added the green gradient, and I think I set the blending mode of the layer to overlay. I merged those two layers and set the merged layer as a clipping mask. Finally, I included a light gloss to the top half of the header.

The dashed line is the bezier curve I made with the pen tool. I was able to make dashes by picking the square brush and increasing the spacing and decreasing the roundness of the brush in the brushes panel.

I used the wand/quick select tool and masked the alien from its original background and used mask edge to refine the image.

At the bottom of the website, I used the wand tool to remove the ship from its original image. I also used the clone stamp to copy the grey houses to fix the middle ones, as they were missing a few pieces when compared to the ones on the side. To change the colors, I used color overlay layer style and set the color to grey.

If I had more time, I'd rework on the backgrounds so that they'd fit the theme a little better. I couldn't think of anything to apply dodge and burn to, to I skip out on those tools. Other than that, I'd say the website turned out well.

Final - Karel Rasovsky

The “Talk Mania” tutorial introduced some interesting techniques, aka “layer properties”.

For my second tutorial, I created “Latest Tweets” box:

http://psdvibe.com/2008/12/04/create-a-latest-tweets-box/

I figured this would eventually be a great asset for my websites.

The website mock-up exercise was an opportunity to sketch out a website concept for my wife’s childcare business. When storyboarding, pen turned surprisingly fast for generating straight line outlines. I experimented with Bezier curves, anchor points and subsequent stamp pad when creating navigation buttons, but this was no match (slow, tedious) for using rounded rectangle tool instead to produce perfect buttons fast.

I picked a mellow and playful color theme from Kuler (dark brown E89B78, okra FFF07B, purple EDA2FF, blue 88B9E8, green 96FFA6). The original background wallpaper contained red hearts – a bit too kitschy.. So, I selected (quick selection tool) and removed them. Then replaced the resulting holes with blue polygons of different sorts and blurring the wallpaper with lens blur (and some Gaussian) to make it appear distant. I selected the “girl with a flute” (quick selection worked perfectly here) from the original wallpaper, and elevated her to the central theme of the header. The Kuler color scheme did real wonders for the mockup once applied to the company name and to the navigation buttons. And in the process, I learned how to quickly pick them from the swatch menu. Two clicks (Drop shadow and Inner Glow) turned the text of the company name into a stunning feature. Life is easy with Photoshop!

When creating the header and text boxes, I created my “custom” gradients and then turned up transparency (through “layer properties”) for best effect. (This looks great in concept, but I am not sure yet how this will turn out in a browser.) I wanted to add life to the site – no better way to accomplish this than by including photos of kids. Dropped one in and applied a blending mask – great!

I thought that embedding the latest tweets would be a great way to enhance daily communication with parents. With a slight branding tweak (“Littlest Twitter”) the Twitter interface is a perfect fit for this site, not to mention its real purpose. (If someone knows how to feed the real-time tweets into a website, please let me know.) At this point, all that was left was just cosmetic touches – like applying the dodge tool around the edges to lighten up the pixels on the background wallpaper. This is ready to go into development!

Final Mockup - Courtney Acostagrates

I made my mockup page for a friend of mine who has a chicken farm.

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

Final Project — Becca.

For my final project, I created a website design for an imaginary band, Stray.

The Kuler theme I made for the design was Simplicity: #000000, #0A0A0A, #191919, #283038, and #FFFFFF.

I made a few false starts with the Pen tool, and eventually discarded them because my design was curveless, and there was no need for precise paths. Instead, I drew the rectangle of the main envelope with the Shape tool, which was much easier, and gave it a faint white Outer Glow.

The background was composed of a Lost and Taken grunge texture, overlaid with a clipping mask onto a gradient composed of the darker tones of my theme.

Once I had the typography of the title and subtitle adjusted, I used the Burn tool to vary the brightness of the white letters, to give them a suggestion of burned-out electronics. The winged key motif in the background I made with the Custom Shape and Polygon tools, and then I repeated it with the Clone Stamp tool. The blue link on the bar at the top is meant to show what an individual link would look like on rollover.


The little moon graphic, which is meant to be an example of something you could put in the body text area of the website, I grabbed from this photograph with the Magic Wand tool and a handy reversed selection, and then overlaid with the Poster Edges filter, to make it look more like a piece of clip art.

The result doesn't really suit my standards for web use, but I like the look and feel of it.

Finel-Melissa Flores

For this last project i used many tools that truthfully i lost count. So to start things off i just used gradient tool for the "magic logo", dodge tool and the bed tool on the side of for the background, hue/saturation for one of the images and magic wand on another image by deleting the white background around it. Colors that i used were #s1d26c for the video text, #04a6cc for the photography text,#ffffff for the paragraph text, #3b0cbc and #19deef for the purple and blue circles and used the pencil and stroke pad to make the circles of the brush.This personally was difficult just to layout everything i wanted to display but most of all i enjoyed this whole experience of learning about photshop and everything else.!