Start learning with our library of video tutorials taught by experts. Get started

Preparing CMS Web Graphics and Layouts Using Open Source Tools
Illustration by

Placing guides


From:

Preparing CMS Web Graphics and Layouts Using Open Source Tools

with Jen Kramer

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.

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
please wait ...
Preparing CMS Web Graphics and Layouts Using Open Source Tools
1h 40m Intermediate Dec 16, 2009

Viewers: in countries Watching now:

In Preparing CMS Web Graphics and Layouts Using Open-Source Tools, Jen Kramer shows how developers and graphic designers can collaborate to create a great site design that integrates with a content management system (CMS) like WordPress, Drupal, or Joomla!, all using open-source software. This workflow is based on two existing open-source design tools, KompoZer and GIMP. Jen shows how to modify web graphics and create slices with GIMP, and then place these in an HTML page integrated with CSS in KompoZer. Along the way, she discusses web design best practices and special challenges that might arise when designing for CMS software. Exercise files are included with this course.

Topics include:
  • Using static HTML versus a CMS in web design
  • Knowing the dos and dont's of CMS design
  • Exploring GIMP and KompoZer
  • Saving slices for the web with GIMP
  • Inserting graphics in an HTML page
  • Styling web pages with CSS
  • Changing the default styling assigned by a CMS
Subjects:
Web CMS Web Graphics
Software:
GIMP KompoZer
Author:
Jen Kramer

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.

There are currently no FAQs about Preparing CMS Web Graphics and Layouts Using Open Source Tools.

 
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.
Upgrade now


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 Upgrade now

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 preferencesfrom 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

Notes cannot be added for locked videos.

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.