GIMP Beginners 12: Display Web Graphics Using Wordpress | Brian Jackson | Skillshare

GIMP Beginners 12: Display Web Graphics Using Wordpress

Brian Jackson, Author/Publisher/Educator

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
6 Lessons (20m)
    • 1. Introduction

      1:17
    • 2. GIMP Image Preparation

      6:33
    • 3. GIMP Wordpress Banner Image

      5:20
    • 4. GIMP Wordpress Image Post

      4:38
    • 5. Wordpress Text Editor Mode

      1:13
    • 6. GIMP for Beginners 11: Display Web Graphics Using Wordpress

      0:43

About This Class

In this GIMP for beginners class you'll learn how to display GIMP generated web graphics on your Wordpress website.  An initial over view of using the GIMP to rotate, flip, resize, and crop and image is followed by information on loading GIMP banners and including images in pages and posts.  The class concludes by describing the Wordpress editor Text mode which is the perfect leadin for the next course on using the GIMP with HTML.

If you're unsure how to include images on your Wordpress website or can use a refresher than this is the course for you.  I would at the least recommend watching the first lecture to see how the GIMP can be used to turn image into appropriately sized web graphics.

All the best and I'll see you in the classroom,

---Brian

Transcripts

1. Introduction: Hello and welcome to my class on gimp and WordPress. In this class, I'll be talking about how to incorporate gimp images in the WordPress. And in fact, the class will even start with a short gimp image preparation lesson in which I'll show you how to rotate, flip resize, crop and save an image. In the next lesson will look at how to create a WordPress banner and incorporated in dual your WordPress site. Then we'll look at how to include images and posts. The class will conclude. Look at how to switch the WordPress editor from visual to text mode, which is a perfect lead in to the next course in the Siri's, which talks about gimp and HTML from a WordPress perspective. In other words, how to use image tags and other elements to present and control images. So if you're ready, please and roll. I'd love to explain how to incorporate gimp with WordPress 2. GIMP Image Preparation: Hello and welcome to the class. In this introductory lesson, I'm going to teach you just enough about the gimp to do basic photo manipulation, and I'm gonna try to do it in about five minutes. I'm gonna teach you how to open an image, rotated, flip it, resize it, crop it and then exported about the minimum of gimp that you need to prepare an image for use on WordPress. Now the rest of the course is pretty much a WordPress course and assumes that you have your image or that you'll use the information in this lecture to produce your image. So let's go ahead and will start the gimp by clicking on its icon in the task bar, and it comes up in the familiar three window configuration. Now what I'm gonna do is I'm going to open an image that I'm going to use for a banner on a WordPress website. Here it is. Let's bring it up and you can see that it's quite wide. It's almost prepared to be a banner. Now let's imagine that it's upside down toe. Flip this image. You used the menu at the top of this right window, which is the image manipulation window. We click image transform, and we can rotate this image either 90 degrees clockwise or counterclockwise, or 180 degrees so completely upside down so I can change this image from being landscape. Two. Portrait doesn't make a lot of sense in this case, and I can edit undo if I didn't like what I just did. So let's go ahead and flip this 180 degrees image transform, rotate 180 degrees, and now it's upside down. And once again, I can edit, undo anything that I do that I don't like. Notice also that on the image transform menu are the flip options. I can flip vertically or horizontally. I can flip left to right. I can also flipped vertically and create the image upside down once again at it. Undo and edit. Undo gets me back to the beginning, undoing those last two operations. Notice that your undo history can be completely undone for every modification you make to the image all the way back to its base. You can also do redux and then completely re apply all the modifications you made to the image So the gimp maintains an undue history. The next thing we're gonna look at is re sizing the image. Imagine that this is just too big and it is quite a big image. 4300 pixels by over 60 1600. So we're going to take this down to 1000 wide. To do that, I say Image scale image. Now, as long as this chain is linked, notice I can break it by clicking on it and then reattach it by clicking on it again. The aspect ratio is maintained between With and Hyatt. In other words, if I change the with toe 1000 the gimp will change the height for me, automatically maintaining my perspective. Now, since I'm using this image on the Net, I don't need to be a 300 peopIe. I Resolution 72 is just fine. Slits. Knock this down once again. If I click in, why resolution? The gimp automatically sets it for me, maintaining the aspect ratio because these two fields are linked. So there we've now resized an image to make it much smaller and by so doing, load faster. So let's go ahead and well scale that in the image is much smaller now to make it fit the size of the screen. I just do view zoom, fit, image and window, and it blows it up to fitted in the window. The final thing that we're going to do is crop an image. You'll find that WordPress sites typically tell you the dimensions of the image that they want. So suppose it tells you that it wants an image that's 1000 by 300. This is 1000 by 3 79 so we need to crop 79 pixels off the height. The way to do that is to go to image, and this time, canvas size. You can see that it's a width of 100 you can also see the chain is broken here because we want to because we don't want to maintain the aspect ratio. We want to just change one dimension and not the other. Let's type 300 are new dimension Now notice. The preview picture here shows the part of the image that we're going to crop to, and it's the top of the image. I can center it and get a crop out of the fat part in the middle Here, you can see it's got a little on top and a little on bottom of the image. Let's go ahead and resize, and now you can see that the images narrower. It is 1000 by 300 by 72 pp. I resolution perfect for loading is a banner. Now. The final thing that we need to dio is file export as what this function will dio will allow you to export the gimp image as either a J Peg or a PNG image. I like Jay Pace because they're smaller and load faster. So let's call this sample image dot jp g by naming it with an extension of dot jp g. The gimp recognizes it is a J is a J peg image. I'm going to replace the existing one, and it asks me for the quality of the image and there we've just resized and saved the image. Repeat this process for each image that you need to prepare for use on WordPress and again . WordPress applications such as in themes, posts or pages will often tell you the dimensions of the image they prefer. Plug those dimensions into the gimp to get what you need 3. GIMP Wordpress Banner Image: this is gonna be a short lesson in this lesson. We're going to set up the banner on a wordpress website. So let's begin by bringing up WordPress. Here I am. I'm on the administrative page on the dashboard and I want to talk to you about where you can find the banner. Actually, let me go Show you my website so that you know what you're talking about here. I'll do visit site. And here you can see this banner right Here is what I'm going to replace. So let's go back over to the dashboard and the place where you find this banner is that you go down to appearance and customize and you notice that your menu here on the left gets completely changed with the customized menu and we have to image options on here header image and background image. Now it turns out that the header image, which you would think is this image is actually a little dinky image that shows up over here to the right of the name of the website. And I don't particularly want it there now. Also noticed that wordpress is really good about telling you the dimensions of the image that you want. So for the header image, I want a 3 20 by 1 20 pixel image. And in the last lesson, we looked at how to resize and crop images to exact sizes so you would go through that process with the gimp to produce an image of the correct size. Now let's go over and look at background image, which is actually the image that gets used by my theme to create the banner header image here. Now it's not showing us the dimensions of the image because it has an image loaded it, and it's displaying that instead of the text. But if I go and I look into my resource library, just say change image and will bring you over to your resource library and I can scroll down to the Golden Gate Bridge that I used for the page and take a look at its dimensions. Here you could see that I created an image that's 1400 pixels wide by 3 27 tall. That was probably the dimensions that the theme told me to create, So that's the image that we want to create a WordPress. Now what we do We have to have the image in the resource library to use it. So let's go toe upload files, select file. And we can now go to my pictures directory and look for a banner image that we might want to replace this with. Here's a nice wide banner image, and by double clicking on it, it uploads it to my resource library and notice that this is 11 51 by 300 not a bad size in itself. Let's see what happens if I replace my banner image with this new background. There we go. It looks like it's replaced quite nice. Now, if I want to apply these changes, I click on Save and publish. They're now My Web page has actually been updated. If I want to get back to the menu, I click the back arrow if I want to go completely back toe WordPress than I click X to go back to the standard menu. Now let's go take a look at our website. Doesn't look quite look right, does it? Let's go back to our website. One of the things that you might find is that in my case, I have cash enabled on my system, so it's actually cashing an old copy of the page. So I have to go to WP Super Cash and say, Delete the cash that will get rid of the cached version of the page. Now when I go and visit the site, I see my blue banner. Now I don't particularly want the Blue Banner. I want my other banner back again. So you're going to get to see this process all over again. I'm gonna go to the dashboard where I'll go to appearance and choose customize there. I'll go to the background image and change it. That takes me to my resource library with all my images, and I scroll down to the bottom where my Golden Gate bridges. I click on that and say, Choose image Now I'm back to the Golden Gate Bridge. I say save and publish and X to go back to WordPress. Now I can go down to settings and go to WP Super Cash, delete the cash and finally view my website, and it should have the old familiar banner on it. So that's how to replace a banner in WordPress 4. GIMP Wordpress Image Post: in this lesson, we're gonna look at how to incorporate graphics into posts and pages. Now, if you're familiar with WordPress, it all You know that posts and pages air just pretty. Similar pages are static. Posts are more dynamic and added routinely to a website, but otherwise you could treat them the same. So we're gonna work with a post. Let's go to our posts and edit a post. Now, there are two places that you can put images in a post. The one is over here on the right. If you scroll down to the bottom, you're gonna notice that has a featured image. If you assign a featured image to a post, some themes will display that image at the top of the post when displaying it on your website. Definitely. If you post your post to Facebook or other social media, it will include your featured image. So you want to typically have a featured image. Now what's the size of featured image? You know, I seem to load just about anything, and WordPress resize is it to what it wants. But about 600 wide and 400 tall seems to be a standard image size for use and posts. Now let's look at how to insert an image into a posts body. Let's say we want an image after this line. Let's make some room for it by hitting andr. Now we go upto add media once again were forwarded to a resource library where we can pick any of the images here. If the image we wanted wasn't here already, we would just click on upload files, select file and upload a file from our just drive. Let's select a file from our media library. Let's select this cute dog now. I can go up to the upper right hand corner after clicking on it and see its dimensions. It's only 200 by 1 13 that on a fit just fine in a post. Now I can also scroll down to the bottom and see what WordPress is deciding to use is a size. Sometimes the original images gigantic, but WordPress actually creates multiple sizes. Here you can see it has a thumbnail that's 1 50 by 1 13 or full size, which is 200 by 2 13 I can pick either. I can also pick its alignment as to whether it's centered, left, right, justified or there's none, and I can add a u R L toe link this image to when people click on it all text in the description are handy to use for S E. O. You can also put a caption on the picture. I'd rather not have one of those, So let's delete that. And once we're done configuring the image, we go ahead and we say Insert into post and here you can see that our images appeared in the post. Now we have options as far as where we align this. Let's click on the image and change the alignment. I noticed that options pop up at the top here's Left Line center that we've already got used, and that's why it's boxed right and no alignment Weaken left justify it and text will flow around to the right. We can write, justify it, and text will flow around the image to the left. We can also go in and edit the image, and up comes all the original configuration options that we used so we can change the size and notice on size. Yowls Ask custom size so I can type in the width and height exactly that I like. I can also add a link or attach a page so that clicking on the image takes you somewhere. Once we're done modifying the image, we just hit Update Mill. Let's go ahead. Let's go ahead and have this to the left and to preview our changes. We just click on preview changes in the upper right hand corner of the page. A separate tab is used to preview the page for us. We go to that tab and notice that now we have an image here which has text flowing around it. That's the way to insert an image into a post or page. 5. Wordpress Text Editor Mode: The final thing that I want to talk with you about in this class is two different mo's to set in the WordPress editor. Let's go back to editing this post. Here we are in the editor, and we get to see all the modifications that we make. This is a Wiz e wig's style of editing, and it's known as visual. You can see the visual tab in the right upper right hand corner of the editor is selected. Have you ever noticed this text tab and wondered what it does? Well, now we're gonna find out. Click on the text tab and you'll notice that what working in visual mode has really been doing is generating an HTML file. For instance, let's go to visual. This line is I tallis sized. Let's go to text. That's because it's been tagged with the E. M html tag for emphasis, which means I Tallis size, and that sets us up for the next class in this series, which is going to be using the gimp with WordPress and html 6. GIMP for Beginners 11: Display Web Graphics Using Wordpress: thank you for taking the class in this class. We learned how to use the gimp to prepare an image by rotating, flipping, resizing, cropping and saving the image we looked at how to load a banner into WordPress and how to include images in your word breast posts. Finally, we concluded with how to enable the WordPress editor text mode, which is the perfect lead in to the next class in this Siris on using gimp and HTML using the WordPress editor in text mode, I'll see in the next class.