Wednesday, June 9, 2010

Final Mockup- LunaF

Green: #06720d

Red:# fc0404

Black:# 000000

White:# ffffff

White pink:# f9e2e2

I used the magic wand and pen tool to select the different artwork pieces from the original as well as myself in the picture. I put them on a new background and used a gradient. After I made it look like a collage I used the Artistic Cutout Filter. I created a moon shape and used a silver gradient and made it a clipping mask, I also added my name and aligned it along the shape of the moon.

The header was made with a gradient that made the black burst shape. I added a red target shape to the center of the gradient. I used the splashed paint shape and made that red.

The navigation bar was made with gradient and I added lines to make the different sections of where the text was going to go. Some of the paint splatter shape goes down into the navigation bar. For the gallery widget I set it to color burn so the red could be darker at the bottom.

This project was fun to do because I got to create a mock up of a site I would maybe like to do. The gradient tool is my favorite because it creates a style I like, and is simple to use.

Final Project Mockup --- sampa


I had a lot of fun by recreating the mockup. First I collected all the pictures, then created a rough draft with the help of pencil tool, rectangle tool and horizontal type tool. Then I started creating the actual mock up.

Background: I created the background with an (1200*900) image size and then painted it with the paintbrush tool. I used Gradient Lens Flare filter to give a shiny effect to the background. I created a big text with a company name and used stroke to give an effect to the text. I used that text for my background feature.

Banner: My banner is combination of a header, search and menu bar.
Header: In the header I created a logo and a header detail with the Elliptical marquee tool, Pattern Stamp tool and horizontal type tool. For the background effects, I used Neon Glow filters and lighting effects for the header detail and thus created an eye-catching header.
Search: I used Rectangular marquee tool, horizontal type tool and Custom shape tool to create the search Portion.
Menu bar: I used Layer comps to create a rollover and rollout menu bar. First I used Rounded rectangle tool to create a shape then copied and pasted and created another four buttons for the menu bar. I chose styles from the styles layer. For roll out or normal menu bar I used Blue glass Style. That very much matches with my background mockup.
For roll over I used chiseled sky style.

Left side bar: I used Rounded rectangle tool, Paint bucked tool for left side bar. There are two parts, one is Category and another one is Category detail. I used the Pattern Stamp tool and horizontal type tool to create Category Part and I used the Gradient fill for blending the text with the background. For Category detail I used horizontal type tool and used Lens Flare effects, Stroke and Curve mask for blending. I also Added a diamond picture to the left side bar, which I cut it by using Quick selection tool from the original picture. For blending purpose I used Lens Flare.

Content: I created the content part by using the Rounded rectangle tool, Paint bucked tool, and horizontal type tool. I used Stroke for the blending purpose. I used a picture, which I created before. This picture is combination of two pictures. I cut one from its background by using Extract tool and added that to another picture. I created a paragraph for the content and used clipping mask to blend the paragraph with the red flower picture.

Footer: I used the rectangle tool, Paint bucket tool and horizontal type tool to create the footer. I used clipping mask to blend the text with the red flower picture.
The following colors are what I used for the project.
Projects colors
# 27254f -- Dark blue
#2e256f -- blue
# 625a9d -- light purple
#530306 – Dark red
#5c1969 -- Purple
#a3d39c --Pastel yellow green
#a1a1a1 -- Gray
#636363 -- 75% Gray
#0b0a0a -- Black

Tuesday, June 8, 2010

Final ~ Suki

Colors I used:
140d04
d19e3d
836e46
fec04b
975f20
ac853c
Tada! Here's my final project! I had a blast putting this together! Man! Now I want to make it an actual page!!! Alas, I have more homework to do. Of course, I totally went off on a wild tangent and didn't do exactly what we're supposed to do. Um, hope it works anyway.

Boy, where do I start? I found a cool image for the background and went from there basically. For this project I went for a clean look. Haha! As far as layers go, the background itself is like 5, let alone all the rest of it. I have to admit, I didn't actually adjust the background image at all color-wise. To get the treble clef to poke out like that, I literally used it as a clipping mask on like 3 layers of color and black.

Haha! I crack myself up. I made my own scrollbar. :)

