Icon

Misc.

Hi there! Welcome!

I'm Jewlz, the owner and creator of Jewel, Bejeweled, Element...and several more sites. Over the years I have perfected my graphic talents more and more(I'm still learning!). Many people have asked me to share, and now I've finally had the time to create a tutorial site. Here at Bejeweled Tutorials, I make it easy for anyone to create beautiful graphics.

I take you through step by step with written instructions and screen caps so you can see what I am doing the whole way through. I use GIMP for all my graphic creations and Chrome for coding. You are more than welcome to try and follow along in Photoshop- to my understanding they are similar in most aspects.

Bejeweled Tutorials was created on July 28, 2014. The site was closed in 2015 and due to popular demand it was re-instated on July 17, 2016. Please let me know if I can add anything else to make it easier for you or that you would like to learn. Please note that this is an image heavy site, so some pages may take some time to load.

Please feel free to contact me about any suggestions, questions, or edits.

Updates

05.03.2018

01.18.2018

I had someone ask for some more button tutorials so I added 2 new ones. I made one for resizing and cropping and one for adding text to buttons. Hope you like them!

12.21.2017

Last update of the year! I had a bit of spare time so I did some extras for the site. I dont wanna call them tutorials, but it's extra info. You can learn about all the typefaces, image hosting, and in-browser editing. You'll find them all under the misc. tab. See you next year!

09.30.2017

07.31.2017

I made another new tutorial today. This one is for pentooling backgrounds. Hope you like it!

Please read the rules

01. Credit.

If you use any coding from this guide you MUST credit. If you are simply using the tutorials for graphics you do not have to link back, but it is appreciated. Credit is mandatory for BUTTON animation used.

02. Do Not Redistribute.

Please do not steal any part of my tutorials or coding and then claim them as your own whether for personal use or for creating a site.

03. Imagine.

You could follow these tutorials exactly as stated, but if you use some imagination you could come up with something MUCH more brilliant! Explore, experiment and have fun!

01. Creating the Layout

These screen caps have been re-sized. Drag and drop to the address bar to make larger.

02. content box

Now our background is all complete, we can move onto the content Box(s).

Depending on how you are doing your site navigation, there are two options ahead: Anchored or Linear.

03. anchored navigation

04. linear navigation

05. last things

06. coding your petpage layouts

First thing, you need to find a petpage you will be working on. the first page shows you all your pets with options to: EDIT, VIEW, and STATS. If you are unsure if there is coding on that page, select view first. If you are good to go, select EDIT. on the next page, I've taken a screenshot, you will likely have the default page coding in that box. Select all (CTRL A) the coding and delete it. That leaves us with a blank canvas to work with.

This is the page you want to be on when you are entering your petpage coding. That big box is obviously where your layout code would go. I will say this now-SAVE AND SAVE OFTEN. You never know if something will happen while coding, and TRUST ME, you do NOT want to start from scratch. Some explanation about this page: there are some tips at the top of the page if you wish to use any; there is also a link to the Neopets HTML guide which is a useful read to beginners(keep in mind that some of that guide is no longer usable); the RESET PAGE TO DEFAULT buttons will do just that. They will erase ANY coding you have in there, so be sure to not accidentally click one; the preview button is the one you will be using alot. It opens a new page showing you what you have created in your coding thus far. It is also the page where you would save your work. So- Let's get started!

First thing: Style tags. Anything that goes into style tags designs how the layout will look in CSS. Everything from where your textarea box is placed to what links do when you hover. So we always start with these.

Next we will want to remove all default settings that neopets provides including the neopets top nav bar. This sets up a good empty base for us. Note that when you remove the neopets copyright, you should add it somewhere in your new layout. Under the sitely/credit section is always best.

This next section deals with the background. The image URL is your background image link. The attachment can be FIXED or ABSOLUTE. Fixed means the image will NOT scroll, absolute will. Repeat is whether you want the image to repeat or not. You can have different types of repeat: repeat-y(repeat down), repeat-x(repeat across), and repeat(all directions). We have made our image large enough that we do not need any repeat. Position just helps position the image. We don't want any gaps around the borders. If you would prefer to have just a plain color background then use the second textarea box coding.

And here is our content div. #CONTENT is the overall box where the divs fit in. It controls the height, width, background, and more importantly-the location. #SCROLL will help the divs when it comes to proper scrolling. LEFT & TOP are your positioning coordinates-This is exactly where the TOP LEFT corner of your div box will be. Background is just that. It can be a color, transparent, or an image URL. Since we did our content box within the layout, ours is transparent. WIDTH & HEIGHT-obvious- how wide and tall the content box is. TEXT-ALIGN- How you text is laid out within the content box. It can be left, right, center, or justify. OVERFLOW is excess text. So when your text goes over the specified height of the box, it turns into overflow. Making it hidden, hides it within our boundaries. MARGIN is how much space is between the divs. We want to create a "cushion" so that you can see the top/bottom of other divs when switching pages or scrolling. Having the SCROLL overflow as AUTO means that our page will automatically scroll when it reaches the specified height. PADDING is our cushion between the div border and our text. This way the text doesn't look too squished. The top textarea box is for normal scrolling with visible scroll bar. The second textarea box is if you would like hidden scrolling. The numbers will have to be adjusted to match your layout however.

