Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Placing guides

From: Preparing CMS Web Graphics and Layouts Using Open Source Tools

Video: Placing guides

The first step in taking this large image and converting it to smaller images that we'll use in our webpage is to set some guidelines for the image. The way GIMP works is it will slice this large image into smaller images along these imaginary lines that we'll place in our document, and that's how the document is going to break into pieces. So what we need to do first is set these little lines, which are called guidelines.

Placing guides

The first step in taking this large image and converting it to smaller images that we'll use in our webpage is to set some guidelines for the image. The way GIMP works is it will slice this large image into smaller images along these imaginary lines that we'll place in our document, and that's how the document is going to break into pieces. So what we need to do first is set these little lines, which are called guidelines.

The way you create a guideline is first of all make sure you have the Move tool selected from your Toolbox. Go to the Ruler. Let's say we're looking at the Ruler from the top, click and hold down the mouse button and drag and you will create a little guideline. What I'm going to do is I'm going to slice out that top header graphic, the big blue area that we're going to want for the top of the webpage. I'm going to make it as wide as the white area here on the website. So, now I need to set up my left and right guides.

And since this picture is at the top of the page, I don't need to set a guideline for the very top, but I do definitely need to set guides for the left and right sides. To set them from the left and the right, you may need to move your Toolbox as I'm doing. To get to the ruler on the left side of the page, once again click and drag and line up your guideline to be even with the white area. And again, the same thing for the right side. The next thing I'm going to do is I'm also going to slice out the footer at the same time.

The footer image, down here at the bottom, what I want to do is I want to keep this as one solid image and I am going to make it a background image ultimately in my HTML. Note that this is showing in the comp some links in that footer area. If I make that whole area an image, I don't want those links as part of the image. Those links are going to come from the content management system to show up in that area. So what I need to do is, if I click on that particular layer, look over at the Layers palette on the right-hand side, and it will show you that I am selecting the text in the footer navigation, so that I know which layer that I'm looking for.

Going up to the footer navigation and click the eyeball to turn it off. And I'm going to click on the Copyright statement once again to select that layer, so that the little box that you see to show which layer is selected is out of our way from where we're working. Now I'm going to surround that footer once again with some guidelines. I just need one for the top. So I'm going to click on the ruler here on the top and drag down, probably somewhere around there. I'm going to click on ruler and drag down again to the bottom of that image.

So the guidelines are now mostly in place. What I need to do now is a little quality control and make sure those guidelines are exactly in the right places. If, for example, I've incorporated a little bit too much of the navigation bar, here on the top in this green area, into my slice, that will show up and look a little bit odd in my final webpage. So we'd like to zoom in and make sure those guidelines are exactly placed. It's very easy to get them in the wrong spot when you're working at a lower zoom factor than what we're working with now.

So we're going to switch over is to the Zoom tool and I'm going to click on my image to zoom in here at the top. See how my guideline isn't quite snug with the edge of the Navigation bar here. So I need to switch back to Move tool, click on the guideline and drag it just a little bit, so that it's in exactly the right place. Let's check the left side of the page. I'm going to scroll over to the left, and see here, this guide is just a little bit off with a white area.

So I'm going to move that over and tighten that up, and we'll check the right side of the page. You may need to move your Layers and Channels box. This one was in a little bit too far, so we're going to move that over. And finally, I'm going to scroll down to the bottom of the image and check the guide placement with the footer. So here in the footer, it looks like my line is just a little bit too far inside and this side of the image looks great.

Now I'm going to use my Zoom tool to zoom out to get this back to 100%. So placing these guides is the first step in converting this very large graphic into smaller component graphics. Make sure those guides are set in exactly the right places and that you're not incorporating other areas into your graphics.

Show transcript

This video is part of

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ .

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Preparing CMS Web Graphics and Layouts Using Open Source Tools.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member ?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferences from the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.