Online Marketing

#CAT5TV – Web Development Part 2 – Slicing up the Images

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


Online Marketing

How We Make YouTube s: The Gear, Process, Kdenlive, Gimp, OBS & Other Open Source Software

So this is how I make youtube articles. I’ve actually gone through a lot of iterations, but because this is the first one I think I’ve documented top to bottom we’re going to call it version 1.0. When, technically, I have lost track of versioning, but for purposes of YouTube here and when I go back and say: okay, what did I change? I can make version, you know one point whatever or when I do a lot of changes.

Maybe a version to X, we’ll figure out like all projects that are open-source and you try to figure out what you’re going to do for versioning numbers and that can be the complicated part. Occasionally at least for me, because I think gives us a big change. An incremental change, but let’s get started. What we have here is, and I’m going to swap between the cameras and then I’m going to show how I actually put this article together on the editing side, and the reason I have to do both is because my youtube blog is obviously a lot of tutorials And some articles like this, so there’s a mix of things I do and I want to kind of show all of them.

So this part is the filming part is freely called filming. Nothing is film, it’s all digital, but this is the part where we do things in the studio and how we edit it together up. Here I have a GoPro just out of frame. Then we have two lights. I have my Aston microphone in shotgun mode, which is currently the audio source and I’m trying to figure out how to get the audio when I do behind here. I guess I’ll just be oh, so I have my aperture light and my cheap softbox from I well.

I think I got it either for me, I was on or ebay I’ll find an Amazon link for you. This is not an expensive one at all. That’s a little bit more money, but not excuse me that one’s a little bit more money, but I still really like it because it works really. Well, it’s an LED light. It’s portable. It’s got batteries on it, but now that we’re doing more studio stuff, I’m leaving these set up more often anyways.

So when we’re doing a product review, for example, I got a couple of products here. I got my pixel phone, which I’m getting get ready to do a review on. I currently have my GoPro mounted to a boom stand over here, and this boom stand works really good to hold a camera. Now I’ve Marvin’s camera’s, not here right now, I’ve been borrowing his 70d until I can decide whether or not a one of I another, seventy which I think I have a deal on a line on one right now, but that’s primary.

What we’re shooting with over there is the Canon 70d. I’m really happy to the camera everyone’s like. Oh, it doesn’t do 4k or doesn’t do this. I’m like. I don’t think my tutorials would be any better in 4k if they not adding any value, then yeah. Why even add it to there? Also we for the TV hookup, so we can see what we’re doing we have a wire going from that. So this is what I see over here. So kcci do glance over there.

Try never to look, but when we’re setting up this is an easy way for me to see. What’s going on is to look, we just plug it into the TV. I understand everything is going on with the camera and you know gives me a good idea of things on there now with the magic lantern software, it’s nice, because it gives me the audio level. So I can make sure the audio is good on this, and this asked a microphone I’ll leave a link to below I’m really happy with this purchase.

Now everyone’s, like. Oh rode, mic Pro this that I tried the rode mic I had the road might go. I liked it, but I liked the audio quality better on the Aston and it does stereo. So when we did that group setting where we had all of us here doing hot sauce, the acid microphone didn’t phenomenal job. We have it. This is also on a boom. Stand but I will show you that these lights here and the couple poles it’s all – I really need to get a lot of this done.

I am, though, prop maybe today I’ll do this. I didn’t like it I’m kind of getting sick of the orange behind us because I think it detracts from some of the colors, so we’re going to switch to just a gray background. We want to do maybe some color splashes that’ll be like a version 1.1. Changing the background is hardly a major change, but what’s important is the workflow and how this gets done and how the articles get produced.

So this is filming. That’s filming I’m going to splice in a little bit of filming off of this, so I can pull the whole project together and show you what’s going on, but I switch the camera on here right now or maybe I should do the GoPro I’ll do the GoPro. It’s got a better audio because I can put a microphone on the GoPro and I’ll walk around and kind of show you from the other side what this looks like.

So this is the aperture light. I know it’s kind of rigged in here that’s unfortunate, but we’re going to we’re going to put that inner right. That’s like! Shall we to do list? It’s got screw, it’s really solid, isn’t going where this is battery-powered. This is the aperture al5 tu es. So we can dial in if we need to do this, it’s on a tilts, it’s keep it plugged in. But if I unplug it like, I said it’s on battery, so you loses no brightness works really well.

This is the less expensive and hopefully the microphone doesn’t pick up too much noise shrimp. If I don’t get you close, this mic on the GoPro picks up a hum just generic cheap soft box from Amazon with for us and tubes in it, which is why it causes problems with this microphone. This I really like I’ll leave a link to this. This is the boom stand that we use for holding the camera up works really well, and this is one thing that’s really cool about this boom stand.

Let me break it down real quick and it drops down simple as that. Now it’s locked in place and then those legs fold up, so we can make it nice and small same with this. We hang the ear kind of up here when I’m not using it. That way, when we need more chairs and more places, which we keep the chairs all nice and neat kind of on the wall here. This is where all the extra gear ends up. So these are lots of connectors doodads.

