Hello, I’m Robbie, Ferguson, nice to have you here so last week. We well you I was Hannah here but secretly you created the yep. The design you’ve got there yeah. My great things happen. Look at that very cool. So that’s you over on on your Mac. It is this is me over on Linux. So, let’s see what we can do here, Krista sent me the PSD file, so here’s comp dot PSD.
This is the same file that you’re working with right, exact, same father: let’s bring it up in gimp, okay, there we go. There’s me and again: there’s you in Photoshop now, just just for the viewers sake. How much does Photoshop cost you roughly a thousand dollars, ask right it’s somewhere in that range, you can get a student discount if you’re going to school yeah that helps you took advantage of that.
Ok. So what with the student discount? How much did it cost uh? Well, the for the sweet, the cs4 or cs5, is about 510 bucks. I gets you image ready, photoshop illustrator dreamweaver, flash bridge. I said image ready my illustrator Emiratis going in design yeah. We don’t use that ok, so that’s so it can. You buy just photoshop. You can yeah, but a lot of times, it’s worth it just to get the package yeah Cesar.
It is especially if you ate, on the deck driver yeah with the proper programs. Ok, I’m going to bring up the web browser here, we’re just going to go somewhere where we can buy photoshop. I don’t know why i’m curious! I just I just want to know Photoshop. Oh here we go Photoshop. I know what cs5, but let’s buy it. Ok, select country, I’m in Canada, select which store should we go with the educational pricing? Let’s do that might as well, just because that’s going to be the best deal going right, so this is for students or faculty save up to eighty percent.
Well, that sounds great. Eighty percent of what shop the student store – okay, let’s see so we’re looking at a adobe photoshop cs5 superfast webcam there by the way – and of course, they’ve got it’s largely because they’re using flash. Why would adobe use flash all right? Okay, crib, sweet, creative, suite, creative suite they’ll, be photoshop, extended student and teacher edition, ok, so the cheapest version I can find here is this cs5 extended student and teacher edition.
Just photoshop says from 199: ok, so us one hundred and ninety nine dollars. So that’s the cheapest. I can possibly get right. Oh well! That’s nice! Yeah! That’s what it is so you’re just going to show off now. No i’m not showing! No! That’s not what this is. No, oh, that website loaded so fast. You invited me just to make fun of krista make for a crustacean. No, it’s not i’m not. When did I say: oh look, it didn’t look at krista she’s, slow input.
I said their website. Okay. Here, look, let’s just say we’re on windows: okay, okay, i’m in English, wait a minute but wait. I didn’t even have to pay and it wants to give me the full version of the software. Let’s go back and see what we have here: okay, go back to GIMP, o RG and let’s say we want to get it for mac OS. Oh and look. It’s also available for unix photoshop doesn’t work on the units how convenient Mac OS 10? Okay! Here we go the GIMP on Mac OS 10.
Let’s see how much this one costs. Oh, I bet it’s free you’re catching. I jumped the gun with that captain on. What’s that yeah, I got it again, but machine o stands for a GNU image. Manipulation program compatible with snow leopard leopard tiger going way back. Let’s say we got snow leopard. Well that looks strikingly similar a dmg file. Okay, you kind of know what I’m saying right. Okay, think I caught on.
Unless you want to draw out a picture for me that much I don’t want to say that Photoshop our drama fix it might help the fan, putting his skills to use here there there’s a picture for Krista. She asked for it. Okay, I don’t want to say the photoshop and gamers are identical: they’re, not the same product at all, they’re, not there they’re similar in their design, they’re similar and what they can do.
There’s a program called gimp shop, which is another version of the gimp. That looks a lot like photoshop and uses a lot of the same hotkeys. So it’s easier for someone such as krista to migrate over to the free product, not that I would but the GIMP is absolutely free. So if you want to get into photo manipulation, if you want to be doing things like we’re doing tonight, when we do graphic manipulation on the show, why not use a free piece of software that’s available for download at gimp.
Org? And this is going to allow me Here: I am on linux. Okay looks kind of like mac OS. This is linux. It’s also free gluten com. Ubuntu linux is a free distribution or a free operating system for your computer that works on pc. So it’s cheaper hardware. Free operating system versus the mac, here’s photoshop fair enough, all right so not the same product, but we want to just kind of emphasize that there’s a big difference because we’re saving two hundred bucks bare minimum.
If we were a student okay, I so get ya. That’s really great deal, but as a professional, I really like the you know the photoshop programming in it sure yeah absolutely and it does have its advantages, and I I do tend to use both professionally, because there are times when I absolutely need Photoshop. I totally can admit that she’s trying to make me feel better now that song – I am, I don’t ever use Photoshop only time I use photoshop is when you send over here, yeah cuz, all your crazy Photoshop layer mask and sweetie.
No, I’m just kidding going to add more next time. Okay, so here we are in the GIMP and what we’re going to do is kind of assess how we want to work with this file. Basically, as last week, Christa went through and and creatively came up with the design and decided for me and explained how she decides how to build the website as the person who’s going to be slicing it, which may be the same person if you ever do the Slicing yourself, the person who’s slicing needs to have a bit of an idea as to how they want to to do this.
Oh look at that. That’s the mac! That’s my next! Okay! So what I mean by that is, we’ve got this gradient background, so this is a red that changes shades of red. If you’re, not too sure what you can do is you can grab your and you can follow along with this krista. If you like, okay, photoshop, just following yeah, absolutely, we should do a split screen. It’s embarrassed you may be so what I’ve done is I’ve grabbed the little Doppler here, its color picker tool in GIMP, and if I click on my foreground, color – actually click on the doppler there and read this HTML notation there.
As I click on this red is b4c be5. What I want to do here, I’m going to change layers to be background there and now do that again. There we go so a 9000 okay. If I click somewhere else see the numbers, that’s eight nine thousand Wow. What’s so funny, let them laughing just thought of a funny joke from earlier. Ok, so now click down here it changes to 81 810,000. That’s an HTML reference for the color, so you see that it’s actually a gradient, there’s different colors here, a 0000 down here is eight thousand eight hundred thousand.
So what that tells us is that the gradient is not all one color of red. So what we need to first decide is how we’re going to work with our background when we’re doing this. So what we want to do in Photoshop is maybe zoom in to about 2,000 percent yeah so and then go down to the very very bottom. One of the things that we need to do when we’re slicing a website is: we need to make sure that things are fluid.
If the site becomes taller, we need the gradient not to have a cut-off point at the bottom of the gradient. You don’t want this thing to look like a square on a white page. You want that gradient to seem to flow. So what you’ll do with that? Zoom level is use your Doppler and get that HTML character code, the color code of the very very bottom. So as close to the lower edge as you can possibly get because that’s going to map this zoom level, it’s going to be like a very, very big pixel, so that I ready 840,000 right yep.
So if I bring it up in the GIMP, let’s see if I get the same thing so I’ve got my Doppler tool. Color picker need to zoom in go down to the very bottom and grab that bottom color, because that’s where our gradient basically ends. I think I actually got a little closer to the edge because i’m getting 82,000, if you might have been up just a little bit but regardless that’s that’s, going to be pretty close, so write down of the very very bottom here.
I’ve selected the color and it’s 8000: that’s this really deep red! So the reason we want to do that is now: we’ve got that color in our clipboard. And now, if you read, if I were to zoom out of this now, okay and if I were to resize this image, the canvas size which is exactly what’s going to happen on the web, if you get a page, that’s super long. Okay! Now, what’s going to happen in the background there once I fill that with this particular color, just to kind of give you an idea is that the gradient is not going to look like it breaks off.
You can’t see a line there where the gradient stopped. If I didn’t do it that way, if I didn’t pick that proper color and there was white behind it, you’d have the bottom of the website would basically look like that. So I’ve got my color, it’s eight thousand or eight hundred thousand and that’s what we’re going to use as our background color when we get into CSS so the actual coding of the site. But we need to know that off the get-go, because we need to actually create the background gradient file.
Okay, so we are looking at part two of developing a website and Krista, and I are actually slicing up the design she did last week and basically getting it set up so that we can turn that into an actual functional real website. At this point, it’s really just a mock, it’s just a pretty picture. Yet it’s something that we would send to a customer and say here’s the look of the website. What do you think that gives us a chance with in Photoshop or the GIMP to make changes to the design change the where the items are positioned or what menu items? There are it’s: it’s really, it’s just a graphic representation of what the websites going to look like at this point, we’re assuming that the client or asif it’s our own website.
We’ve said yeah. This looks great. This is exactly what we want, so we’re going to actually work with that. So looking at my computer here and Krista’s got this up in Photoshop as well, so I’m working in the GIMP Krista’s working in photoshop, I’m working for free she’s working for thousands! Okay, so that in just throw that in there yeah I’ll be seen patrick’s day by the way, two days off, I’m Robbie Ferguson, okay, so with this, we’ve got the background color i’m going to i’m just going to jot this down because we are going to need This next week, when we get into actually coding this website, my color is 88 hundred thousand.
That’s a hexadecimal number that corresponds with the RGB or red green blue color that we’ve chosen there. That’s the red and hexadecimal means it’s ready for HTML for coding for the web for CSS, so we can set that as our background color and it’s going to match exactly to that, photoshop tells you if it’s a web, safe color, which is kind of a cool Feature of photoshop, you want to bring up the color doppler there and just tell me if that, if it shows a thousand and i’ll show you what what it does there so 800,000.
If you look right here at the top there’s a little explanation point, and it shows us that that is not actually a web safe color. If you click on, it is going to change to a similar color which is web safe, and that is what seven an f-14 18 okay. So, let’s see in the gimp how different that is web safe colors are not as big of a problem as it used to be see. That’s not that’s. Nowhere close, I guess, on the stream.
You can’t really tell that I can tell that visually yeah. More of a pink than I read, it really is so I’m going to stick with a thousand. Typically, when we’re creating the mock-up, we might try sticking with ending the gradient on a web, safe color. So when we’re selecting the colors, we could, if we want to make it easier for the guy who’s slicing, that why you might do that in a case like this, where it’s not web safe.
What I might do is, I might actually choose a color that is web, safe, okay and colorize – that that’s my background. Color now use a square marquee / me and feather that, let’s start with 10 pixels go like that, create a new layer, transparent, remember! This is a feathered marquee right so now, if I fill that, what a feather means is that the was my background color the edge of that marquee is not a perfect square.
It’s actually got a little bit of a feathering to it kind of like a blur on the edges without without actually having to blur it. Sorry, I’m talking and trying to find Phil there we go so now. If I put that above and I can, I can set that up in such a way that the I might want more than a 10 feather, I want, let’s say 35. This is just one option: I’m not going to do this in this case, because it’s such a the color is is so far off that we’re just going to stick with it, but I want to show you what you can do to fix that edge.
Oh zoom sometimes does that to me, so I can move that see what I’ve done is I’ve created another gradient at the bottom, which merges the non web-safe color into a web, safe, color, nice and clean. So that’s a possibility in this case we’re not actually going to do that, we’ll pretend that we’ve got a web safe color and that we or that we don’t care or something that it’s all good. The other option.
In a case like this, we’ve got a non web-safe color at the base. Here’s a really quick option and this one’s going to surprise you eight hundred thousand, there’s no right or wrong way to to do this. It’s really your going to choose every time you do it, but what we need to do is we need to have this clean. We need to have a web safe easiest way to do that, create a new layer. First of all, let’s, let’s canvas size, this we’re going to go canvas size, we’re going to set it to something absurd that nobody’s going to ever have we’re going to set at the fifteen thousand pixels high.
So now our image actually looks like that with the website way at the top. If I create a new layer – and I fill that layer with my background color – which is the non web-safe color okay, now what happens is we’ve got something where it’s going to be? The perfect color, it’s not web safe, but it’s okay, because it’s going to be an image on the background. So now you say: okay! Well, that’s 50! What did I say? Fifteen thousand pixels high it’s going to be huge, but what we do now as part of our slicing and always keep your PDF file, don’t overwrite.
It is take that we’re going to go image canvas size, because this is a vertical only gradient. There’s nothing horizontal! That changes, so I’m going to set this to a pixel width of five pixels, which is going to actually crop that and it looks like it disappeared. If I zoom way in or push one to see it there’s my actual gradient. Okay. So it’s like that starts up. There goes all the way down for fifteen thousand pixels.
It’s never going to actually run into anything. So, let’s save that, let’s throw it on my desktop. I’r going to call this a jpeg reason, for it is because it doesn’t need a transparency. It’s just a flat flat file. We want it to be as small as possible, so we’re going to go with a jpeg. So, let’s go going to give it a logical name: i’ve called it body underscore BG jpg, save that in the gimp choose your quality 85 is the default.
It’s fine, and now we’ve got this file, which is that background color that background gradient? Ok, it’s huge, but if we look at the file size because it’s only 5 pixels wide you’ll notice, it’s 7.3 k, it’s actually very, very sit down, yeah anything, basically, images for web. You want them to be in the sub. You know if it’s a big image, you want to try to keep it down around 50 to 80 k a very, very high end depending on, but we have you basically use common sense and realize that the bigger the site is the longer it’s going to take.
The load – and so you don’t want it to be over the top huge, so, okay, so you you can easily do that on the neck. I could hear you could and, and that – and that makes sense is now when our website is there – it’s not going to it’s not going to over, like it’s not going to be a cut off on that gradient. Okay, so that’s our first slice, I’m going to reopen that PSD, because remember we never overwrite that file.
So I’ve got my first slice, I’m going to create a folder on my desktop here, where I’m going. To put it, it’s going to be my website, I’m going to cut that the image the first slice that we made and create a folder all lower case called images. So on my desktop, I’ve created this folder called website and if it a folder in that called images and I’ve cut that to my clipboard that image there’s my first image.
Ok, so now, looking at the rest of the site, Krista we’ve got the logo, ok, which what we’ll want to do is we want to actually have that as a transparent item, because we don’t want to have to worry about aligning it perfectly with the gradient. We don’t want to have a JPEG, because then we’ve got a flat image with the background. Color like we wouldn’t want that right. So what I’m going to do is I’m going to select the layer that has my logo just right there? If I turn it off and on, I can see that the logo disappears hit ctrl a i’m, not sure what your select all is on the neck.
Oh, it’s just a command a command, a yeah. So if you have a neck, so if you select your logo layer and obviously you have the master files for the logo and that’s fine too, but from this we’re working in high enough resolution. This is why we want to build our mock-ups in high res. So we don’t have to go back and redo the entire mock up again with high-res images, always do it in high res. So with a control, a it’s selected that logo and I can go control C or command C – probably to copy it to my clipboard and in the GIMP I going to go edit paste as new image and I’ve got a perfect, transparent version of the logo.
Ok, so because it’s transparent, I want to save that as a paint which is going to maintain that transparency, I’m going to again put that in web site images may going to call this. We want to be search engine friendly, so was it aspire logo? It was a spire place. Wasn’t. Ah, yes, it’s quiet place, ok, logo, dot, ping, we’re giving it a logical name because one it’s easier for us to find when we need to actually add it to our site, but also it allows the search engines to index that as the Aspire place logo.
So once we get submitted the search engines which is going to happen further on in the series, but we need to plan for that – we need to make sure that our site is search engine optimized and ready to be indexed by this by the search engines. Ok, so you’ve got have you got that file i’ll set up as well on your Mac? You’ve got a logo. I have a logo. Ok, so you follow along and I would try it. Oh is good wit winner, I’m you have the logo saved and I had the logo.
Savers, ok, perfect and remember that, because it’s copied from our mock-up, the dimensions of this logo are exactly as they would be on our mock-up 162 by 58. Perfect. So now you see these menu items. These are all fake, don’t get deceived by these. These are not the set menu items. I get this all the time. Do you get this or clients as well? I think we need to change about us to about. Oh all, the time and you’re saying no, this is just the mock-up, that’s not a real menu.
That’s just we put that there so that you can see what it’s going to look like when we put a real menu that we put this lorem ipsum text on the page, so that you can see what the text is going to look like. But it’s not the real text. You don’t need to tell us, you know, I’m going to said it best business. Now we can read that that’s all part of the mock-up, so one of the things we need to do is just get rid of it all.
So that’s text that we’re going to get rid of that’s text we’re going to get rid of ok, so we can get rid of all the mock-up stuff that we simply don’t need by turning off the layers. Ok, so now – and I’ve already got my logo so now I end up with something like that got my background, so I’m done with that. Ok, so really the only elements that we still have left here. I am on the gimp and kristas following along in Photoshop.
Doing the exact same thing so now we need to have our different layers here, so this here is predominantly a color, so we’ll get to that. But it’s going to be a color essentially with a little arrow pointing down at the bottom. So I’m going to turn off my feather, because I have that turned on on my select tool from earlier and I’m going to grab the guide that Krista has set up here with my marquee.
It’s you see that the GIMP snaps to those guides and I’m actually going to the mock-up, doesn’t have things don’t have to be exact to the mock-up, because I noticed that the guide is just a little bit off from like maybe at one pixel. So that’s that’s! Fine, so now i’m going to select the wood grain layer and I’m going to copy that and then edit paste as new image or in Photoshop file new image and it’s going to automatically set your proportion.
So now I’ve got this wood grain, which is exactly proportionate to what it is that is going to go at the top of the website and kristas following along in Photoshop as well. So she’s actually had to paste that into a new image in Photoshop, whereas I could just edit paste his name. So I’m going to save that. That’s my wood grain for the top one of the things about wood grain that you should know is that it’s got a lot of intricacy to it, so it can end up being a pretty large file again, there’s no transparency necessary here.
So we are going to work with a JPEG, so we’re going to try with this. I want to see how large the file is going to be. If I set it where I would like it to be, which is about eighty-five percent quality. So i’m going to call this wood grain VG jpg again, i’m saving it in my web design or web site. / images flatten the image save it as 85 and, let’s go for me, see how that is, how BIG’s the file on your system at eighty-five percent.
Oh you’re going wait. I have to she’s taking it down to quality 30 at the new 78k and only 60 60 percent mine turned out at eighty-five percent to be only 60 4.5 k. So what you want to try Crist is instead of save, as on Photoshop. Go file save for web safe or whether my vices just an outlet right there, yeah and now it’s automatically selecting jiff so change that to jpg and now you’ll see that the file size down at the lower left 76.
1 so now grab the quality slider and you Can slide that down right here, top right and you can actually see how that’s going to impact your file size as well as the quality, the output. So that’s pretty good. Essentially, what you’d want to do is go down as far as you can, without completely losing the quality of the file without losing the detail, because you don’t want it to look bad, but at the same time this is a background image and there’s going to be Stuff, on top of it, that is going to be really what you’re looking at so for me, 64k is too big.
So I’m going to save a game, I’m going to overwrite and bring my quality down to 70. Double click on it see how I like the quality, it’s fantastic, and at this point it’s only 40k. That’s a that’s a bit more reasonable, especially considering us of wood grain. How are you doing over there and forth with Photoshop we’re good 41 k for me and the quality is seventy percent quality? The wood grain is pretty crystal clear and how how large is the file size? I believe it was 3333.
I could keep going I’m at. Seventy percent – Oh 3737. Okay, so we’re pretty close, I’m 41, but I’ve got seventy percent quality. How long do you have to go? I think I was like forty percent. It was pretty low right. Alright, so now I’ve got that file ready to go and that’s going to be our background for the top area, so we can close that out go back to our mock-up and I don’t need that wood grain anymore.
One of the things I got to do is I got to get these cool Polaroid’s that Krista’s created, so we’re going to get rid of all this stuff because that’s all just in colors, these are just colors, the white stuff, we’re going to use a div, we’re Not going to use an image and I’m going to go control a and this time it’s a little bit different. I’ve got the crystal just get rid of that blue area as well, because that we’re going to use a div that as well as that.
So here I am in the GIMP there’s Krista in Photoshop control, a or command a to copy, all select all – and this time I’m not going to go copy because that’s only going to copy the selected layer, which is only the picture wan na, get everything. It’s going to copy visible or copy merged in Photoshop. I suppose so now that I’ve got that in my clipboard Krista’s got that in her clipboard. Let’s paste it as a new image.
Again, I’m going to go edit paste as new Krista’s going to create a new image and then paste it onto that canvas well and we didn’t get a merged clipboard. So go back to your your master file there and make sure when you copy go edit copy merged there. You go so now create a new file, a game. It won’t be that one because that one’s got the wrong dimensions. Is it still just kidding either yeah? That’s how it’s done.
Okay, go back to your so now I think what’s happening! Okay, because you’re you’ve got a marquee around just that image. If you do a control, a no, you just want the whole board. Yes, she just had the wrong mark either. So it was copying the merge, but ok, so now paste that into a new image there we go okay. So now again, this has got to be a pain right. Yours is coming up as it’s got a white background, so you need to get rid of that white background there you go and then export that as a pin, which is going to be a larger file.
Cuz, it’s got that transparency Here I am in the GIMP and you’ll notice that I also got a bunch of space over here. So in the GIMP I can just go right. Click image, auto crop image and it automatically sucks in the sides. That’s one thing that Photoshop is lacking: that the GIMP is totally awesome at i’m, going to save that image. I’r going to call this the Polaroids pull air, no breaching of copyrights intended or registered trademarks, okay, Polaroid’s, dot, pain.
Reason we go with paying again is because this has got a transparency, so we need to be able to put this on top of the rest of our website so that, what’s behind, it can actually shine through okay, so you’re at that point in Photoshop as well. I’r going to save it with a compression level of nine in the GIMP ping being a lossless format. It’s going to be very high quality, even at high compression there’s, my ping, and it’s it’s quite large.
That’s showing me as 160 7.7 k. How are you looking 299 299, so mine’s about half the size of yours but they’re, both too big for internet, so next week we’re going to come back to that we’re going to compress down that that Polaroids dot ping file on both well, if you’re, if you’re Here we can look at it on the map if you’re not, then we’ll definitely look at it on linux as well. You can kind of get an impression for how we’re able to do a lot of the same things between photoshop, the commercial software and the gimp on that which is free on a free operating system, which is a boon to the plugin.
The fact that free actually has really good these days – it’s not like 10 years ago, we’re free men, you’re, sacrificing quality and and getting you know a knockoff product, and now these days got it thanks to community on it’s a fantastic thing. So we’re going to be looking at actually taking those slices because we’ve actually sliced up that whole website now, there’s arm there’s our actual mock up as a sliced website.
That’s it. We’ve got our logo right, which is a transparent ping. On a white background it’s being displayed, so we can’t really see it because it’s white text we’ve got our background image, which is that thing there that’s going to be the gradient. We’ve got the Polaroids which we’re going to shrink down next week and we’ve got that guy right there, our wood grain, so those are really the only images that we need to get started with the website to make it look like you’re, ma club and then we’re Going to be using CSS as well as HTML and PHP, in order to actually turn that into a real functional working website, along with some cool little Java scripts and anything else, we need to do to make that work.
This is category 5 technology, TV and you’ll find us online triple w category 5 TV. You
Jimmy's Internet Marketing Business Blog 