It was fun playing with the text. I haven't actually had much experience with what fonts to use etc, but I'm starting to get the hang of it.

To get the faint image of the girl on the album cover, I found a photo online. Her hair didn't contrast much with the background, and since I knew she was going to be a faint image on the album, I did some weird stuff to her color-wise. Some of the tools I used were color saturation and the burn tool, among several others. the burn tool actually was pretty much able to pull her hair off the background. Then I used the extract filter, and on the mockup I actually painted a mask around the edges using some grunge brushes. Then I put a texture on her using the canvas texturizing filter.

I adjusted the color of the bridge picture actually to be more opposite the color of the page than it was originally by increasing the blue and decreasing the reds and greens.

Believe it or not, the frame around the boxes was the hardest to make. I wanted a hairline outline a couple pixels away from the edge, but it was a bit harder than I thought it would be. I had to make a path and add a stroke to it, but once I did that, I couldn't change it at all! And with the blending effects I didn't know what color I had so I couldn't quite duplicate it for the main box. So basically I used the content aware scale, and it only stretched the top. Then I used the rectangle tool to paint black as a mask leaving behind a hairline border at the top. Is there an easier way to do that??? Oh, and the other problem with the look I wanted is that it requires me to slice the buttons, which is against the instructions for the project. I did it anyway, but I'm thinking the other way to do it is to put the border on the background. Maybe I'm thinking too much about how to make the website for real and less about following instructions and making a nice mockup?

Ok, I used quite a bit of the dodge tool on the lady on the album cover.

I applied a filter to her to add some texture.
Goodness I used blend modes all over the place! Overlay, screen, multiply, differing opacities, the works!

I used gradients for the buttons and the scrollbar.

So there ya have it! Again, I had a blast putting this one together. I would absolutely love to figure out how to make this webpage work! :) Have a great summer everyone!!!

Final Project :: Sangeeta


Hexadecimal Code
#9cbad6
#305f97
#d26152
#c1d4e4
#f2f6fa
#9d5667
#3d78b2

Final Project!! For this I used the above mentioned colors. Few images are used for this project, but there was only one image, hot air balloon, that was removed from its original image. I used Magic wand tool to do so. To create header I used two images, for heading I used clipping mask and for the background used Gradient Overlay blending tool. There were two images on each side of the header I wanted to give the feel that there is a link between the two, so to show connection I used prominent colors of two images and created a new gradient and used that on the base layer.
The tools that I used in this project are:
Gradient tool to create affect in the header
Artistic filter for base layer of Buttons
Polygon tool to create 3 content areas and buttons
Gradient Overlay blend mode

kelvens mock up