There’s all our podcasting equipment, different ball heads. I really like these Joby heads they’re great, for holding things on this little case is where we put things like the GoPro and the other cameras. That’s how we do our time. Louses charging drone stuff the drones actually up there in shelf and when it’s all done, everything goes in here. We lock it that way when we have like get-togethers with random people coming in and out all the gear and all the little doodads.

No, I don’t want to be touching them. It is less I’m worried about people stealing it it’s much more, that people pick things up and touch it and lenses are super expensive, speaking of which that also brings me to this. This is my lenses, the Sigma 10 to 20, so this is for the real wide-angle shots. I really like this lens. I’ve had it for like ten years this, they call the Canon nifty 50. 50 millimeter.

It is a F 1.8. You can pick this lens up for like really cheap. It’s super inexpensive. I definitely like it quite a bit, but some of the other gears just miscellaneous stuff. You know lens cleaner stuff, like that. Maybe I’ll do a separate gear article. I do have a lapel mic in here and that’s what this is. I just don’t use it that often it’s kind of nice when you want to walk around and I get the microphone, but I don’t do that as much when I do.

These are the audio technica Pro 8 8 w RS pick these up for dirt cheap on eBay. I just dislike the fact that they use a 9-volt battery and they create a little bit of a history in the background so anytime I use it. I have to edit that out – and it annoys me, the Canon 70d itself is got the kit lens the 18 to 135, with the Image Stabilizer. We leave it off because it actually uses a little bit of battery when it’s on the tripod, but I use it.

Of course, if I’m trying to your free hand, which is pretty rare, free handing the camera unless you’re a really good camera man – which I am not that needed, so I try to tripod as much as I can. Even this has some shake now. This is just using HDMI out that goes up there. There’s your HDMI in the wall goes through. The ceiling comes back down behind the TV and it’s hard to see, but back there behind the TV is where all the lines come through to get that signal from over here to over there.

That’s simple effective though, and I like it here, is I dislike wires along the floor. If you didn’t notice, even these wires go plug in underneath and over here, so there’s nothing across our path. The only thing that kind of goes across the path is the audio cable. When I plug it into the Canon, but that’s life you’ve got a. I haven’t really found an easy solution, but that’s why we run it on this tall or boom stand from the Aston microphone up over back to the camera.

It’s easy enough for people to walk right under it, and this is that as tuned microphone, that has both the stereo and mono features low-pass filters. Some boosting the auto mode is my favorite because it automatically turns on when the camera turns on and it turns back off. So let’s turn all these things off and get to editing’s. That’s how we see where the open source comes into play and how holla’d all actually happens in case you’re wondering my GoPro setup, pretty simple: it’s a GoPro with one of them metal cages, a little hot shoe mount and the road might go and the stupid $ 50 GoPro adapter that you need to have to make this all work.

I have no idea. This is a cheap tripod that I bought all this off, Craigslist a guy who was just dumping it for really cheap – or at least this metal case. And this thing, so I don’t know what brand is some off-brand x-series, but it gets the job done for well doing what I just did with it. So it’s definitely handy for that. So for those of you see my desk before you know, I have a three desk layout, I’m going to jump to the other camera here and show you I zoom back out against the wall.

These are the three monitors, so everything’s kind of spread across all these screens, and now I’m going to insert that article into the article of me making the article now. This is actually could be showing me how to screw up making a article, because I added at the end of it and did a bunch of editing on how I did the editing and I don’t like the any of the ending of it. So I’m going back and re editing and Reese, placing just the ending of it.

I realized that I was a little bit too zoomed out trying to show three screens it’s how I edit and that didn’t portray well at all on YouTube. You just couldn’t see what I was doing, so I’m going back to dragging everything. So this is the three screen layout with well there’s different layouts here. This is a three screen layout. This is how my layout actually looks when it’s in process and then working.

This is a preview window on one side, but obviously this is really hard for you guys to see. What’s going on, I realized after I recorded me editing, but the article is edited, so I’m just going to cut out the end and redo that part. I tried it like this, and this is also hard to see what I’m doing so, we’re just going to drink everything to the middle screen and get rid of the webcam, so you can see what I’m doing for the editing parks this.

This is the hard part to show because there’s a lot that goes into editing, so I showed some of how I copied files and things like that, and that’s I thought maybe the interesting but maybe not imposed so I do is I’m done. I kind of proof most of my articles I try to prove from, but we’ll just bring over here and show you what I do so here is the editing part that I didn’t like this is going to get deleted.

Here’s all the stuff that came off of all the cameras I use so I had my GoPro. I had my screen capture, which I’m doing again right now, which was called. Finally, I just named it that you know my naming schema. That’s whatever makes it work for you, but what I will talk about is a couple little things, so one of them is – and I’ve talked about before I use sync thing: singing is backing up my article folder continuously, as I drop things in here.

I’ve did a whole article on that and whatever your workflow is making sure you have a solid backup. I like automated backups, specifically using the syncing tool and it backs up to my FreeNAS continuously, so it’s on my hard drive it’s backing up over to there. So that’s getting copied over then we just drag all these files, which I’m not going to direct them again, but you just drag them all in a kdenlive and then we drag them all to the tracks and I’m holding the ctrl key zooming in and out.

