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