Photoshop
WEB 114 Intro to Adobe Photoshop for the web.
Primary Curriculum, Video & Audio, designed by SARA NEWMAN. Additional Content by David Wall.
WEEK 3
WORKING WITH LAYERS:
Assignment : (all due before Week 4 Tuesday's class begins)
We will be working with grouping and moving of layers. This will be useful as we continue to understand how layers work. This will be very important when designing comps for websites.
The above picture was created by pulling images together to create the following scene. I then posted my logo on the tea pot and then compressed the layers to form an image I could use for my website.
START THIS EXCERCISE IN CLASS:
Elements here: ELEMENTS
1st go to the elemnts page and download all the images into an image folder on your desktop.
2nd open photoshop and the background.png file. Now select "File > Place" and load each image.
Organize the layers using the drag and drop technique outlined below:
Moving Layers:
Select the layer you wish to move and click on it with the mouse. You will now see the layer is highlighted.
Click and drag the layer to the location you wish to place it within the layers panel. You will notice that when the layer you are dragging is touching two layers at the same time...There is a highlighted Blue bar that stands out as in the diagram below. If you let go of the mouse at this point... the layer will land between these two layers...for example... BELOW:"Texture" is the layer being dragged and it is currently between the "fan" and "background" layer. If I let go of the mouse...the "Texture" layer will now be above the "background" layer and below the "fan" layer.
In this Diagram the "bush" layer is on top so it will be over the other layers. Any content in the layer below will be hidden by any image or content in the "bush" layer.
Organize the layers top to bottom with the bottom being the Background and the top layer being whatever layer it is that you wish to be in the foreground.
When ever you are working on a layer... make sure that layer is selected and only that layer is selected or you may edit the wrong layer.
On the lamp shade layer, we see that the graphic has an ugly edge to it so we can select that layer and right go to EDIT>TRANSFORM>FLIP HORIZONTAL.
This will flip the object so the ugly side is now on the other edge and we can slide that layer a little off the screen and hide that ugly part of it.
Once you have organized the layers and have the layout right... find, create or download a logo from the web that you can use to paste on your teapot.
Once you find this logo, place it into your layers file and using EDIT>TRANSFORM>SCALE, size it to fit it to a reasonable size on your teapot.
Using the layer options. Select your logo and make sure it is just above the teapot layer. Then play with your layer options to see if you can make the best fit.
You can then use the EDIT>TRANSFORM>WARP tool to nudge the element into a shape that fits the curve of the teapot. Careful not to over do the bend or it will look edited.
THURSDAY:
This is a template we are going to work with Click here for the files.
We will align and group these layers to begin creating a comp for layout.
Your assignment will be to finish this comp and post a version with at least one button showing an "over" state.
The above Diagram is the beginning of what we will use to complete our website.
Remember that grouping layers is simply a way of combining similar images so that you can keep your layers organized. Think of it like you would of your file structure for your web site.
In this example we are combining the text and the buttons together so we don't have to remember what button is associated to what piece of text.
Your folder structure should be something like this:
The reasoning is that you have the folder called navigation grouping all the buttons within the navigation area. Then you can create over and active states for each of these buttons and using the "hide/show" option can turn them on and off to demonstrate the functionality of the navigation.
You can also apply styles to each of these layers.
Then, by using your right click on the layer, you can now copy the style and paste on another layer.