I got a tutorial on how to use Kate and live, and you know putting all this together now I started the intro of this article with a little classic 8-bit song. Let me see if I can change the view here so there’s my little preview that I dragged right there, so you can see going through editing the normally I edit on the other, monitor but, like I said, there’s not an easy way to 40-percent a dual monitor Layout it just unless you have a 4k and I export this at 4k.

You wouldn’t be able to read all this, but this is me cutting between all of them. You line up the audio, you get it all say: okay, here’s the audio! This is the GoPro article. This is the main camera article and it’s how I cut between them for the overhead shots and then I’m using OBS at the end, which I’ll drag my OBS screen over here, which it just goes to infinity, because it’s recording, OBS, recording, recording, OBS, recording and makes Kind of a cool effect in the background – and it OBS, is how I do my voiceover, so I got my setups here and this is what it looks like back on a three screen layout.

So let’s do this view. This is actually how it looks. I’ve Shrunk the screens over here, just going to give you guys an idea and a view, and all the voiceovers are recorded on a Yeti microphone in my little office with soundproofing here and very important soundproofing on the other side, because your voice goes this way. It reflects back so the back is to get rid of sound reflection at the back and the front and get rid of the sound reflection in front to kind of keep a dead area for the voice-over work.

But you know these tools are all free and open source and wonderful. Kdenlive is great OBS great cobia, cisco cross-platform, and someone will ask this kdenlive. I know they are working on a Windows version. Sorry, I’ve tried it that doesn’t work very well, it’s once it’s all done we’re going to render in process and then we jump over to GIMP and I have a template saved here in GIMP. That’s got the little black bar at the bottom and then I just go on the web and literally like the Canon 70d I typed in Canon 70d transparent there.

It is there I typed in Kaden, and these are just google image search while she this one didn’t need to be. I went to their website and it’s part of that’s their logo. Author header, I just grabbed it and you can actually just go copy image. Edit paste new layer – and you can get things added on there just like that and GIMP GIMP – is not as easy to use as Photoshop. It’s been a struggle because I’m a Photoshop guy, so I started learning it.

But if you started out, we get there’s some great tutorials you can find on it. I’m not good enough to make a tutorial on it, but I will tell you: I’ve been doing my thumbnails and everything for quite a while and editing the basics like what you’re seeing here in camp, and it’s worked out really well for me. So it definitely definitely can be done and once it’s all done, cuz GIMP saves in its own special format.

We file we export this and I called it how we make youtube articles, the gear and the process and the open source software and, like I said like going in-depth on the software, I have a tutorial on kdenlive already. I don’t really have one on OBS, but it’s maybe I’ll do one at some point. Obs feels almost self-explanatory. You just keep adding the different scenes like the webcam and then that’s what all these are.

Some are just microphones middle screen, webcam just left screen right screen. All my screens with me at the bottom and then you can just go here and if I want to put myself in the middle for this, but this is well technically. This is where I sit, because this is the the layout you’re seeing above is my three screen layout. That’s in here, so hopefully this was helpful kind of give you an idea how we do this.

I will leave links below to the tutorials. I have on how to use kdenlive how to get started with kdenlive in editing article. That’s probably the part break people find the most challenging recording stuff with OBS load it it’s pretty straightforward. Maybe I’ll do a specific tutorial on there, but OBS is a great way to do screen capture. I might do a specific review on a 7, but there’s a lot of mouths to die.

Cameras been around since 2013. So that’s it’s a I’m still happy with it’s a really great camera. I don’t really people like oh go, mirrorless yeah cool. Maybe I have the 70d. I don’t plan to replace it until it breaks. So, for now it’s a great camera and it’s not about the camera. It’s about coming up with teaching someone something the story, and the narrative is much more important. The tutorial the knowledge sharing is important.

1080 seems good enough for knowledge sharing, at least for me. For now, if my thought, my knowledge would look better in 4k great, I don’t have a 4k monitor and statistically most people don’t either. I know it supposed to be future thinking, but especially tech stuff. I have to keep producing because all this is completely irrelevant. Privation. That’s generally how it works. Hopefully, you found some of this helpful.

Give me an idea of behind the scenes how we produce YouTube articles, how this works. You know if you like to count in here like and subscribe. I will do my best to reply to all the comments. I’ve complained before about YouTube comments. Sucking I don’t see all the messages, it’s a YouTube thing. I’ve talked to other youtubers are the same problem. We also have the forums to help alleviate that over on Facebook links are below plus all the gear links and some of the details of all the stuff we use will be in here.

So hopefully this was helpful. I have a great day and enjoy get started on this open source. Editing if you’re interested in this I mean go, get these programs are free, start dabbling and playing and read my other kdenlive tutorials to get you started on this part of. It says the article edit, the press record, is easy. The editing I won’t lie. This is some this little effort that goes into this there’s a learning curve, but I think it’s worth it.


Videos are truly an awesome way to get the point across. Any type of content from your business is important!