Ok so in this part of the site I'll be showing you how to make and code layouts easily using the power of HTML!!!!
If you already know how to make layouts but just need to code them, then skip the part below and go straight down to the coding part.
So let's begin!!!
How to Make Layouts
You Will Need
~ GIMP 2.6 or later (click here to go to the site and download)
~ Some time and patience
~ A browser such as Google Chrome, Internet Explorer or Mozilla Firefox
Method
1 ~ Start by downloading GIMP (link above) and opening it up. Close every window except the main one - it should look like this:
2 ~ Then click Windows > Dockable Dialogs > Layers. Then do the same but click Windows > Dockable Dialogs > Navigation and Windows> Dockable Dialogs > Tool Options. Three new windows will have popped up by now. Then you need to open the Toolbox. Click Tools > Toolbox (or sometimes it may say "New Toolbox") and another box will appear. Right so if you look at the Layers, Navigation and Tool Options boxes, they each have a tab at the top. Drag the Layers tab into the Navigation box, and the Tool Options tab into the Navigation box too. The box will look like this:
Now you're ready to start making your layout!!!
3 ~ Okay so open your browser and go to deviantart.com. Type in the background that you want for your layout. Remember to add the word "stock" to the end of your message, which means that the person who made the picture won't mind you using it because it's stock. So you would type something like "meadow stock" or "clouds stock".
For this example layout I will be using my own picture that I took - you can use it too but remember to credit me ;)
Most people on deviantART who have stock on there have conditions to use, such as to credit them and to link back. Make sure you read the person's conditions and follow them otherwise it counts as stealing!
Ok so here's the picture I'll be using for this layout ~
4 ~ So now you've got your background picture, you can make a decision - do you want your layout to be a manipulation layout or just an ordinary picture layout. If you want it to be a manipulation layout then follow the rest of the steps from now, but if you just want it to be an ordinary layout then skip steps 5 and 6.
5 ~ To make a manipulation layout, you'll need a subject. This is the thing you will (to put it in basic terms) cut out and stick onto your background!
So go back to deviantART and search for a picture to use, still remembering to put "stock" at the end of the search. So I could put "horse stock" or "cow stock"
Find the picture you want and make sure you follow every step to make sure you're not stealing somebody's picture.
I am going to use this picture, courtesy of lumibear on deviantART!
A new box will pop up. Click "Advanced Options".
Go back to the picture of your subject and look at the Toolbox which is on the left of the window. Click the "Free Select Tool". Then use it to draw a rough outline around your subject like this:
Right click on the subject. Click Edit > Copy and go to your transparent page and paste the cut out subject onto the page. Click the Free Select tool again and click off the subject onto the checkered background. Now, here's the bit that takes time. Zoom in (View > Zoom) and use the tool to carefully cut out the subject. Use the Navigation tab to move around the picture easily. To make it easier, use the line to go carefully around part of the subject and then cut it out like below:
When you've completed that and you're happy with your subject, zoom back out and cut roughly around the subject again with the free select tool. Then right click, Edit > Copy. Now go to your background and paste the subject there! You can use the "Scale" tool and the "Move" tool to edit your picture and move it around your background to where you want it. Beware - as soon as you click off the subject, you can't move it again!
 |
| the Scale tool |
 |
| the Move tool |
7 ~ If you're making an ordinary layout, welcome back! Lol! Rightey ho!
So now here's what you're gimp should look like except with your picture(s) and not mine!
8 ~ Now for the credits. This is a very important part of making your layout, otherwise it's counted as stealing.
Alright so seeing as it's my picture for the background I don't need a credit for that.
But I got the cat from deviantART and according to that person's terms I need to credit them.
So I would write
"cat - lumibear @ deviantART" and after that put "manip and layout made by Cloudheart" but you write "manip and layout / layout made by [your name here]"
Make sure the credits are easy to read and are a good size. Don't make them too small or the person who's photo you're editing will get pretty annoyed, but if you make them too big then they will interfere with the layout.
9 ~ Now you can add boxes! Okay so go into the window where your layout is. Click File > New and a box will pop up. Change the width x length to 200x200, don't worry, you can change it later. Then click OK and another window will pop up with a white box. Change the colour of your box by clicking on the black box in the toolbox (labelled below)
10 ~ Once you've chosen your colour, use the bucket fill to fill in the box. Then right click on the box, Edit > Copy and go back to your layout. Paste the box on and move it around as you wish!
Do not deselect the box just yet.11 ~ So, you wanna make the box slightly transparent? Well here's what you do.
Right so click the Layers tab which is on the right. Then you see the bar at the top which says "Opacity"? Change that to around 60 or 70. You can go higher or lower if you want, depending on your taste.
Now your box will be a bit see through! You can continue to move it around and resize it until you deselect it.
12 ~ Now you can add more text boxes, change the colours, sizes and more. When you've got it how you want it, it's time to save.
Click File > Save , and save it as a .xcf file.
THEN click File > Export , and save it again as a .jpg file.
You save it as a .xcf file so that you can access it again on GIMP, and you export it to a .jpg file so that you can code it.
13 ~ And finally! The moment you've all been waiting for... coding.
Right so open your browser and go to TinyPic and upload your layout. Don't click any of the ads, they're probably spam.
WORK IN PROGRESS. THIS TUT WILL BE FINISHED SOON...
No comments:
Post a Comment