The images below show you how to get the coordinates for the content box.

If you are doing an anchored layout you will need a menu. Again, it has alot of the same things as our content box; top, left, height, width, background, overflow. PADDING is some space between the menu border and the links. DISPLAY is how our links will look. There are different types of display: normal, inline-block(blocks stacked side by side), and block(stacked on top of eachother). You find your positioning and width & height for the menu box the same as as you got your content box.

If you are doing a linear layout, you will need to create an image map. An image map creates another image ON TOP of your background with "built-in" links. The images below show you how to gather your coordinates for each link. They go in the order of top left, bottom right for each link. Your image background url would replace the url in the "map" section.

All the major coding is done for now. The next section is for styling the menu and textbox areas.

07. styling your layout

Your text. The MOST important part of styling your layout. You want to choose a main color from your image that will show up against the background. OR. Using basic shades from white-black such as #fff, #aaa, #555, #000. TEXT-DECORATION will change if you want any underline, overline, line-through, or the default, none. Since this is our main text, we want none. COLOR is the color of the text. FONT is the size and style. I suggest a size between 8-12pt depending on the font type. Your basic font types that almost every computer has are: Arial, Century Gothic, Comic Sans MS, Consolas, Courier, Georgia, Impact, Lucida, Monospace, Tahoma, Times, and Verdana. TEXT-TRANSFORM applies to lowercase or UPPERCASE. None means, its normal just like how mine is styled. LINE-HEIGHT is the height of your sentence. The higher the number, the larger the space vertically between sentences. To give a "good" amount of space I usually suggest 2px above your font size. PADDING will help if your text seems TOO close to the edges of your content box or scroll bar.

Headers. You can find several other tutorials and examples of headers on other sites. I will just show an explained example. I usually play around with them until I like them. This can take time to know what kinds of style options and fonts look good. For petpages, I like to make at least 2 headers, but no more than 5(unless your page needs them). The first one is usually larger and is your welcome banner essentially. Don't make it too big though or it will distract from either your layout or the main text. The second header is used for other sections of your textbox such as updates, shout-outs, credit, ect.. If you want more headers, you would simply make another section and label them h2, h3, h4... Again, we have the font to design the header. You can apply a text-transform if you wish. FONT-STYLE is specific to italic font. Having a width in there makes sure your header will automatically lengthen to the paragraph width. LETTER-SPACING can be used to increase or decrease the space between letters. BACKGROUND can either be a color, image URL or transparent. HEIGHT is how high you'd like your header to be. TEXT-ALIGN again, positions the header text. You can also add other things like underlines, borders, multiple colors/sizes. Headers are tough at first but very fun to design.

Next is link design. This is just for normal links in the textbox, not the menu. Again, you can do tons of different kinds of styling for your links. Be sure when coloring that you can see the links against the background. Also- I suggest to keep the sizing/font between normal and hover the same so that the text doesn't jump when hovered over.

Now we can do the menu link design. Easy trick to help you remember which class goes with what. Because I named the menu "menu", I use the class ".men" to match. So if you changed the menu name to "cheese" it's wise to match it with ".cheese". Get it? In our menu, we are going to apply the brown box we made in GIMP earlier to be our background when hovered. When making your menu links, be sure that they stand out enough against the background, but at the same time, don't take focus away. Be sure your colors stay within the color scheme as well. You can change your styling around to make the links unique when hovered as well to give the page some extra flare. If you are making a linear layout-this menu doesn't apply to that- Skip this.

And lastly we can do the Bold and italic design if needed/wanted. I think it's a staple to petpages to help break up the text a bit. You can make all sorts of styles for these. Especially in the sense that they do not need to be specifically bold or italic.

layout coloring

The images below show you how to choose colors that accentuate your layout and apply them to your layout.

08. placing the div boxes

That is it for the style tags, go ahead and close them. Your layout has been designed, now to put it on the layout and fill with text.

We start with the menu. When creating links for the menu, remember we need to keep that "men" class we designed earlier. Otherwise it will just keep the normal link design. We are making the menu position fixed so that it doesn't move with any scrolling.

Then add the content div, followed by your page divs. keep them in order to make things easier. I've only put page one and two up to save coding room. To add your other pages simply copy and paste the first div and then rename to page3/4/5. Be sure to close all the div brackets. Have fun styling the rest of your layout and putting it together. It is a lengthy process but worth it in the end!

you are all done! congrats! thanks for using my tutorial. please be sure to link back and credit if you used any of my coding. thanks again!

01. creating a scrolling layout

Okay, so this tutorial will show you how to make a scrolling layout. It is very similar to the anchored layout. I will only be demonstrating using a CSS design, but you can easily apply this to a graphic based one. I will be using my bulk biceps layout from Element as our final product.

First, you want to get an idea of how your layout will look. Will your text be on the left or right, will you have navigation, will you have inner page anchors, color scheme...ect. For Bulk Biceps, I based my color scheme off of this PNG image. I also decided that I wanted to do a contrast to Biceps by using tiny scale font and imagery. But first things: start with your background. I am continuing hoping yours is already good to go.

