How To Picture Teh Picture, cuz I Picture You as a FOOL
What the hell is wrong with you guys? It's like you just don't know how to PICTURE PROPERLY!! For a community like you, where 90% of you simply paste and ignore the delicacies of cropping, resizing, and even UPLOADING a photo on the webs, IT TAKES A LOT OF GUTS, MA FRIEND!!! GUTS, I TELL YOU!!!
And you know how much I hate people who have the guts to do something as idiotic like that. But just as I hate them, I'm also chivalrous and merciful. Today we'll finally uncover the mysteries of a perfect picture taken online posted properly on your awesome blog. It's a loooooong journey, so hang on tight! Oh and for those who think this will be complicated – this AINT TABLES, YO!! This is all about da pics!
Alright, before we begin – you must know how to write and post a blog. Here our good ol' fellas on ScrewAttack made an updated Official StyleGuide that will teach you all the basics on how to write a good blog from start to finish. Also if you're interested in how to make some mean tables without making you look like a fool while doing so, here's my tutorial so you can be a bit more intelligent than what you were a minute ago.
So without further ado, here's How To Picture Teh Picture, cuz I Picture You as a FOOL.
REQUIRED GUIDELINES BEFORE BEGINNING:
EVADE HOTLINKING AT ALL COSTS. Hotlinking is the practice of grabbing a link directly from the web and pasting it without uploading it on a personal service. Even if the author of the picture desires hotlinking, it's still not a good idea because who knows if that said dude decides to remove the picture from total existence. Always download the original picture then upload it somewhere else – preferably in a personal, private album.
SEEK HIGH QUALITY IMAGES THAT ARE LARGE ENOUGH. If you can't find a better quality image, that's fine – but always look for images that are at least the same width as the blog, which is 587 pixels (according to ScrewAttack – I always thought it was 590). You can later resize them to fit the amount you are actually looking for, but bigger images mean that you'll get better quality over a smaller one.
MAKE USE OF AN ALBUM ACCOUNT. Evade Facebook and use something like Photobucket, Imageshack or Imgur. These not only make uploading images easier, but they make organizing them a breeze and, for the most part, upload images in their full quality. I personally use Imgur, but you can use whichever you want as long as you feel comfortable with it.
TRY USING A UPLOADING TOOL, LIKE PICASA. It's not a requirement to download a program and use it, but it does help on the long run when uploading pictures – especially since some of them have tools to resize large, multi-megapixel photos into a reasonable size that the internet can handle.
NOTE: I did this tutorial using a PC, meaning that Mac users might have some of your shortcuts somewhat different than mines. For the record, if it ain't Ctrl, it should be the Command button instead. If there's a shortcut that ain't working for you, well...Google it, or simply search it in the toolbar. Sorry.
BIG NOTE: Imgur already has tools for resizing and cropping images. If that's all what you want, skip this step and go straight to the Uploading area down below. That said, it should be wise to check this section otherwise, because you wanna learn about how to add layers (logos) and text into your images.
Posting a picture itself isn't much of a science here in ScrewAttack – there's just a few steps away for you to simply copy and paste an image link so you can see it on your blog. This, however, is the simple process that most amateurs would usually do. A pro cannot simply link an image; they need to make it look nice on wherever it's been shown. So let's get started with a cool image to work with.
Say hello to Gamer Tiger. I heard he's one mean CoD player and has kicked the crap out of many MvC3 newbies. I also heard he's a bit into NBA Live. Yeah, he's sort of a gramer, but nobody cares – he's got the controller and I don't think he'll be willing to give it away.
Now this image is actually 1024x768 big, but the blog itself resizes it to the blog's actual size (which I found out it's actually 588 pixels – GET YOUR FACTS RIGHT, SCREWATTACK!!!). Now then, we're gonna fix the image for two sizes – one is the actual blog size, and the other one is for a blog banner and/or thumbnail. But first...let's get a competent image editor.
The two programs that seem to be the most popular out there are Adobe Photoshop and Gimp. Photoshop is, well, not free, and you'll need to fork up a good $300 for the latest version. Gimp, however, is open-source – in other words, it's completely free to download and do whatever the shit you want with it. I'll teach how to fix images in both programs, but I'll assume for the most part that you have Gimp.
Boot up the image editor. Find the file you're going to edit – in this case, we'll be using our dear Gamer Tiger image. The fastest way to get it in the program is to simply drag and drop the image into the editor. So you'll have something like this:
Now then, to resize the whole thing, here's what you'll do. In Gimp, go to Image > Scale Image; in Photoshop, it's Edit > Image Size. In the window that appears, you can adjust the size to whatever you want, so let's go ahead and resize it to the blog's width, 587 pixels:
Hit Scale/OK, and you'll get a smaller image that will load faster when you open your blog. This is extremely useful for images that are extremely big (like over 2000 pixels wide), so be sure to understand this.
There's something true about this subject: you really don't need to resize an image for a banner and/or thumbnail since the website itself does that job to you. But hey, sometimes you actually need a thumbnail-sized image in a blog, like showing a dude's face in a citation. In this case, you'll have to do it yourself – and thankfully there is a crop tool in both Photoshop and Gimp to help you in that matter.
In Photoshop, choose the Crop tool (or simply hit C). In Gimp, it's Shift+C (though you can also find it in the toolbox). Now highlight the area you want to crop:
Adjust the cropping area as you wish – you can check the actual size of the cropping area in either the top-right corner of the program under the Info tab (Photoshop) or just under the toolbar (Gimp). In this case, I made sure that the cropping area is just about the same size as a thumbnail – 280x185 pixels. Once you do, hit Enter (either program) and BOOM – you got a cropped image.
For banners, it's the same thing, only that this time, you're looking for a 620x186 size.
One of the biggest requests I've been asked for so long is how to layer logos and insert text on thumbnails and banners. To be quite honest, it's a very simple process – but I can understand that people can't quite comprehend how to do so. After all, we all start slow, do we? But hey, I'm here to make you look less like an amateur and more like a badass pro, so here's how I will teach you how to get logos into your thumbnails and banners.
Using the past thumbnail as an example, let's go ahead and add in one logo that EVERYONE seems to want to add – the g1 Features logo. Recommendation: SAVE the image first into your PC before doing anything. Don't copy the image into the clipboard straight from the web, because you won't get the transparent background you'll need when pasting it on the image. Now then, the process is a bit different on both Photoshop and Gimp, so I'll make different tutorials on each one.
Drag-n-drop the image into Photoshop, then do the Ctrl+A/Ctrl+C combo (Select All, Copy in the Edit menu if you were wondering).
Close that window (not the program itself) and return to your thumbnail, then paste it (Ctrl+V or Edit > Paste).
The image should be imposed over the thumbnail, but it's too big; hit Ctrl+T (Transform) so you can individually scale the layer.
Hold Shift while scaling so it can retain its overall proportion, and if necessary, drag it around to be able to see it. When it's the size you desire, hit Enter.
Choose the Move Tool (or press V) so you can move the logo around to a precise location.
Drag-n-drop the logo into Gimp, preferably over the thumbnail.
The image should be imposed over the thumbnail, but it's too big; select the Scale tool (Shift+T) then click the logo so you can scale it.
Hold Ctrl so it can retain its overall proportion, and if necessary, drag it around (by clicking the image's center) to be able to see it. When it's the size you desire, hit Enter.
Choose the Move Tool (or press M) so you can move the logo around to a precise location.
If you do well, you should have a thumbnail with a cool logo imposed over it. This works the same way for banners, so no need to explain how to do it there. Now for adding text, both Photoshop and Gimp have text tools...but while Ps is actually intuitive enough to understand (simply click anywhere, write, fix anything on the toolbar above, etc.), Gimp's a bit different. We'll focus on Gimp for now, but if you have any issues with Photoshop regarding text, don't hesitate in asking.
Adding text in Gimp:
Select the Text tool (Press T). Before you input any text, make sure you choose the font you want to use, the size, and the color. I recommend using a bold-looking font like Badaboom with a 30-something size, while using a color that contrasts the picture nicely.
In the Box menu, choose “Dynamic”. This allows the text window when writing to expand as you write.
Click on the thumbnail and write whatever you wanna write. Don't worry if it's in the wrong place – you'll get to move it later.
Once you're finished, hit Esc to close the text-editing mode and select the Move tool (Press M) so you can move it around the thumbnail. You're done!
Now there's a few tricks that I want to teach to you that will help exponentially when it comes to making this text look better when contrasting with images, but with Gimp it's hard to pull it off so I'll just let it be for now. What's important is how to insert logos and text in your thumbnails – and that's something that you manage to learn today thanks to me!
Alright, so you either prepared the picture like I explained above, or you just downloaded the picture to evade hotlinking like I told you. Now here comes the next part: uploading the picture. For the uninitiated, images need to be up in an online server so it can be shown 24/7; no way you will link a picture from your own PC, will you? That's just idiotic.
Now if you wanted to simply make a thumbnail or a banner for your blog, this part is unnecessary. This is mostly for saving pictures, albums, galleries...all that sort of shit. Let's go one step at a time.
I'm going to list the benefits and differences between each major hosting site right now so you don't get confused in the process.
TinyPic: This is basically your barebones image uploader where you simply upload a single pic for a random purpose. It's very straightforward and it doesn't have fancy stuff like album galleries, but you don't need to register in order to use it, so it's ready right off the bat.
Photobucket: This is my personal choice, not only because it's useful, but also because it has stuck to me for quite some time. While showcasing stuff isn't the most intuitive, it has some nice features like making your own albums and organizing them nicely. You need to register, but for those who are very heavy in random picture uploading, this might be your best shot.
DeviantArt: DeviantArt has been the best place to showcase everything art thanks to its community features such as subscriptions, favoriting and commenting, among other features. You can directly link images from this site without an issue, but keep in mind that whatever you upload must be owned by you, otherwise you might get a swift hit from the banhammer! (Fanart, however, is allowed so long as you're the one drawing it :P) dA doesn't play around with plagiarism, whether it's commercial or simply caught from somewhere clearly not yours. Use this only if you're an artist.
Picasa: This Google-based uploading site includes its own downloadable program that in my opinion is one of the best I've tried. Not only you can instantly sync albums to the cloud with a flick of a switch, but you can also do instant screen capturing, cropping, and all the awesome pic-fixes we get these days. I suggest also getting plugins like Tvivo (to post pics on Twitter) and Facebook (to instantly upload pics without needing to enter the website itself!) This is a nifty tool/uploading site that I highly suggest trying out if you already have a Google account.
Imgur: I only had a 5-minute experience with this uploading site and I already know this is probably your best place to start when it comes to both image sharing and album making. Let's talk about the most important features: instant upload of images from the internet itself (no need to download them only to upload them back!), drag-n-drop image uploading from your computer (or the ever-so-useful CTRL+V technique), easy album management, social network sharing and perhaps my favorite: instant thumbnail making. Why is it so useful? Because this will make it so damn easy to make those darn galleries the way I want. The only thing I wished they had was a cropping tool like Picasa's, which is the one thing keeping it from being perfect. With that said, for this tutorial, I'll be using this as a base, but if you ask politely I can also teach you how to use others as well.
Alright, choose whichever you want and mock around with it. I'll teach you how to use imgur, which is the most popular choice here on ScrewAttack. Be sure to sign up (which usually requires an username, email and password, but you can also login with Twitter, Facebook, Google or Yahoo) and then we'll get started with the image uploading.
Imgur has four ways to upload images: drag-n-drop, upload from computer, upload from Web, and a very convenient CTRL+V (aka Paste) feature. Let's talk about all four of them in detail:
- Drag-n-drop: It's a matter of simply locating the image on your computer and drag it into the web browser's Imgur page. It'll conveniently upload in an instant.
- Upload from Computer: If you prefer the old-fashioned method, you can simply press the Computer button at your right and simply locate the file. It'll upload as soon as you choose it.
- Upload from Web: This is one of the best features since it allows you to grab a link from the internet, paste it in this little box, then it is uploaded in your little album. Use this to evade doing hotlinking – so long as you are not stealing it from anybody!
- CTRL+V: When you hit CTRL+V, it simply tells Imgur to upload whatever image is saved on your clipboard. Mind you, this is different from pasting a link – you're pasting an actual image. This is very useful when sharing screencaps (hit Print Screen then go to Imgur and hit CTRL+V).
This is very, VERY easy to do. But how about entire albums...?
To make albums, you need to make a new one inside Imgur, so let's go to the albums page.
As you can see, I already got two albums here, but how about we add another one? Hit “New Album” to start:
A window opens with three options. Write an album's title and a description (optional) then choose how do you want your album to be displayed. You can later change it if you want, but I prefer the last one for ease of access. Choose whether you want it Public, Hidden or Private, click “Save” and then boom, you got a new album.
This will have “Non-album Images” but if you're going to upload new images on a single folder, I suggest you select the top option (“This Album's Images”) and move on. Hit Save.
You'll see that you're sent back to the Album's area. Let's ignore that for now. Let's go back to the images page, where you'll upload. Now there's an option down below that says “Add to Album”. Select the new album you made then upload a batch of images either by Drag-n-drop or old-fashioned. In this case, I'm uploading my Club Nintendo images:
Mind you, if your pictures are really, REALLY large, it might take a while before all images are uploaded, so it could be an overnight task to complete. However, once done, you should be able to see all of your images in that special album folder inside Imgur.
And...that's pretty much it.
Let's move onto posting pictures on your blog, which is basically two concepts here. The first one is just VERY simple, but the second one is a bit more complicated.
Posting a picture on ScrewAttack has been always the same deal: click the picture button, paste the picture, hit OK. Easy as pie. Also, notice that you can also add a small shadow under it by clicking the Styles dropbox (like when adding Caption and Quote styles on text) and selecting “Bordered image”. If you see pretty much every image posted in here, you should see the result.
Now then, the second one is about posting a gallery of pictures on your blog. Thankfully, Imgur has a cool gallery embed code for albums for everyone to enjoy, so here we go:
Select the album you want to share from Imgur, and go to its main page.
On the right side, choose “Embed Album”. Grab that link.
Paste it onto your source code (Embed HTML – right now we don't have this button, but you know what I mean...)
So yeah, that's...pretty much it, I guess. Wait, you wanted to know how to do the whole table trick again? I can show you, but it's not worth your time and money. Anyway, I assume you're using Imgur for this.
Making a Gallery Table:
Make a table with 6 columns and as many rows necessary to fit in your entire gallery (or the amount of pics you want to fit in). No border, a spacing or padding of 1, and Center alignment.
On each cell, insert the small avatar-sized image for a preview of your picture. (To do this, go directly to your Images menu *outside* the album, then select the images separately. On the window that appears, select "small square" on the dropbox above the image, then grab the direct link from the ones above.)
Highlight the picture (simply click it), then hyperlink it to the original picture. This will allow people to see the full-sized image when they click the small one.
Do this with every other image in the table.
Here's the results:
I highly doubt that you'll ever need to do this...but I just did it for the HELL of it!
Alright, FINALLY we got this out in the streets. I think I'm done with teaching you guys how to post pictures properly, but I'm not done yet with tutorials. Next time, I'll be teaching you how to spice up your livestreams via Xsplit – you don't even have to pay a single cent to get yourself awesome stuff! Subscribe and follow me on Twitter if wanna find out my next adventures. g1 JETZ.acx signing off!
Wow, this is very impressive Jetman. I personally also like to use Photobucket as well.
Well can't wait to read it :) should be interesting.
The trick I use is usually make the game in windowed mode then add a screen region from that window, later go to its options and crop its borders so that only the game is viewed. However, when it comes to capturing devices (for console gameplay), at least in my case it's just another webcam source so no need to do fancy fullscreen shenanigans other than some cropping cleanup.
*claps slowly yet passionately*
Some suggestions for Gimp users: add the Liquid rescale and G'Mic plugins, the first one is very usefull to mate a image wider or taller without deforming the image. The second one has a "upscale - difussion" tool to make an image bigger without pixelation, usefull to crop and reduce later.
I clicked this because of the tiger kitty in the thumbnail.
Well said JETZ, I certainly hope that this will give way to some much cleaner looking blogs on all ends of the community.
Well I never tested it without fullscreen but I think during steaming it'll show the desktop so ya unless you want to show that go right ahead :P
I'll try it out and see how good it is, and see if I can make some of the tricks Xsplit has. As for full-screen mode, it's a small price to pay in my case, though I can see why people want fullscreen for their games.
"Alright, FINALLY we got this out in the streets. I think I'm done with teaching you guys how to post pictures properly, but I'm not done yet with tutorials. Next time, I'll be teaching you how to spice up your livestreams via Xsplit" Woah Woah Woah Woah Woah woooooooaaaaahhhh there nelly armstrong jr. sr. ok Xsplit has a free version but it;s terrible and it doesn't support Fullscreen mode (at least when I tried it.) So how do you make it free? YOU HAX MY GOOD SIR! Anyway I use Xfire Live Stream, sure it's not as customizable as Xsplit, but it's free and it just what the major of streamers do anyway, play a game and post a webcam of themselves failiing at a corner :P
Beautiful. I commend you, sir.
Really good guide. The embed code for imgur (especially with regards to slideshows) works fantastically on most websites too. Good call in the GIMP. It gets overlooked with Photoshop, but it is it a fantastic (and more to the point, free) tool.
Wow. O_O That was extremely informative. I stopped hotlinking a while ago, but still, this is fantastic for anyone that wants to get into the blogging scene around here
Alright...gotta stop hotlinking even if I say the picture is not mine. Informative :D Just a bit annoyed that resizeing dosn't work for me with Screwattacks blog system. Owell thank you Photoshop.
I was working on the pic tutorial a while before he posted that, but hey - he just talked about hotlinking. I talked about a lot more.
Informative. I stopped hotlinking awhile ago after REVULSIVE's article popped up.