(My Hex Codes:
#000000
#DB0600
#FFFFFF
#262626)

so on my mock up the 5 tools i used were the dodge and burn which i used on the nav bar tapes. i used it to give them a distressed look(or at least thats what i see.) I used blend modes on a couple of layers, such as the soft light on the grunge layer. i used the luminosity on the hands holding the main content area.as far as filters i used the sharpen filter on the tapes to make them more crisp then they were to begin with. On the hands i also used the magic wand to help cut them out from there picture.there is a gradient used on the picture of me which blends from full color to invisible.(really liked that effect).

on this project i did a bit with the masks on making the tapes. i watched a couple of tutorials which were great at helping me bring it all together.i overall am a pen tool advocate for getting precise cutouts but i do like the extract for the hair pics.i had no idea what i wanted to do with this project to start. i knew i needed a page for myself so this fit the bill pretty good and whats better than learning while applying your skills? Im going to end up making this a template and setting up a site where music will be posted along with videos. The gradient tool is a very fun thing when you start playing around with it. when i found out about blending from solid to transparent i was happy about it. I also used it on my logo at top. Yea overall i see why the masks are so powerful and useful. I really didnt use them before but i will be alot more now.

midterm update



so with my update i didnt do too much except threw a filter onto the banner words to make the black and i did this with using the vivid light filter. i really liked my setup from the beginning and the way that i designed mine made editing a little more difficult since i couldnt do rollover images or any of that with my Polaroids not being straight up and down so i could slice them.

final Mockup Abel Rodriguez



#ffffff
#ffccc
#cc6666
#336699

On my images i used to remove it and place it on the content and also on the button backgrounds along with a color overlay.
i used the burn tool on the image because there was a camera flash on it that i wanted to darken to try and remove part of the flash. I also used to blend mode alot on the text along with the buttons i added a drop shadow along with inner glow on text. the filter mode was used on the boxes i used the lens flare along with the lighting effect to create a more visual appealing header. the magic wand was used to get the buttons without a background. the gradient was used for the background.
I sliced up the header along with the footer and content boxes. with basic name for those so i can easily find them later.
This project was by far the most fun i had. I enjoyed having the creatve ability to do what i wanted. I also learned quite a bit on this project i enjoyed the video. it taught me alot on creating this for the basis of a web site and how to integrate it to a website. my most favorite tools were the spot heal the burn tool and the magic wand to use. i enjoyed being able to fix pictures we all have a few pictures we can fix. with my wedding this month i will put these techniques to use.

Saturday, June 5, 2010

Updated Midterm


I updated the rollover image. I used a gradient to create the green target shape in the original, so for the new version of it I used the quick select tool and highlighted the green parts. Once it was selected I used another gradient over it and set it to darker color and overlay. So it changed the color of the green.
I only added star shapes with gradients and clipping mask to the Project graphics. There wasn’t much change from the original. I did change the Header logo.
The banner didn’t change much either, I used the technique where an area of a shape is cut out when you hold down ALT and place another shape on top. I did that for the pink star, and I added another different star to the other side of the banner. I decreased the percentage of opacity so that I would look faded. I removed a lot of random brushstrokes and shapes from the banner making it look less crowded, and also added a black and white gradient to the back.
I did not modify the graphics for my links in a big way. It was more of a subtle change. I used gradients and shapes like the originals, but this time using the clipping masks. I liked the originals so I didn’t want to change it dramatically.
I learned about using templates in Dreamweaver, I didn’t necessarily like the template I used for this site because I couldn’t get the content to stay aligned where I wanted it to be, and I was having issues with the widths and placement of objects. I liked creating the graphics for my webpage, because it gives it a more personal look. I plan on making better graphics as I continue to develop my skills. Overall I liked the clipping mask tool; it has become my favorite tool to use.

Friday, June 4, 2010

Midterm after making changes: Sangeeta


Here is the midterm site after making changes. I made changes to the header and to the rollover image.

Thursday, June 3, 2010

Web Page Mockup


For my color scheme I used:
#d4d099
#4c671b
#f4b6a5
#c7cce2
To remove an image for my banner I used the crop tool. In the banner I used the burn tool to darken it a bit, blend mode to darken, filter sharpen, the polygon tool for a shape, and the gradient tool to change the color of the sky. The slicing was really easy and seems like a useful tool.

I had some trouble darkening the image of my banner with out losing the rainbow in it. The dodge and blend tools worked well to darken the sky but not too much. I really enjoy playing with the gradients. With different color schemes and opacity settings one can completely change the feel of an image or picture.

Updated Midterm


Here is my updated Midterm. I changed the banner with some filters and also changes the rollover pics with filters. My goal was to make it look strange.

Wednesday, June 2, 2010

New Midterm Project -- Sampa


I had a lot of fun by recreating the whole site again. I created the banner with the brush tool and used soft direct light filters for the background effects. With the blending options such as: drop shadow, bevel and emboss, pattern overlay, and stroke, I created an eye-catching title. To give a different shape to my title, I used the wrap text and the wrap tool. By applying a clipping mask, I combined a shape and a picture that was made to make the banner.
I have used Gradient overlay in difference mode for the hover and link state. Then for the Hover I have used Accented edge filter and for the link I used Ink Outline filter.
I changed body and footer color also. I used all hexadecimal colors.
I added Project one through 6 on to the site, which includes all the pictures and blog text for each project.
I recreated this site again because I wanted to create a much more attractive site than before.
The following colors are what I used for the project.
Projects colors
#a72a97 -- Light Puple
#5a84ff -- Light blue
#9F59AF -- light purple
#217e69 -- light green
#BF8A49 -- yellow
#A45597 -- mauve
#f6ee08 -- yellow
#8832c3 -- purple
green
silver
Here is my link to the new midterm project.
New Midterm Project