This is the image I've based my whole layout around. I chose the layout style and colors from here. The blues, greys and browns were all pulled from this PNG. You should do the same with your image.

Everything starts by putting in ＜style＞＜/style＞ tags for layout design. For my CSS design, I do not have an image URL. I am using just color. If you have an image URL put it in like this: background: URL("imageurlhere") left top no-repeat;. Left and top position your image. If you are using a tiled background, use repeat instead.
The table,table img, and .sf hide all the neopets logos.

Next is your content box. If you have a background image, you would place your content box in the space your reserved. You would also match your contents width settings. For this CSS base, I simply decided to have mine off-center and on the small side.
You can name your textbox whatever you like, I usually do #content to make things simpler and easy. left and top are your positioning. This means my content box is 600px from the left and 130px from the top.

Since I am using CSS, my background is set to white(#fff).
If you made an image, you set yours to transparent or none. OR if you are adding a background URL you would enter it like displayed earlier, but without the positioning and repeat.
Width is obvious: I made mine small. If you are using a background, (in GIMP) use your rectangle select tool and click and drag on the inside of the content area to get your width. It will display how wide your selection is in the bottom left corner beside your zoom options.

Height is how high our content area is. Since we are doing continuous scrolling, we are setting our height to auto. Padding creates some space between our content border and the text. It is completely optional. You may keep it or even make it larger. Margin-bottom is the space between the bottom of our content box and the bottom of the page. This is also completely optional. You can make it bigger or smaller.I wanted mine to scroll up a bit so you could see the bottom.The rest is just styling. Text align sets how you would like your text to display. And border sets a border should you want one.

Next is your navigation, if you are going to have one. If not, just skip this section. I always name my navigation #menu, but you can change yours to whatever.For mine, I wanted extremely simple.
This only changes the div ID of the menu however, and not the links themselves. That part is coming. So again, left and top are your menu positions. Text align is how you would the links to align.
Height and Width: It is always good to adjust a height.

If you are doing side by side(like my navigation), I chose a height the same as my link height. If you are doing a block navigation(stacked links), use a larger height(It would be the line height of your links X however many links you have-just to get an idea. For example if your link height was 20px and you have 5 links in your menu, your #menu height would have to be at least 100px).
Width is also important in the same manner as height. For mine, I chose auto since my links themselves have specific width sizes. Overflow:hidden hides any excess content from showing.
I have a z-index on mine so that it is on the same 'layer' as my content and not above/below. You do not need to have this. However, if you are doing a top-navigation and want your text to scroll underneath it, your z-index would need to be at least 2 or higher.
Background, again, if you desire one. I have a transparent background.

You can design these in numerous ways. You do not need to have these either. Completely optional.
However, if you choose to not self-design them and your use the styling, they will use your normal text styling and add the default look of bold and italic.
I'm not explaining each aspect of my styling. You can look and figure out for yourself as it is not too complicated.

Next up is your navigation link styling. I always match my link class to whatever I named my div. So, since my navigation was named 'menu' my links are named a.men.

Display is how your links align with each other. Mine are inline-block since I want them to stay side by side. If you are stacking your links like bricks, then you would want just 'block'.
Remember how I said I had specific widths for my menu links? Here is where I put it. Each of my menu links are set to be 185px. If you put auto, they would be as long/short as whatever you type in as your word link.
I set my line height to 20px, this is how tall your link will be. Everything else is just styling.

Next is header styling. You can have as many headers as you would like. Or you can have none, it's your choice.

I made two headers for this layout.
Header one, I have created a special class(.bulk) so there is a bold section of font. You do not need to do this, I just wanted a fancier header.
Again, I'm not explaining how to make these, they are pretty simple to figure out.

If you wanted to design anything else such as a title, textarea boxes, list styles... they would go in after headers. That's it for layout styling so you can close the style tags. We're moving into content

If you have a site title, like mine, you would place that in first. Otherwise, First we start by putting in our menu.. My menu is moving with my text, so it's position is absolute. If you want it to stay still, put fixed.
I only have 2 links, you may have more. My links are also designed to go out of page, and they are not page anchors.
If you want to link to a certain section of your content simply use #anchors. For example, your top intro could be named #home, and your credit section #css.
Whatever you name your anchor is what you would refer to and link later when adding your content.

Next up is placing your content box. Since my content box moves up and down, I have absolute for positioning. If you don't want it to move, choose fixed.

Remember those anchors from our menu? #home, #css... You would place them in above the section they are titled for. See how my a name=home is above my headers in the intro section? That's how you place them. So for the sitely section, I would place them above the sitely header saying a name=css.
Then you can type to your hearts content! The more you type, your page will keep scrolling.

You are all done! Remember to link back please!

Wait.... there's more? YEP! If you wanted to have separate scrolling sections you could do that as well.

You would simply have a content box for each section.
This will create a stacking effect. If you want space between them, add in a margin-bottom: 00px; to your #content styling(like mine already has).

NOW That's it! THANKS FOR USING THIS TUTORIAL. Please remember to link back if you used any coding. Hope you find it useful! ^.^

01. Creating the Layout

These screen caps have been re-sized. Drag and drop to the address bar to make larger.

02. sidebar

If you are creating a layout with a guild sidebar continue with this section. If you aren't wanting a sidebar skip to the next section.

03. guild layout without sidebar

04. guild icon creation

** PLEASE NOTE ** Guild icons are currently not working. you can still make one and use it within the layout however if you choose.

05. coding your guild layout

This is the page you want to be on when you are entering your guild coding. That big box is obviously where your layout code would go. The color scheme options underneath change the way your guild forum will look inside. You can play around with those colors yourself to see what is what.

First thing: Style tags. Anything that goes into style tags designs how the layout will look in CSS. Everything from where your textarea box is placed to what links do when you hover. So we always start with these.

Next we will want to remove all default settings that neopets provides including the welcome message, icon, guild description, ect. This sets up a good empty base for us.

This next section deals with the sidebar. I will show you later how to adjust with the setting of this to either move it or remove it. For now we will keep it.

Now you can style your sidebar with colors, font, size.

If you are keeping your sidebar you will need to add this. This is what you use to stylize the sidebar font.

To figure out the placement and width of the sidebar see the images below. Whatever the width of the sidebar equals, you would enter it under the table table table table section. When you figure out the coordinates of the top left corner, you will enter the left amount under margin-left and the top under margin-top.

Okay, so all the sidebar and default guild settings have been removed/altered. We can proceed to our layout. We start with our background.

Then we add our textbox. This designs the font in the textbox and the position of where it is on the layout. The images below show you how to get the coordinates for the textbox.

If you are using a sidebar, most people like to have links to around the guild such as the webbie and portal. If you choose to have these extra links you will need a menu.

If you are not using a sidebar, we will be image mapping the layout. Start by removing the sidebar. This section would replace any of the table table table table sections within the style tags.

This is your image map code. It goes above your textbox section with the other div sections. The images below show you how to gather your coordinates for each link. They go in the order of top left,bottom right for each link. Your image background url would replace the url in the "map" section.

All the major coding is done for now. The next section is for styling the menu and textbox areas.

06. styling your layout

Headers. You can find several other tutorials and examples of headers on other sites or you can visit Here for css snippets. I will just show an example. I usually play around with them until I like them. This can take time to know what kinds of style options and fonts look good. Typically, I use two headers for guild layouts. The first one is usually larger and is your welcome banner essentially. Don't make it too big though or it will distract from either your layout or the main text. The second header is used for other sections of your textbox such as updates, shout-outs, credit, ect.. If you want more headers, you would simply make another section and label them h2, h3, h4...

Next is link design. This is just for normal links in the textbox, not the menu.

Now we can do the menu link design. Easy trick to help you remember which class goes with what. Because I named the menu "menu", I use the class ".men" to match. So if you changed the menu name to "cheese" it's wise to match it with ".cheese". Get it?

And lastly we can do the Bold and italic design if needed/wanted.

Layout coloring

The images below show you how to choose colors that accentuate your layout and apply them to your layout.

07. placing the div boxes

That is it for the style tags. Your layout has been designed, now to put it on the layout and fill with text.

We start with the menu. When creating links for the menu, remember we need to keep that "men" class. Otherwise it will just keep the normal link design.

Then add the textbox and fill in your guild message. Now guild layouts do have a letter limit of 5000. Be sure to keep your coding short otherwise the whole layout won't work. The best is to use short links /~likethis and keep you guild messages on the shorter side. This is just a basic textbox, you can design it to look however you want.

you are all done! congrats! thanks for using my tutorial.

GIF Image Animation

Here are some examples of buttons I have made using GIF images. They can be lengthy to make, but very easy! Plus you get a great animation!

These screen caps have been re-sized. Drag and drop to the address bar to make larger.

The completed button:

Thanks for following this Tutorial!

Image Pan Animations

Pan animations are a great way to get more of an image into a tiny graphic. Although-they are time consuming and a small mistake can hinder your work.
Here are some pan animations I have done:

Here are the examples of the types of pan animation I will be demonstrating today. They go in order from easy to difficult both in button and tutorial.

These screen caps have been re-sized. Drag and drop to the address bar to make larger.

Regular Pan Animation with Visible Text

This is what the final result looks like:

Pan Animation with Visible Text + Sparkle Animation

This is what the final result looks like:

pan animation with visible text + shine animation

This is what the final result looks like:

pan animation with text fade in/out

This is what the final result looks like:

Thanks for following this Tutorial!

Slow Text Fill Animation

Here are examples of the slow fill animation I will be demonstrating today.

These screen caps have been re-sized. Drag and drop to the address bar to make larger.

This is what the final result looks like:

Thanks for following this Tutorial!

Shine Animation

Here are examples of the shine animation I will be demonstrating today.

These screen caps have been re-sized. Drag and drop to the address bar to make larger.

This is what the final result looks like:

Thanks for following this Tutorial!

Text Pan Animation

Here are examples of the text pan animation I will be demonstrating today.

These screen caps have been re-sized. Drag and drop to the address bar to make larger.

This is what the final result looks like:

Thanks for following this Tutorial!

Text Jump Animation

Here are examples of the text jump animation I will be demonstrating today.

These screen caps have been re-sized. Drag and drop to the address bar to make larger.

This is what the final result looks like:

Thanks for following this Tutorial!

Text Vanish Animation

Here are examples of the text vanish animation I will be demonstrating today.

There are 2 methods to doing this animation. Here are the examples of both:

These screen caps have been re-sized. Drag and drop to the address bar to make larger.

method one

This is what the final result looks like:

method two

This is what the final result looks like:

Thanks for following this Tutorial!

Moving Dot Pattern Animation

Here are examples of the dot pattern animation I will be demonstrating today.

These screen caps have been re-sized. Drag and drop to the address bar to make larger.

This is what the final result looks like:

Thanks for following this Tutorial!

Firework Animation

Here are examples of the firework animation I will be demonstrating today.

These screen caps have been re-sized. Drag and drop to the address bar to make larger.

This is what the final result looks like:

Thanks for following this Tutorial!

Pixel Hearts Animation

Here are examples of the hearts animation I will be demonstrating today.

These screen caps have been re-sized. Drag and drop to the address bar to make larger.

This is what the final result looks like:

Thanks for following this Tutorial!

Old School Animation

Here are examples of the old school animation I will be demonstrating today.

These screen caps have been re-sized. Drag and drop to the address bar to make larger.

This is what the final result looks like:

Thanks for following this Tutorial!

Text Glow Animation

Here are examples of the text glow animation I will be demonstrating today.

There are 3 different ways to animate using text glow. Here is what I'll be guiding you through:

These screen caps have been re-sized. Drag and drop to the address bar to make larger.

method one

This is what the final result looks like:

method two

This is what the final result looks like:

method three

This is what the final result looks like:

Thanks for following this Tutorial!

DO NOT REMOVE /* SCREENSHOT IMAGE RESIZER

Useful and Favorite Sites!

I've been doing graphics for years now and I've compliled quite the list of my favorite sites as well as the most useful. I'm not listing EVERY one. But, the one's I have listed here are fantastic for anyone looking to code or make graphics.

favorites

useful

Image Mapping

Image mapping can be done on small images within a layout such as mall banners or even backgrounds like many guild layouts nowadays.
For the purpose of this tutorial I will be doing mine on a small image.

When doing an image map you can use 3 different shapes: rectangle, circle and polygon. Depending on your image, you can choose what shape would work best. In most cases, rectangle is used the most. Once you've decided on shape you can move onto mapping your image.

this is the image I'm using

I'm displaying my mapping process in GIMP, but you can do it in Photoshop and even MS Paint.

For your coordinates, you're going to want them written in a left-right fashion.
rectangle: x1,y1,x2,y2 (top left & bottom right point) | area shape="rectcircle: x,y,r (center of circle and radius) | area shape="circlepolygon: x1,y1,x2,y2,x3,y3,x4,y4,x5,y5... (every point of polygon) | area shape="poly.

The map css is basically the same for all. The img URL is where you would place in your image. usemap is the title you can give your map. I usually just name mine 'map'.
This first textarea box is for if you are having a small image, not a background. This map is set for all the shapes, area shape.
coords are your coordinates you just figured out followed by the link address for each.

Now, if your using your image map as a background, it needs just a bit extra coding. You shouldn't have to change or edit any of the additional coding.
It simply positions your image and makes sure it fits to screen. The only extra thing you should do, is make sure your pages body background is the same image URL as your image map.

That's it, your image map is complete.

Texture Tutorial

Alright!! Textures! Everyone's favorite thing to do. Okay well most people hate this part, but once you know what you're doing, it's pretty fun and easy.

For all my graphics, I tend to not overdo the textures. Infact, most of the time they are subtle and you would barely be able to tell they are there. But here is a side by side comparison of some of my recent work:

You should be able to see the difference between the two images. I opted for a 'filtered light/vintage' type feel for my textures.
I also wanted to add something 'extra', so I put in some PNGs of Garin from Details. Now, looking at this image, how many textures can you pick out? 3....4?... I have 6 textures(technically 7) on this image.
But before we get to textures, Lets figure out the image.

I started with the 1024x768 image from neopets and enlarged it a bit. I then sharpened the image and then duplicated it.
I flipped the image both horizontal and vertical to make it at least 2000x1000px. Now back to the texture bit.
I next duplicate the image, set the layer mode to soft light, and Gaussian blur at around 10.
(This is a technique I got from Cam at Someday in Ecstasy. What I did next was place in my PNGS.
I deleted any excess so my large Garin was in the front and the pngs in the background. I'm skipping what I did exactly with the PNGs.

I wanted the PNGs to have some light surrounding them at the base to make the 'glow' and add some 'fireflies'.
So I used this texture from Details.
The actual firework part of this texture is small, so I centered the firework around each png. Each of these texture layers is set to 'lighten only'.
I also went through my eraser and deleted the 'stringy lights' and some of the fireworks so it doesn't overpower the PNGs.
This is what my layout looks like now.

Then I wanted some more 'fireflies' around my big Garin. So I added this texture from Details.
This layer is also set to 'lighten only', and I went through with my eraser and deleted some parts. So here is the image now.

Next up is bringing some warmth by using this bokkeh texture from Details.
For this texture, I've set the mode to screen and used my eraser tool to delete parts of the texture.
I've also Gaussian blurred this texture a little to soften it. So here is my layout image now.

That's it for the small textures in around our focal point. Now I'm moving to large textures for the whole image.
When choosing textures for your whole image, it's usually best to stay within the same color scheme. My layout color scheme is mostly blue, grey and brown.
Those are the colors I stuck with for my textures. I'm using these textures from Sosudude, they are 2000x1000px, so they are the perfect size for full layouts.

I layered these in this order(light blue on bottom, dark brown on top). I started with the brown layers first. I made both modes 'soft light'. Here is what my image looks like with brown texture layers.

Now, I'm going to work on the blue texture layer. This layer is set to 'lighten only' with an opacity of 38%. This is what gives my layout a lightened/vintage type look. I also used my eraser tool to delete a few spots here and there. This is the layer in full opacity.

FINAL IMAGE

testing textures out

So lets try some different textures out on this image

Now looking at this image the colors are fairly cool: blues, greys, pinks, purples. Those are the color textures that would work best. All the textures I'll demonstrate with are from details.
Okay so going off those colors, here are some textures that would work:

Okay so I did each of these textures in a 'soft light'.

Between these 3, I think the first one looks best if you only wanted one texture layer. Looking at them all though, I find the 'texture' a bit harsh. So I like Gaussian blurring textures like this to soften lines. I did a blur of 10 on the images. Can you see the difference?

Now lets blend 2 of these layers together to see what we get! I'm going to put both the pink and the purple textures together.

See how bright and vibrant it is now?! I took my eraser tool and deleted some parts to balance colors. Well we could stop here, I think it looks nice. But lets add some light bokeh textures! I'm going to add this blue one. These types of textures typically look best in 'lighten only' or 'screen'. I'm going to use screen. So the image on the left is when it is just normal 'screen'. The one on the right is when I've blurred it 5px and erased some parts.

I think that is a good place to stop. Any more and you would overwhelm the image.

various textures

Lets take a look at some texture types/colors for this image:

texture

mode

extras

result

soft light

none

soft light

none

screen

Gaussian blur 10
erased some parts

soft light

Gaussian blur 5

screen

erased some parts

screen

Gaussian blur 10
erased some parts

soft light

none

See how some textures look better than others? The ones that look good, you can stack on top of each other to make the image better. Just remember to try not to overdo it. Here's my general guide:

buttons: 1-3 textures

icons/banners: 2-4 textures

layout images: 3-8 textures

Try to keep to the same color scheme(I mean look at that green texture, It looks horrid). Play around with the settings of each texture to see what you can some up with. You don't have to do EXACTLY what I do. That's my personal style. But at least you have a general understanding now of how certain textures ill looks and what mode they look best on.
Hopefully this guide helped you a bit!

LOOKING FOR SOME TEXTURES?

Check out The Popsicle Stand. You can also find several sites if you search 'textures' / 'graphic textures' / 'textures for GIMP and PS' on the interwebs.
When you find a texture you like you can save the image to your computer OR drag and drop into your editing program.

want more tutorials on textures?

how to make BUTTON BORDERS.

Yo! So, you are wondering how to make or apply borders to a button? Well this is the place to learn. You can actually use this technique on icons and banners too, to a certain extent.

There are 2 ways to do button borders.
one: You make the border yourself by deleting parts of the background image. OR.
two: Use a premade border image as a guideline.

Either way is good and you end up with the same result. More experienced button makers usually just make thier own borders since they know how they should look/be deisgined. One isue with using the the premaed base, is that only a few sites offer these premade border bases for use. Some sites require use with permission, or credit for some of thier borders.

If you are looking for premade border bases try Here, or I have some at the bottom of this tutorial. If you are looking for premade button backround bases try Here, or I have some at the bottom of this tutorial.

the basic routine

Step one. Select your button image, resize and have ready to go. For the sake of speeding things up a tad, I'm using one of my premade bases.

Let's get some font set up in here so we know where to place our border. Text comes first. Your button text is more important than the border, so make sure it is visible and in a clean spot. Typically, you want at least 3-4 px of space around the whole border from your font. This makes sure that your font isn't touching the border. I'n some buttons cases, you can put the font right next to the border, but it's rare. If you are just starting out, try to keep the 3-4 pixel rule in play.

For this, there no fancy text or texture layers. Your border layers would go at the very top
of your layers list. Let's start off easy and make just a plain rectangle border.
Start by making a new transparent layer. Go to LAYER → NEW LAYER → TRANSPARENT.

Duplicate this new layer so there are 2 transparent layers. Toggle the top layer. Then go to SELECT → ALL. SELECT → BORDER → 1px.

This is how it should look right now:

Now, take the BUCKET FILL TOOL and fill the selection with BLACK.

Now its time to expand out selection. Go to SELECT → GROW → 1px.

Toggle the second transparent layer and FILL with WHITE. Here is what it should look like now.

Turn both of the border layers MODE to SOFT LIGHT.

Here it what it should look like now.

You can zoom out to see how your whole button looks like now.

You may feel it's complete. Here is what this button looks like so far. You can see there is a border, but just barely. If you'd like a more prominent border you can continue on with the next step, or call it here. It depends on the button.

adding a tad more oomph

We're just picking up right where we left off. To add a bit more border promince, simply duplicate the BLACK BORDER layer. Then move it underneath the WHOTE border layer. Your layer stack should be: black border, white border, black border.

Depending on your button colors, you may want to adjust the OPACITY % on the BOTTOM BLACK BORDER. Typically, if your button has lighter colors, you want the second black layer to be a bit lighter.

Now here is what the button looks like with the second black layer.

A bit more noticeable hey? Here is what they look like side by side.

designing your own border

In my opinion, designing your own border is the best. It gives you experience and you can design some funky designs this way. We're starting from step one again, but basically doing the same routine.

What to do is simple, take your eraser tool, have it on 1 px, HARD EDGE. Now on your very bottom layer, your background image, delete pixels to create your border. I opted to do a squared out border.

Once you are done your border we're going to clear the rest of your layers to match. Start by choosing ALPHA TO SELECTION. Go to SELECT → INVERT. Now go through all your other layers and hit DELETE. When your done, go back to your background layer and do ALPHA TO SELECTION again.

Create two new transparent layers. Go to SELECT → BORDER → 1px.

Same thing as before. Fill the top layer with BLACK. Go to SELECT → GROW → 1px. Fill the second layer with WHITE. Here is what it should look like.

Now clean up your border layers and clear the excess. It should now look like this.

Turn both layers modes to SOFT LIGHT. If you want to to the duplicate black border layer you can. Here is what it looks like with just one.

Here is what the finished buttons look like. The one on the left has 1 black border, the one on the right has 2.

using premade borders

Okay so for most premade borders they come in black and white. The black would obviously represent what your border design looks like. Some borders can be very intricate. Just remember that some borders don't work on every button. You don't want it to be too distracting, cut off the image or text, or not fit the button design overall. For example, if I'm doing a scary, evil looking dark button, I probably wont choose a cloudy or bubbled frame. I'll walk you through my example here.

So I thought I'd try these border designs out

So what you wanna do is either COPY AND PASTE or save the image to your computer then click and drag into GIMP. Let's start with the first.

I've zoomed in so I can see my button better. To see how this border will look with your button, you can change the image OPACITY % to a lower number.

Now that we can see, this is not a great fit for our current button. Too much of the main focal image gets cut off for my liking.

So I decided to try this one instead.

This border fits much better.

Now what you want to do is make the OPACITY 100% again. On the border image, take your FUZZY SELECT TOOL and select each section of excess white background and DELETE it.

Your's should look like mine. You should currently be able to see your button image peeking through under the border. Now we're going to get rid of it. On the button border layer, select ALPHA TO SELECTION.

Now go to SELECT → INVERT. Hide the button border layer so you can see.

Go through all your other layers and hit DELETE. This will clear all the excess border. Now we go through the routine again. First clear your current selection by going SELECT → NONE.

Make 2 new transparent layers. On the bottom background layer, choose ALPHA TO SELECTION. Go back to the top 2 layers and fill accordingly. Your button should look like this now.

You can use the the copied border image as a guidline for your black border. Crop your black border. Mine looks like this now.

Now clear all the excess white borders.

Set both the border layers to SOFT LIGHT. You may duplicate the black layer like earlier. You can delete the premade border image. This is how it looks now.

Here is the completed button. The 1 on the left has one black border, the right has 2.

some premades

button borders

button bases

These are some of the Bedazzled collection. Use does not require credit.

how to make a PENTOOL BACKGROUND.

Welcome to the pentooling background tutorial. You can do this technique for many graphics, not just for layout backgrounds. Before you start, you'll want to pick out a PNG image. You can find a listing of sites that have them on The popsicle stand. Or some of my favorite sites are Details, Aroma, Crater, and Loveable. Below are some examples of pentooling I have done.

These screen caps have been re-sized. Drag and drop to the address bar to make larger.

This is what the final result looks like:

Thanks for following this Tutorial!

typeface chart aka. font faces

I thought I would put up a functioning typeface chart of all the fonts you can use on Neopets.
Some of these, you may have to download for them to work. Easiest way to tell is if it looks
like a general font, you don't have it. Some of these only work on certain browsers as well.

image hosting sites

I get alot of people asking me what sites I use for all my image hosting. I use two hosts each have different purposes(to me).
I highly suggest IMGUR and DA. Its simple, easy to use, and doesn't distort your uploads. You need to make accounts
to join, but don't worry it's free. I have several accounts on IMGUR simply because I have so much I need to upload, but one account would do most people
just fine.

These sites can also be used, but I do not suggest them unless it is for temporary image hosting. These sites can distort your
uploaded images if not done correctly. These sites also hit an overage cap. So after a few months, your images will be deleted
and you will no longer have access. Then you will have to re-upload all your images again.

Here is what your uploaded image will look like once the site has reached its cap. It will ask you to pay money
to get your images back, oor you have to re-upload them all again.

in-browser html editing

If you want to save some time and do your whole layout edits in an in-browser editor, it helps ALOT!
I use 2 different editors, Scratchpad and HTML instant. So instead of doing your edits on Neopets going back and forth
from the preview changes button all the time, these changes are put in the moment you make them.
You can interactively build your whole code from scratch seeing it change and grow as you type. Between the two,
I use scratchpad the most, but I'll go over so pros and cons below.

As an extra note, these are free to use and more classed as browser extensions than websites.

scratchpad

So, like I said, I use this one the most. I find it a tad more easier and streamlined to work with.

some pros:

super streamlined design and easy to use.

when using carrot tags, it automatically does the closing set as well.

when you have made an error somewhere in your css/html it will change color in the section from red to green. This makes
it much easier to find where it went wrong.

It works well for any kind of layout: anchored/scrolling/marginalized.

it saves your work as a special page. For example, in the screenshot I have, the layout is called sweltering-cave-4212.
You can type that into your address bar to come back to that exact layout. Or even if you close your browser/restart your computer, it will all be there like before when you re-open.

you can hide sections of your coding. So if you have some huge sections that you dont want to scroll through or accidentaly edit, you can
go to the top of that div section, and to the left by the numbers there will be a tiny grey arrow. Click on that and the section will condense.

some cons:

the biggest one: it does NOT display multi-anchored pages. For example, when I put in Bejeweled Tutorials layout code,
All I see is the large full scale navigation menu. If I click any links, it does not take you to sub-pages. I get around this by editing page by page. I move the
page I need to work on up to the top of the Div set, then move it back when I'm done.

html instant

There isn't anything necessarily wrong with this one, I just prefer the other. This one has nifty little shortcuts on the slide bar,
but I tend to hit them accidentally and then get angry... Just stuff. But I'll go over some pros and cons with this one too.

some pros:

This one DOES work on multi anchored pages. So you can view hidden submenus and sub pages.

has nifty middle links on the slidebar that expands your frame to the left right and default.

easy to use.

some cons:

I don't find this one as streamlined. It could just be me though.

to my memory, I don't believe this one saves your work. So if you accidentally closed your browser, you would likely lose your work.

This one does not automatically make the closing carrot tags.

you cannot condense your coding like in the other.

button and icon resizing & cropping

These screen caps have been re-sized. Drag and drop to the address bar to make larger.

image cropping

So for image cropping what I like to do is take my large image and see what focal points I can make out of it. In the image I chose, there are several focals you can use for making both icons and buttons. I've gone ahead and marked a bunch on the picture below.

The thicker bordered ones are more for buttons, and the thin lined boxes are for icons.
So with that in mind, you can choose a focal point. Next, rather than highlighting, cutting and pasting into a new image-- I like to resize my image down and move it around till I find those points. So using the resizing demo from earlier, you would scale the image and then move it around until you find the focus you want. If you find that too complicated, you can select the area of focus you want (like I highlighted) then cut and paste into a new image. Be sure the new image size is 88x31 for buttons and 100x100 for icons. You can then resize in your smaller image.

Here are what some of the outcrops look like that I did.

Thanks for following this Tutorial!

adding text to buttons

talking about fonts

These screen caps have been re-sized. Drag and drop to the address bar to make larger.

So when your adding text to buttons you usually start with the type of font. After that you do colors then add extra features to make the text stand out and blend into your image. It's all about a good balance.

So I'll start by explaining some fonts. The first is pixel fonts. These are THE BEST universal fonts. They can be used on almost every button. When you use these fonts they should be size 8 and always capitalized. Otherwise it just doesn't look good and is difficult to read. See below.

Another popular font type is script fonts. You want to be careful with these fonts as they usually need a large font size so they take up more space on your button. These fonts also tend to have skinnier font lines. On buttons, they can be difficult to see. For example, the first three fonts below are quite difficult to read even on a plain background. The next three are much better and would likely transfer to a real button much better. Make sure these fonts are large enough to read and legible while not distracting from the image.

So let's see what some of these fonts look like on an actual button.
See how the first two are barely legible? Not a good choice for fonts.

Here are some examples of buttons that I have personally done with the different kinds of fonts.

These are pixel type fonts

These are script type fonts.

And here are mixes of the two types.

trying a pixel font

the steps

Here are all the steps I took with the button from start to finish.

trying a script font

the steps

Here are all the steps I took with the button from start to finish.

making a background advanced.

Welcome to the advanced background tutorial. This is just demonstrating my current
layout making styles and dealing with darker layouts. You can use this tutorial for plain background
images, or backgrounds that include PNG images. This layout design is meant for an anchored layout
and has both background image and PNG focal image being used. I don't explain every step in this
tutorial so you need to have a basic understanding of GIMP to proceed.

These screen caps have been re-sized. Drag and drop to the address bar to make larger.

This is what the final result looks like:

Thanks for following this Tutorial!

making a textured PNG background.

Welcome to the textured PNG background tutorial. This tutorial explains how to make
background images using heavy textures with PNGS. I've done all my examples with anime PNGs but you can easily use
Neopets related ones. You can find a listing of sites that have them on
The popsicle stand. Or some of my favorite sites are
Details, Aroma,
Crater, and Loveable.
You will need basic knowledge of GIMP for this tutorial as I do not explain each step in detail.
Below are
some examples I have done.

These screen caps have been re-sized. Drag and drop to the address bar to make larger.