Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
In Creating an Online Resume: Hands-On Training, interactive design professor and enthusiastic educator Laurie Burruss teaches how to produce an online resume—and create a first web site in the process. Laurie suggests structure and information needed to create a winning resume, and shows how to design the pages with simple typographic principles and effective layouts. She explains how to use Cascading Style Sheets (CSS) and control the design and structure of HTML documents through hands-on development. Exercise files with additional supporting materials accompany the course.
Now that we've created our background canvas color and have a place to work and play and try things out, let's create our tiled backgrounds. We're going to use two methods. One is the Texture fill, and the other is the Gradient fill. But before we do, let's have our Selection tool here, and look at the different kinds of tool sets that we have. They're grouped by what they do. We have our Selection tools, our Bitmap tools, our Vector tools, Web tools, Color tools. And then down here we have the View tools, which are for us while we are editing inside the application.
What makes this so different than any other Adobe application is that we have both Bitmap and Vector tools in the same program. So when I say, "Let's select the Rectangle tool," I will not mean this Marquee tool, which would be used for Bitmaps and would be like Selections that you would make inside of Photoshop. What I'll be referring to is this Geometric tool, which is the Rectangle tool. So let's go ahead and select that, and notice when I roll over it, you get a tooltip and also a keyboard shortcut. I want to draw a square, so I'm going to hold down my Shift key with my left finger, and draw it out. And I want it to be about 60 x 60 pixels, but if it's not exact, I'll go down to my Property Inspector, type '60.' Then tab. Type '60' again, and then hit my Enter key to make sure that that sticks.
I'll go back up to my Selection tool and just click on that one more time to make sure in fact it's 60x60. It's very important when you're making tiled backgrounds that they're the same dimensions. You want it to be 60x60. Now for this particular tile, I want the background color of this tile to be the same color as the background of my webpage, so I'm going to click on the Color Swatch down in the Properties inspector, and go out to the color of my background color that I know I've already picked from doing my comp for this website.
And notice that even though it now looks like it's disappeared into the background, you can still see the four bounding boxes, which let me know that I actually have a shape selected there. With that still selected, I'm going down to Texture and I'm going to look for a texture that I want to use. You'll see as you roll over the textures that there are lots and lots of choices, including the fact that you can even add, at the very bottom, your own texture. So this is very, very cool. I want you to select, for this one, the Line Diag 1. It kind of creates a corduroy effect.
Now as soon as I do that, it has down here a default amount of transparency. If I pull this all the way up to 100, you'll see that the lines become very white, very kind of contrast-y. It started out at 50%, but in playing around I decided that I want it to be about 20%. So I'm going to drag the slider down to 20%. I want it to be subtle and textural, not to be a geometric line drawing. Once I have that created, I can go ahead and do a File > Save.
And I want to move that out of the way, so that I can continue to draw, play and create images on my canvas background. To deselect an image, simply click on your background. Now I'm ready to create my gradient background tile. Again, I'm going to choose my Rectangle tool in the Vector tool section, and I'm going to draw out a rectangle that's about 50x100 pixels wide. Notice that whatever I last use becomes the fill. I'll go over to my Selection tool, select this item, and then down in my Properties inspector, I'm going to make this 50 pixels wide, for the moment, Tab to the height. Make that 100.
And again, to make sure that it sticks, I'm going to hit my Enter key. Make sure your tile is selected and, this time, down in the Properties Inspector, instead of a Solid fill, I'm going to go up to Gradient, and choose Linear. What I love about Fireworks is that gradients are so easy to select and to make and to change. Now you'll see that the texture is still appearing. That's really easy to get rid off. Just simply take that slider and pull it down to 0, and that makes you have a 0% there, so that you don't see any texture at that point.
To edit this particular gradient, all I have to do is click on the Fill Swatch. I want the bright color to end with the background color, which is the gray, so I can go out to my background color, click on it, and now I know that that color is the right one. On this left side, I'll click on this swatch. And I've already tried out a color that I want to use. So I'm going to click right here, and be sure and write 'hatch mark,' 'B' as in boy, '3,' 'C' as in cat, cat, cat and then 'A' as in apple, and again hit your Enter key, and that makes a beautiful gradient.
To close that box just simply click anywhere else, and then go ahead with your Selection tool and select this graphic. You can rotate and move this wherever you want. You can move this down, up, all over the place like that. You can take this and rotate it to this side or that side. Now in this case, I just want a nice blend at the top of my page, so I'm going to be careful to get that just ending right above the edge of that box. To deselect this, I just simply click on the background, and now I have a gradient that will fade right into my background color that I can tile horizontally in my webpage.
Now I don't need it to be this wide, and I only created it this wide so that I could see what I was doing as I was working. So I can make this a much smaller width, and I'm going to come down in here and make this five pixels wide and then use my Enter key to make sure that I've set that. So I'll go back to my Selection tool and make sure that I've nothing selected on the stage. There. I've got my two types of background tiles created. This one is the texture one, and this one is a linear gradient. I'm all set to do steps three and four in creating web graphics.
You create them, then you slice them, then you optimize them, and then you export them.
There are currently no FAQs about Creating an Online Resume: Hands-On Training.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.