Coding Neopets Layouts Tutorials
posted by Del @ 6:17 PM
0 Comments
May 31, 2010
May 23, 2010
Making an Icon with Photobie
Here, I'll be teaching you how to make an icon in Photobie using icon textures, brushes, and a base. This won't take long, only about five minutes or so.
First, take an icon base like so:
credit:Quiescent
Paste it into Photobie (Edit => Paste as new image) and adjust the saturation just a little bit to make it more high quality. Here's how it looks so far:
Now we'll paste this icon texture:
credit:xchirix@LJ
and lower the opacity. Now, play around with the saturation, cold-warm, brightness, and contrast (well, all of them) until you get something similar to this:
We don't need to lower the opacity, since we did that before switching the colors around. Next, we'll take:
credit:xchirix (link above)
this icon texture, paste it, and lower the opacity so it looks like this:
Now for the final step! Take this brush:
credit:Shizoo
and on your color pallet switch your current color to white. Then, apply it to your icon using the brush tool after selecting it. Here's my result:
Tutorial donated by Rii
Labels: making an icon, photobie, tutorial
posted by Del @ 2:43 AM
0 Comments
May 14, 2010
PHP Includes
PHP includes is a very important tool in updating your weblayouts easily. It is very similar to Server Side Includes, the only difference is, using PHP includes will enable you to use other PHP scripts/snippets.
The first thing you need to do is to code your layout the ordinary HTML way. Then divide your layout into 3 parts. The header, content, and footer parts. The header shall contain all your codes before the contents of the page, and the footer shall include the codes after the contents of the page.
On your index.php page put the following code:
<? include("header.php") ?>
PUT YOUR CONTENTS HERE!
<? include("footer.php")?>
To create a new page just put the contents between the header code and footer code. It's just that simple. Don't forget to save your files with a .php extension!
Labels: basic, php, php inludes, tutorial
posted by Del @ 6:48 AM
0 Comments
Classes and IDs
As you probably know...divisions can have classes and id's. But what are classes and id's?
We classify our divisions into classes and/or id's if we want a certain attribute to be applied only on a specific part of the page. For example, if you want your menus to have a completely different link color from the rest of the page. Or if you want your headers to be of different font.
Q. But when do we use classes? And, when do we use id's?
A. We use classes when we have more than one element/attribute to be used in the same class. And we use id when we give a unique attribute to a single tag! Id's are usually used once per document as for classes, you can use them multiple times in your document!
Classes
For example I want the first row on my table to have this attributes:- tahoma font,
- a font-size of 10,
- I want my text to be bold,
- I want my text to be centered,
- the background should be black and the text should be white,
- and i want my text to have a double white bottom border,
.tr1{font-family:tahoma; font-size:10; font-weight:bold; text-align:center; background-color:black; color:#ffffff;border-bottom: double #ffffff;}
Now, I want my second row to have the following attributes:
- a comic sans ms font
- a background color of lightblue
- text should be on the left
- text color should be red
- a border around my text
- there should be a padding of 3px;
Now the code for the second row would be:
.tr2 {font-family:comic sans ms; background-color:lightblue; text-align:left; color:red; border:1px solid #000000; padding:3px;}
My third row will be a lot simpler. I just want to have:
- text on the right
- text color of blue
- and background of yellow
The code will look like this for our third row:
.tr3 {text-align:right; font-family: arial; color: blue; background-color: yellow;}
Now let's see how our table looks like when we put all the attributes together!
THIS IS THE FIRST ROW |
THIS IS THE SECOND ROW |
THIS IS THE THIRD ROW |
on the first row: <div class="tr1">THIS IS THE FIRST ROW</div>
on the secong row: <div class="tr2">THIS IS THE SECOND ROW</div>
and on the third row: <div class="tr3">THIS IS THE THIRD ROW</div>
ID's
Let's continue with our table....I want all links on the table to be in color red and purple when hovered! Let's name the id navcontainer!
The code will be:
#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
}
#navcontainer li { margin: 0; }
#navcontainer a
{
color: red;
background-color: none;
text-decoration: none;
}
#navcontainer a:hover
{
background-color:none;
color: purple;
}
The code we need to add would be:
<div id="navcontainer">
(put your table code here! including links!)
</div>
So now our table will have to be like so if we placed the codes just before everything!
Notice how the links in the divisions are different from this LINK which is outside of the divisions!
Better Understanding
To better understand the difference of Classes and IDs, study the code of the table above:
Notice how often we used classes. We used it 3 times to apply our preferences. The ID on the other hand, can only be found at the beginning and end of the entire code. IDs are therefore used to set an attribute to the entire document while classes are used to set attributes to the different parts of the document!
Labels: basic, classes and ids, css, tutorial
posted by Del @ 6:43 AM
0 Comments
Basic CSS
Scrollbars
This code will help you change the color of your scrollbars to fit your weblayout. However, this can only be seen on IE and not on Mozilla! If you need ready coded scrollbars you can use the following below!This is the code you need to place:
The code above will show a scrollbar similar to this:
To know which part is ... I placed unusual colors on the attributes which you can edit later!
scrollbar-face-color:red;
scrollbar-arrow-color:blue;
scrollbar-track-color:purple;
scrollbar-shadow-color:black;
scrollbar-highlight-color:yellow;
scrollbar-3dlight-color:green;
scrollbar-darkshadow-color:white;
Left Scrollbars by Alex
This is easy if you can code a normal scrollbar. All you need to do in this that you dont have in the other is put {direction:rtl; infront of ur scrollbar code
<style type="text/css">
body {
direction:rtl;
scrollbar-3dlight-color: COLOR/CODE;
scrollbar-arrow-color: COLOR/CODE;
scrollbar-base-color: COLOR/CODE;
scrollbar-darkshadow-color: COLOR/CODE;
scrollbar-face-color: COLOR/CODE;
scrollbar-highlight-color: COLOR/CODE;
scrollbar-shadow-color: COLOR/CODE;
scrollbar-track-color: COLOR/CODE;
}
</style>
Here are some scrollbar codes you can use. A link back is not necessary but will be greatly appreciated!
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
Links
This is the code that will make you change your link colors!
In the code above we have a: link; a: visited; a: hover.
a:link - all attributes contained inside it's bracket shall be the "normal" look of a link in your page;
a:visited - all attributes contained inside it's bracket shall be the look of a link that has been clicked or visited;
a:hover - all attributes contained inside it's bracket shall be the look of a link when you hover your mouse on it.
Link Attributes
- color - this is the color of the link you want on its normal look, visited look and hovered look
- text-decoration - this is the look of your link...you can place underline or strike
- font-weight - if you want your link to be bold put bold, if not put normal.
There are other ways you can make your links look better like adding the following:
- font-size: - you can put the size of the text on the a:hover bracket to change the font size once a visitor hovers his mouse on it.
- background:url(image.gif) - if you want a background on your links once a visitor hovers on it you can place this code on the a:hover bracket.
- background-color:#color - if you do not want an image but a color put this code instead
- border:1px solid #000000 - if you want a strong border around your links when you hover on them you can place this on your a:hover bracket, if you do not want strong, you can place dashed, or dotted and you can change the border size too if you do not want 1px you can choose any number just be sure it looks good!
- font-family: - if you want your links to have a different font
Just try playing around with your codes to discover more!
Fonts
Sure you can use basic html for fonts but the beauty of using css is that you place a fixed font attribute for the whole page so you wouldn't have to write <font color=#000000> all the time! Plus you are able to do more with fonts with css.
Place this code inside your <style type="css/text"> tag:
- body - this simply mean that all attributes inside its brackets shall be applied to the whole body of the html document.
- color - the color you want your font to be
- font-size - the size of your font
- font-family - you can place the fonts you want for your webpage. We must note that if you place a font-family that a user does not have in his computer, that user will not be able to view your webpage with the same font you use...so it is adviced that you put not just one font-family but atleast two. You can separate the font- families with a comma.
- line-height - this will determine the closeness of lines in your page. The smaller the number the nearer your lines are gonna be.
- letter-spacing - this is the space between your letters.
- text-align - if you want all your text to be placed on the right side of your page put "right", if you want on the left put "left", and if you want centered put "center", or if you want it to be justified you can put "justify" so the page will look better!
posted by Del @ 6:38 AM
0 Comments
Iframes
|
What is an iframe? An iframe or inline frame enables your visitor to view a page from your site or from a site anywhere else from the net without having to reload your page.
the code for the iframe above is as follows: <iframe src="http://neo-faeriewings.comuv.com/tutorials/frame1.html" name="frame1" width="350" height="100" frameborder=1></iframe>
The above frames are what we call interaction frames. Both are pages from different locations and yet when you put them together here you are able to control one frame from another frame! The code for the above frames are as follows:
<iframe src="http://neo-faeriewings.comuv.com/tutorials/frame2.html" name="frame2" width="150" height="300" frameborder=1></iframe> Now, what are the contents of the first frame and the second frame? This is our navigation area!<P>
click <a href="http://neo-faeriewings.comuv.com/tutorials/frame4.html" target="frame3"> HERE for frame 4</a><br> If you notice the name of the second frame it is "frame3" thus the target of the link should be on the frame we want it to open! The contents on the second frame is simply the following:
This is frame 3. Click on the links on the left frame and see what happens!
height: can also be set in pixel or page percentage frameborder: if you want to place a border around your frames, just enter the number you want depending on how thick you want the border is. If you do not want any border, set the border to 0
To make your iframe background transparent use this iframe code:
and then on the pages you want to put in your frames put this code in the body tag:
Example:
The code for the above frame would be: Don't forget to put the body style code on your files: <body style="background:transparent">. If you fail to do it, your frames will not be transparent!
|
Labels: basic, html, iframes, tutorial
posted by Del @ 6:33 AM
0 Comments
Division Layers
Division layers sets apart a section of the page and can be placed anywhere in your site. It can overlap a table or overlap another division. It's a very handy tool in making weblayouts look even better!
Div 1 code:
<div id="name" style="position:absolute; left:350px; top:675px;
background-image:url(background.gif); border:1px solid #000000; width:100px;
height:100px; background-color:#99CCFF; padding:5px; z-index:2;">
This is Divison 1</div>
Div 2 code:
<div id="name" style="position:absolute; left:400px; top:725px;
background-image:url(background.gif); border:2px dashed #666666; width:100px;
height:100px; background-color:yellow; padding:5px; z-index:3;">
This is Divison 2</div>
Div 3 code:
<div id="name" style="position:absolute; left:485px; top:775px;
background-image:url(background.gif); border:3px dotted #996600; width:100px;
height:100px; background-color:pink; padding:5px; z-index:1;">
This is Divison 3</div>
Div 4 code:
<div id="name" style="position:absolute; left:500px; top:825px;
background-image:url(imageURL);
border:5px dotted #996600; width:100px; height:100px; background-color:none; padding:5px;
z-index:4;"> This is Divison 4</div>
To view the result of the above codes click HERE.
As you can see on our example, we have 4 division layers on this page and they have different style attributes and locations on the page. Just like told earlier, divisions can overlap anything as long as you place them on the right location!
- id - this is the name of the division...you can understand more about this when you check out our css tutorials.
- left - this is the position of your division from the left part of your page.
- top - this is the position of your division from the top most part of your page.
- background-image:url(image.gif) - place this code (subs the image.gif with your image URL) if you want to place an image as your background
- border - this would be the line around your division layer
- width - the width of your division in pixels
- height - the height of your division in pixels
- padding - this is the margin within your division. You set this to keep the text from starting and ending at the very edge of your division.
- background-color - if you want to set a background color on your division.
- z-index - this is to set which division should appear first. The division whose z-index is 1 shall be closest to the background. If you notice from our example Div 1 overlaps division 3 because division 1's z-index is 2 while division 3's z-index is 1, thus division 3 is closest to the background than division 1.
Labels: basic, divison layers, html, tutorial
posted by Del @ 6:30 AM
0 Comments
Showing your HTML Codes
This is most important to those writing tutorials! We can show HTML codes on our pages by the following ways:
- With the use of textareas:
<form><textarea rows="3" cols="10" style="background-color:white; border-style:solid"> put your html codes here! </textarea></form>The above code will look like this:
Don't worry, it will scroll when you put a longer html code. Now, this is used when you have a lot of codes you want your visitor to see. You can change the rows, cols, background and border attributes to your liking!
- With the use of < and > :
These codes will appear on your page as follows: for < it will appear as < and for > it will appear as >.
You can use these on shorter codes like <body bgcolor=#ffffff> which will appear as <body bgcolor=#ffffff>
Labels: basic, html, showing html codes, tutorial
posted by Del @ 6:28 AM
0 Comments
Tables
Tables are really handy especially since most of the time tables are used in web making. So how did I make the table? Simple here is the code:
<table border=1>
<tr>
<td>YOUR 1ST TEXT HERE!
</td>
<td>YOUR 2ND TEXT HERE!
</td>
</tr>
<tr>
<td>YOUR 3RD TEXT HERE!
</td>
<td>YOUR 4TH TEXT HERE!
</td>
</tR>
</table>
The code for the above table is as follows:
<table border=1>
<tr>
<td colspan="2">HERE ARE MY FAVORITE NUMBERS!
</td>
</tr>
<tr>
<td>10
</td>
<td>13
</td>
</tr>
</table>
As you can see above all you have to do is to add the colspan="2" to the td attribute. You can place 3 or 4 or 5 depending on how many columns you would want for the td to span!
The code for the above table is as follows:
<table border=1>
<tr>
<td rowspan="2">put your text here!
</td>
<td> put your text here!
</td>
</tr>
<tr>
<td>put your text here!
</td>
</tr>
</table>
You can change the rowspan to whatever number of rows you want your td to span!
- border - if you want to place a border on your table just put any value from 1 to the border attribute. (eg. border=3)
- width - if you want to define the width of your table or your td you can do so by adding the width="1.2.3..to whatever" (eg. td width=100 ; table width=250)
- height - if you want to fix the height of the table you can put height="any number you want" (eg. td height="500" ; table height="850")
- cellpadding - this is the padding in your cells. You can place this when you want the contents in your cells to be farther from the edges of the cell. (eg. table cellpadding=0; table cellpadding=5)
illustrations on cellpadding
when cellpadding=0 the table would look like this:
when cellpadding=5 the table would look like this:
Notice how the text moved farther away from the cells' edges when we added the cellpadding!
- cellspacing - this is the space between your cells. (eg. table cellspacing=0 ; table cellspacing=5)
- th - you can use this to shorten your table code if you want to place a header on your table cells.
illustration
The code used above is as follows:
<table border=1>
<tr>
<th>HEADING 1
</th>
<th>HEADING 2
</th>
</tr>
<tr>
<td>put your text here!
</td>
<td>put your text here!
</td>
</tr>
</table>Notice that we did not have to put the codes <td> <b> <h1> HEADER 1 </h1> </b> </td> to get that header effect! We simply made use of the th atribute which is simpler and easier!
- bgcolor - this will set your table background colors!
illustrationPut your text here! Put your text here! The code used above is as follows:
<table bgcolor="#333D6F" cellpadding="10" cellspacing="10">
<tr>
<td bgcolor="#3394A8">Put your text here!
</td>
<td bgcolor="#3373A8">Put your text here!
</td>
</tr>
</table>This makes a prettier looking table, doesn't it?
illustrations on cellspacing
when cellspacing=0 the table would look like this:
when cellspacing=5 the table would look like this:
Now you can see how the cells moved farther apart from each other!
Labels: basic, html, tables, tutorial
posted by Del @ 6:08 AM
0 Comments
Putting Backgrounds on Your Pages
The most simple way is to use this basic html code:
To change the color of your background use the following code:
<body bgcolor="#FF0000">
To put a background image you can use this code:
<body background="image.gif">
The code above will give you a tiled background. And if you wish to place a fixed background on your page you can place this code:
<body background="image.gif" bgproperties="fixed" >
But the most convenient way to put background is by the use of your CSS
You can place this code on your CSS:
You can change the attributes on the above code to your liking.
If you want the background to repeat, change no-repeat to repeat-y
If you want to place your background anywhere but on the right bottom just change where you want the image to be; ex. left bottom
If you do not want your background to be fixed on the page...you can omit background-attachment: fixed
If you do not want any color on your background and only the image you can omit background-color:#ffffff
Labels: background codes, basic, html, tutorial
posted by Del @ 6:07 AM
0 Comments
Putting Images on Your Pages
Inserting an image to your page
<img src="YOUR IMAGE URL HERE">Example: <img src="http://images.neopets.com/games/new_tradingcards/lg_poogleday09.gif">
The image will look like this:
Aligning your images
To align your image to the left use this code:<img align="left" src="YOUR IMAGE URL HERE">
To align at the center use this code:
<img align="center" src="YOUR IMAGE URL HERE">
To align your image to the right use this code:
<img align="right" src="YOUR IMAGE URL HERE">
Using Alt
Sometimes you would like to put some descriptions on your images you can do this by inserting an alt.<img src="YOUR IMAGE URL HERE" alt="your description here">
Example:<img src="http://images.neopets.com/games/new_tradingcards/lg_poogleday09.gif" alt="Just take a flight">
Now just put your mouse over the image below and you will be able to see the description!
Resizing your images
You just need to adjust the width and height of your image to whatever size you desire!<img src="IMAGE URL" height="100" width="100">
Just change 100 to whatever number!
Making thumbnails
Here's a way to make thumbnails<a href="IMAGE URL"><Img src="IMAGE URL" width="100" height="100"></a>
Just change the width and height to whatever size you would like your thumbnail to be!
Labels: html, image codes, tutorial
posted by Del @ 6:05 AM
0 Comments
Hyperlinks
How to do text links:
<a href="YOUR ULR HERE"> THE TEXT YOU WOULD WANT TO APPEAR HERE </a>Example: <a href="http://www.angel-wings.co.nr/"> ANGEL WINGS </a>
and the example link above will look like this:
ANGEL WINGS
What if you want to put an image on your link
<a href="YOUR ULR HERE"><img border=0 src="YOUR IMAGE URL HERE"> </a>Example:<a href="http://www.neo-faeriewings.co.nr/"><img border=0 src="http://i90.photobucket.com/albums/k260/neofaeriewings/nfw3hi3.gif"> </a>
and the example link above will look like this:
How to send someone on a specific part of the page
If your page is so long that your visitor would have to scroll up and down a lot, no need to worry. You just have to provide them with a link that would take them on the specific part of your page or what we usually call an ANCHOR!To start of you would need to name the particular part of the page you want to direct your visitor to. In our example let's use the name HERE.
<a name="HERE"> THIS IS THE SPOT</a>
Then on the link you want your visitor to click to go to THIS IS THE SPOT add this code
<a href=#HERE> CLICK HERE TO GO TO THIS IS THE SPOT </a>
let's try our examlpe, click the link below
CLICK HERE TO GO TO THIS IS THE SPOT
What if you want to send your visitor to a specific part of a different page?
It's simple, all you have to do is name the particular part of the page this time let's use THERE<a name="THERE"> YOU'VE FOUND "THERE"</a>
Then on the link you want your visitors to click to go to "THERE" add this code:
<a href="PUT THE URL OF THE PAGE WHERE THERE IS#THERE"> CLICK HERE TO GO TO "THERE" </a>
Example:<a href="terms.html#THERE"> CLICK HERE TO GO TO "THERE" </a>
Now let's try our example. I want you to go where "THERE" is. Please click the link below to be transporated
CLICK HERE TO GO "THERE"
Please come back here afterwards.
E-mail Links
Here is the link for sending e-mails.<a href="mailto:YOUR E-MAIL ADDRESS">E-MAIL ME</a>
Example:<a href="mailto:angelwings_staff@yahoo.com">E-MAIL ME</a>
then the link would look like the one below
E-MAIL ME
|
THIS IS THE SPOT wasn't that fun? |
posted by Del @ 5:52 AM
0 Comments
Text Attributes
Changing Text sizes
<FONT SIZE="+3">This is +3</FONT>... which is the biggest<FONT SIZE="+1">This is +1</FONT>...which is slightly smaller
<FONT SIZE="-1">This is -1</FONT>... which is more smaller
<FONT SIZE="-6">This is -6</FONT>...and so on
You can also change the sizes of your HEADINGS by typing in these tags!
THE LARGEST SIZE
<h1>THE LARGEST SIZE</H1>Up to
THE SMALLEST SIZE
<h6>THE SMALLEST SIZE</H6>Changing Text colors
To change the colors of your font you must insert this tag:<font color=the hex color/color>your text</font>
Example:
<font color=#c060ff> c060ff</FONT>
or
<font color=red> red</FONT>
Changing Text font
To change the your fonts all you need to do is to put the following code:<font face="the font you want"> your text here </font>
Example:
<font face="arial"> your text here </font>
the result:
your text here
Using all the font attributes
Let's make the word "Neo-Faerie Wings" in bold, italic, size 4, color red, and in arial font!The code to make that happen is
<b><i><font color=red size=4 face="arial">Angel Wings</font></i></b>
The result:
Neo-Faerie Wings
posted by Del @ 5:50 AM
0 Comments
HTML Basics
Single Tags
Lines can be separated using the <br > tag. When you insert this tag at the end of a sentence, it starts the next sentence on the next line.Example:
This is line one. <br > And this is line two.
The result:
This is line one.
And this is line two.
If you want to SKIP a line you can use the <p > tag. This has the same use as the <br > tag only it skips a line and starts your sentence from there.
Example:
This is line one. <p > And this is line two.
The result:
This is line one.
And this is line two.
Simple TAGS
Here are a few simple tags you can use:To make your text bold:
<b>YOUR TEXT HERE!</b>
To make your text italic:
<i>YOUR TEXT HERE!</i>
To underline your text:
<u>YOUR TEXT HERE!</u>
To strike your text:
<s>YOUR TEXT HERE!</s>
To make your text look like that of a typewriter font
<tt>YOUR TEXT HERE!</tt>
If you would want to put a line across your page you can do so by puting this code:
<HR WIDTH=75%>
You just need to adjust the percentage to whatever length you would want your horizontal line to be. In this case I wanted it to be 75% of the width of the page it is contained.
posted by Del @ 5:47 AM
0 Comments
Coding a Full Page Neopets Guild Layout
Here is a step by step process in making a guild layout. The code I will provide can be used to make your own guild layout for PERSONAL USE ONLY. Meaning, you cannot use these codes on your redistributable guild layouts. Anyone caught doing this will be in violation of our terms. The codes have been edited to work on the new Neopets layout!
- Open your image editing software and create a 800x300 rectangle similar to the image below. Download the image below to use as a guide. Click on the image, right click and save to your computer.
The image above will be the header for your guild layout. Make your necessary designs on that image. Next we need to do the background. - Once you have made your header save it as .gif or .jpg. A little advice --- please refrain from saving your images as PNG as this image takes a longer time to load and has a larger file size compared to GIF and JPG. Now open your saved header and cut a little bit of the lower part of your header as shown below. I've cut mine with a height of 4 pixels.:
Now your background image should look similar to the one below:
Save the image above as your background. Now, close your header image. Be sure not to save your header this time because if you do, your header will be 4 pixels short than the original height of 300 pixels. - Now it's time to code your guild layout! First we need to place your guild layout's style sheet. Start your layout with this code: <style> //{}followed by the codes below:
Set your scroolbar colors. Copy and edit the hex colors to your prefrences. Congratulations! You just made your first fullpage guild layout. It's time to place your codes on your guild. Just click on Guild Layout=>Modify Guild Preferences=>then paste your codes on the welcome message! I hope this tutorial was helpful! :)
Now, set your link colors. Replace the hex colors with your preferences.
To set your font style edit this code:
To hide everything and to position the guild links properly put this code:
Now close your style sheet with the following code: </style>.
To set your background put this code and replace the "PUT BACKGROUND URL HERE" with your background url.
Then, place the following code to position your header image.
It's time to place your guild contents! Copy and paste the codes below:
By the way, there are times when your images don't appear on the layout. When one or two of the images don't appear (the header image and the background) just change their file names!
NOTE: This code is for your personal use only and is not meant to code your redistributable or pre-made graphics. And if you use this code a credit to neo-faerie wings must be visible on your layout. Any violation found will directly be placed on our WALL OF SHAME without warning!!!
Tutorial updated Aug. 5, 2010
Labels: coding, full page guild layout, neopets, tutorial
posted by Del @ 5:38 AM
0 Comments
May 13, 2010
Cutting Images in Paint.NET
For this tutorial, we will cut an image and get rid of its background. We will be using the image of Blake Lively below.
- Copy the image above and paste it on your canvas. Click on Edit=>paste in to new image.
- Now, get your line tool and choose a color that does not appear on the image you wish to cut. In this tutorial I used lime green.
- Create a new layer by clicking Layers=>Add new layer.
- Start drawing an outline on your image. Be sure you optimize the nodes by dragging them to the shape of the image. You don't have to use one single line to outline the image. You can use as many lines as you need just be sure they are all connected to each other.
- Once you have outlined the whole image like so:
Click on your magic wand tool then adjust your tolerance level same to mine or whatever your prefrences are. Then click inside your outline.
- Next, click on Edit=>Invert selection.
- Go to layer 1 where you have the image. Then press delete on your keyboard. Now you see, we have a transparent image.
To get rid of the green border, go to layer 2 where we drew the outline, then click Layers=>Delete layer. - To get softer edges, take your magic wand, adjust the tolerance level to 50% then click on the canvas background (the white and grey checks). Click on Effects=>Blurs=>Gausian Blur. Set it 2. Now, click on Edit=>Deselect. Do this as many times as you want until you are satisfied with the edges. You should have smooth edges now! :)
- This is how my image turned out after saving it as png.
Labels: cutting images, paint.net, tutorial
posted by Del @ 10:32 PM
0 Comments
Blending with Paint.NET
For this tutorial we will be blending these two images of Emma Watson!
- Open a new canvas. The size depends on your preferences, I made mine 500px by 300px.
- Now, copy any of the two images above or any image you prefer to blend, then paste it on your canvas by clicking Edit=>Paste in to new layer, if your image width or height is larger than the canvas a window will appear asking if you want to expand the canvas or keep canvas size. I prefer to keep the canvas size.
- Now once you have pasted your image drag it to the left side of the canvas.
- Do the same to the other image. You can have as many images to blend if you like. So I will paste the second image twice. This is how my canvas looks so far.
- Now choose your gradient tool and set it to transparency mode.
Now drag your mouse accross the canvas. Be sure you are on the layer you want to blend. In this case I am on layer 4 where my 3rd image (the flipped one) is. You drag your mouse from right to left or whichever way you prefer according to your own design preferences!
This is how my canvas looks so far:
Now do the same on the other images. Be sure to click on the layer you want to blend. Then just add some effects. This is how mine turned out:
Labels: blending, paint.net, tutorial
posted by Del @ 10:29 PM
0 Comments