Browse

Extras Main Rankings Admiration Tutorials Premade Fonts

Extra Features

Welcome to the Extras section of Bedazzled! In addition to graphics, resources, layouts, and requests, I'd like to offer you some extra features for your entertainment or service.

Rankings These are the sites that I think are the very best in the site-making community. I have ranked these sites using the qualities I think great sites should have.	Admiration Station This is where I acknowledge the hard work of different sites and site-makers. It's where I feature layouts, buttons, banners, and other graphics!
Tutorials Ever wonder how to make graphics? Or do certain effects? In these tutorials, I hope to give in-depth and easy-to-follow advice to way I make my graphics.	Premade Fonts In my spare time, when I'm not making graphics, I like to make fonts for the Neoboards! If you want a quality font (and you have a neoBoard pen) I invite you to try out some of these fonts.

Browse

Extras Main Rankings Admiration Tutorials Premade Fonts

Rankings

The rankings here at Bedazzled are primarily for graphic-related sites. The selection of sites is based on a few qualities. These are the criteria I use for rankings: Quality of content, Quantity of content, Frequency of updates (if applicable), Service, Visitor Convenience, and Aesthetics. These sites here are ones that I think truly deserve recognition for their amazing sites. If your site is listed under these rankings, go ahead and take one of the awards below. You've earned it, for sure!

<a href="/~quinsai"><img src="http://i.imgur.com/FT7J6.gif" border="0"></a><a href="/~quinsai"><img src="http://i.imgur.com/AtRjC.gif" border="0"></a>
Last updated: 12/29/2012

Adoptables & Pixels

1. All of the Cupcakes! is an absolutely adorable cupcake adoptables site that never ceases to impress me. The cupcakes are all "baked" by the very talented, Maryann! There is a great variety of ready-made cupcakes to choose from-- and if that isn't enough? You can request your own, customized cupcake with your favorite colors and toppings. All of the Cupcakes! is one spectacular site you do not want to overlook!

2. Sushi Roll 3. Tearoom 4. Eden 5. Simple Adoptables

Graphics and Resources

1. Foomanshu is a truly amazing graphics site and has been one of my favorite sites since I came into the site-making community. While it isn't active anymore, the quality of the content is beautiful and on top of that, there's a large variety. The images are eye-catching with their vibrant and beautiful colors. Foomanshu has gorgeous icons, banners, and so many more graphics that continue to amaze me whenever I see them.

2. The Lunch Box 3. Details 4. 49 Days 5. Illusion

Premade Layouts

1. Nienke's Premades is a site where practically every layout looks flawless. The layouts are beautifully made, look professional, and when you see one, you can just tell that Nienke made it. Nienke's Premades has a wide range of stunning layouts so you're sure to find one for every occasion. Don't just take my word for it though! Go ahead and pay this amazing site a visit, and see for yourself.

2. That Kills Me 3. Autumn Breezes 4. Sparkle 5. Vibe

Requests (buttons)

1. Open Eyes is an extremely high-quality button request site! The button images are beautifully edited with Turnip's unique coloring style. The flowing animations finish off each button with a great look! This site also has innovative borders, and a unique feature of "Custom Base Claims". On top of the lovely buttons offered, Open Eyes has some of the best service around, so you definitely won't be disappointed!

2. Saranghae 3. Cloud Nine 4. Euphoric 5. Inspire

Browse

Extras Main Rankings Admiration + Past Admired Tutorials Premade Fonts

Admiration Station

As a graphic maker, I love to marvel at the graphics of others; they're inspirational and should be admired once in a while! The Admiration Station is the section of Bedazzled where I like to admire fellow graphic-makers that really deserve it. Click here to browse through graphics that were featured here previously. If your banner, icon, button, layout, or any other graphic has been featured in the here, be sure to pick up your award!


<a href="/~quinsai"><img src="http://i.imgur.com/TjMSP.gif" border="0"></a><a href="/~quinsai"><img src="http://i.imgur.com/wP3jg.gif" border="0"></a>

This Week's Admirable Graphic (12/29/12)

Site name: 49 Days Made by: Sandy It's no secret that Sandy, site-owner of 49 Days, is a truly skilled icon-maker! This beautiful bruce icon out of her Winter Collection really caught my eye. It's a crisp image with very dynamic colors that make it stand out from the rest. It brings together simplicity and vibrancy in a way that is absolutely gorgeous.

Browse

Extras Main Rankings Admiration + Past Admired Tutorials Premade Fonts

Previously Admired Graphics

Click on the graphics to see where they are from. To view the graphics full size, right click on one and then click "View image in new tab". Hover over the graphics to see the name of the creator and the date they were featured!

The Graphics

Browse

Extras Main Rankings Admiration Tutorials + Intro to GIMP
+ Button Bases
+ Button Text
+ 3D Text Premade Fonts

Tutorials

Here are some in-depth and step-by-step tutorials to making graphics the way I do! I try to make these tutorials easy to follow, even if you don't have prior knowledge of the program, GIMP, which I will be using for all the tutorials. GIMP is a free, and easy to use program, so in a little time, and with absolutely no cost, you can learn how to make high-quality graphics.

Intro to GIMP This tutorial is great for beginners who would like to get started making graphics in GIMP! It goes through every menu, tool, and effect very thoroughly.	Making a Button Base Read this tutorial if you are interested in making a high quality button base! This tutorial covers everything from cropping images to adding textures.
Adding Button Text This tutorial will teach you about how I add text to buttons! In this tutorial, I will cover both pixel fonts and non-pixel fonts.	Creating 3-D Text Ever want to add some extra dimension to text? Now you can make text "pop out", using this easy, step-by-step tutorial!

Browse

Extras Main Rankings Admiration Tutorials + Intro to GIMP
+ Button Bases
+ Button Text
+ 3D Text Premade Fonts

Introduction To GIMP

This is a thorough guide to teach you about the different tools and effects in GIMP! Reading this will help get you accustomed to the various instructions I will be giving, and any graphic-lingo I will be using in the other tutorials. When you read the other tutorials, if you ever come across something you don't understand, refer back to this explanation of GIMP to refresh your memory on a menu, tool, or technique.

The Program

I use GIMP 2.6 for all of my graphics. You can easily get it on your computer by doing a search for "download GIMP 2.6". It installs fairly quickly and is very safe for your computer. I promise! After you have it downloaded, you're ready to make your graphics!

Glossary

Here is a list of terminology that applies to GIMP. Sometimes graphic tutorials can seem like they're in another language practically! This list of terms will help you understand any graphic-lingo used in the tutorials.

Alpha Channel: transparent areas of the image. If an area is completely transparent, it will appear as a gray checkerboard pattern.
Feathering/Feathered: when the edges of something are blurred to become smooth so they fade into the surroundings.
File Format: this refers to the format you save the graphic in. It's sort of the "suffix" at the end of any file name. Examples are .png (recommended for graphics without animation), .jpg, .gif (for animated graphics), and .xcf (if you want to edit the graphic later on).
Floating Selection/Layer: a type of layer identical to a normal layer, except it must be anchored/made into a new layer before you can resume working.
Grayscale: an image effect that includes no color, only black, white, and gray shades.
Hue: basically the color itself, a combination of the primary colors. A difference in hue would be the difference between green and orange; they're completely different colors. A difference in hue is not like the difference between purple and lavender because they have the same color, just different values.
Saturation: the brightness of a color. Colors with full saturation are very bright, while un-saturated colors are dull and gray.
Lightness: used to adjust the value of a color, or how light or dark it is.
Layer: a component of the image. The image is a compilation of all the layers stacked together.
Mask: like a cover put over a part of the image. Anything that is "un-masked" or not within the scope of the mask is visible, while everything under the mask is hidden.
Path: a shape composed of straight lines, curves, or both. It is mainly used to create the boundary of a selection.
Pixel: the tiny little dots that make up every image. Large images can have millions of individual pixels.

The Menus

Often you will hear me make references to a certain menu. Whenever I'm talking about menus, I'm talking about this bar at the top:


I will individually go through the uses and features of the different menus, specifically the ones I use for graphics.

1) The File Menu: I feel that this one doesn't need much explaining. It's pretty standard to any program. The only options I ever really use are New, to make a new graphic, Save As to save the graphic, or Open to re-open an existing graphic.

I want to go a little more in-depth with the "New" option. When you click New under the File menu, this window will pop up, titled Create a New Image. This is how you determine the height and width of the graphic you will be making. The height and width will vary depending on what you are making, or your personal preference. For example, buttons should always be 88 pixels in width and 31 pixels in height, while a banner can really be any size. Always have the unit set to "pixels" when adjusting the width and height.

2) The Edit Menu: In general, I do not use this menu. But I will still go through the tools, in case you want to! There's the Undo (Ctrl + Z) option to undo any action you make, and the Redo (Ctrl + Y) option to redo any thing that you've undone. There are the Cut, Copy, and Paste options which of course you can use, but I tend to use the keyboard shortcuts instead: Ctrl + X to cut, Ctrl + C to copy, and Ctrl + V to paste. Two more options that you may use are Fill with FG Color and Fill with BG color. When you have an area selected, you can use these options to either fill it with the foreground or background color. I will further explain what this means later on! But again, this menu really isn't necessary because you can just as easily use a tool to fill your selection with a color.

3) The Select Menu: Here is a menu that I find incredibly useful and use often! There are some tools that I prefer the shortcuts for, but I will list them anyways. All (Ctrl + A) is used to select everything, or the entire graphic. Then None (Ctrl + Shift + A) does the opposite and makes it so nothing is selected. I also use Invert on rare occasions; this tool takes what you have selected, un-selects it, and makes the area around it selected! I hope this makes sense. Basically, it just flip-flops what you have selected, with the un-selected area. Another tool that can be useful is the From Path selection tool. This tool lets you take a path you made (which is kind of like a connect-the-dots - I will explain later) and make the area selected.

If you would like to use the Shrink option (which I do often), this window will pop up, titled Shrink Selection. You adjust the number to be the number of pixels you want your selection to shrink by.

The Grow option is equally useful; it allows you to grow your selection by a specified number of pixels. A window similar to the Shrink Selection one will show up.

The Border option is also useful from time to time. It selects a border of any pixel width around your selection.

4) The View Menu: The only thing I use this for is the Zoom feature. Normally I view my graphic at 100%, but if I want to look closer, I sometimes zoom in. Or if the graphic is very large, like a layout, I sometimes view it at 50%.

5) The Image Menu: I have never really used this menu and find it pretty useless. All of the options here, you can really find elsewhere.

6) The Layer Menu: Some of the tools in this menu can be found in other places but it's still very useful! New Layer helps you to create a new layer obviously! After you click it, you have the option of naming it and adjusting it, but I usually just click OK without changing anything. New from Visible pretty much takes a little "picture" of what all your layers look like together and makes that picture into a new layer. Duplicate Layer is useful if there is a layer you want a copy of. Anchor Layer is used if you have a "floating layer" (a.k.a. a layer you just pasted) and would like to attach it to the existing layer. Merge Down takes a layer, and smooshes it down, combining it with the layer below. Pretty self explanatory, Delete Layer is used to delete a layer that you don't like.

The Mask sub-menu is useful, but can be tricky to understand (and for me to explain)! Basically, my understanding is that when you add a mask to something, you are covering up part of it. You aren't really getting rid of that part, just covering it. I will explain masks more in-depth, and how to use them, in tutorials where they are in use.

The Transparency sub-menu is one I use very often! Add Alpha Channel is used when you want there to be transparent areas in your graphic. If you ever want any transparent parts, this option must be selected. Alpha to Selection un-selects everything, and only selects whatever is in that layer. Add to Selection takes what you already have selected, and adds the selection of the layer to that. Subtract from Selection removes the selection of the layer from what you already have selected. Finally, Intersect with Selection selects the overlapping areas of what you already had selected and the selection of the layer.

7) The Color Menu: This menu is essential for making graphics! You use it to adjust the colors of your graphic. Color Balance adjusts color distribution, which can shift the colors of a graphic to be more red, green, blue, cyan, magenta, or yellow. Hue Saturation has 3 options: Hue, Lightness, and Saturation. They're used to change the hue of the colors, how light or dark the colors are, and the brightness or dullness of the colors. Colorize will make the entire graphic one color. For example, you can make the whole graphic one specific shade of purple. Brightness-Contrast can make your image brighter and more vivid, while increasing the contrast or differences between the colors. Desaturate will get rid of all the color in the graphic, making it all black, white, and gray shades. Invert will change all the colors to their opposites. For example, white will become black or blue will become orange.

8) The Tools Menu: Disregard this menu because everything here can be found in your Toolbox.

9) The Filters Menu: This menu can be very useful for editing graphics! The Blur sub-menu is exactly how it sounds; it's used to blur images! Blur is a generic/simple blur option that is not very strong. Gaussian Blur is the most useful in my opinion, and enables you to adjust how blurred you want the image to be. Motion Blur simulates motion by blurring the image in different directions. Another very important tool under the Enhance sub-menu, is Sharpen This allows you to sharpen images, making them less blurry and more crisp. Next, under the Light and Shadow sub=menu is the Drop Shadow option. Drop shadows simulate depth by making it look like a selection is casting a shadow around it. Finally, the last sub-menu that I find useful is Animation; it is used when adding animation to a graphic. The Blend tool is used to blend all the layers together, making a smooth animation. Playback gives you a preview of your animation, showing you what the final product will look like.

10) The Windows Menu: Not used.

11) The Help Menu: Not used.

Toolbox

Here is a quick guide to the Toolbox! It explains the different tools used throughout these tutorials.

Layers Dock

Finally, this is a guide to the Layers Dock!


Any questions? Go ahead and neomail me!

Browse

Extras Main Rankings Admiration Tutorials + Intro to GIMP
+ Button Bases
+ Button Text
+ 3D Text Premade Fonts

Making Button Bases

Would you like to make your very own button base? After all, the base of a button is key to making a high-quality button for advertising your site. With this guide, I have 6 easy-to-follow steps that can be used to make an eye-catching button base with GIMP.

Step 1: Set up

First, open up GIMP. Go up to the File menu and select New (or press Ctrl + N on your keyboard). A window will pop up titled Create a New Image. Set the width to 88px and the height to 31px. Also, make sure it is set to pixels. It should look like the image below and to the left.

Click Okay and you will be presented with your 88x31px blank canvass of button possibilities!

Step 2: Image Selection

Listed here are sources of neopets images you can use for your button: Full Screen Backgrounds, Background Bonanza, Caption Contest Archives, Zel's Page of Shopkeepers, and TCG Card Images. You can use these sources, or use an off-site image database like Dr. Sloth's Neopets Image Emporium! It's my favorite place to find images.

Here are my tips for choosing an image:
If an image looks kind of blurry to start, it will definitely be blurry at such a small scale. You can sharpen it, however, it will probably not look as good as an image that was sharp to begin with. For example, this image is pretty, but the castle is out of focus, so it would not the best image choice.
In the case of buttons with characters on them (neopets, faeries, etc.) try your best for them to be facing the text. You don't want the focal of your button looking off to the edges of the button. This distracts from the text and interferes with the composition of the button.
Pick interesting images! I've seen many buttons of just textures; they can look fantastic, however, they usually come across as a bit boring. If you are going to do a texture-only button, at least add interest to the button through text or animation.
Avoid sad images. Unless it fits with the name of the site, you don't want people's first impression of your site to be sad and gloomy.
Color is key! Choosing an image with vibrant colors will make your button stand out. You can always enhance the colors later on though.

Step 3: Scale and Position

When you choose an image, right click on the image, click Copy image, and then paste it into your GIMP canvass (do this by pressing Ctrl + V on your keyboard, right-clicking the canvass and then clicking paste, or going up to the Edit menu and clicking Paste). Now we have our image pasted into GIMP, but there is one problem: it's larger than 88x31px. That's where the Scale () tool comes in handy. After clicking on this tool, click once on the image and a pop-up box will emerge.

First, directly to the right of where it says length and width, there should be a little picture that looks like a broken chain. Click on this and the broken chain will connect. This is an important step to ensure that the image doesn't get distorted too much when we scale it down. Then, drag a corner of the image towards the center until it is your desired size. Below, you can see the image I started with and the new, scaled image.


It is now a much more manageable and button-able size! Next, you have to position the image. I like to think of it like I have a small, 88x31px window and I move the image around until I see something I like in it. To move your image you are going to use the Move () tool. Select the tool then click and drag the image around until you choose a focal point. For my button, I chose the usuki. This is what my button looks like at this point:


Tip #1: When you are moving the image around, looking for a focal point, I strongly suggest picking a part of the image that has enough negative space, which is plain or less busy space on the button. In my example, it would be the purple space to the left of the usuki. This is crucial so you have a spot to put text, without covering an important part of the image. Keep in mind what you are going to write there; if it's a short site name, you don't need a lot of space, but if it's long you need to allot more space.

After you are satisfied with your focal image, you need to anchor the layer because right now, it's floating selection which means it's not its own layer yet. Anchor it by clicking the anchor icon () on the bottom of the Layers Dock.

Step 4: Sharpen

One thing about scaling down images is that they become blurry. To fix this we need to sharpen the image. Click on the Filters menu and then click Enhance and Sharpen. Drag the Sharpness bar until it's about 20-40 depending on how blurry your image looks and click OK. Be careful not to over-sharpen because then the lines in the image will look jagged and messy. I sharpened my example button by 35. See the difference?

Step 5: Texture-ize!

This is the part of making a button base that takes time and practice because it's very easy to apply too many or too few textures. There are many textures out there but I will only ever recommend light textures. I love the way they enhance buttons without ruining the image or making it look messy. Adding textures is not an exact thing; one button may require 3 textures while another may need 1. It really depends.

The first thing you need to do is pick a texture! I only ever get my textures from my own resources or Details. The first texture I chose is one from Details:


In general, choose a texture with colors similar to those in the button. I want to bring out the pinks in this button so I picked a pink/purple texture. Right click on the texture you choose and click Copy Image then paste it onto your button. Move the texture around using the Move () tool.

Tip #2: Sometimes, I like to scale down textures as well. These light textures or bokeh textures can sometimes have dots that I find overwhelming for such small images. To do this, after you paste the texture, click the Scale () tool then click the texture. Drag a corner in like you did when you scaled your image, and click OK.

In this case, I want to brighten my image so I change the mode to Screen. Other options I sometimes use for the mode are Overlay, Multiply, and Soft Light. Adjust the opacity if you think it's necessary. If it looks so light you cannot see the image anymore, I would definitely lower the opacity quite a bit. Anchor the texture by clicking the anchor icon () on the Layers Dock.

Tip #3: Light/Bokeh textures can easily cover up your focal point if you're not careful. Be sure to position the lighter parts of the texture over less important parts of your image.

After screening this texture, my button looks like this:


Better, but not really what I want yet. I'm going to add this texture as well:


I repeated the same process for this texture and lowered the opacity on this one so it wouldn't be too strong. That's all the textures I'm going to apply to this button. Check out the fully-textured button base compared to before textures:

That looks much better, right? The last step will really take it up another notch.

Step 6: Coloring

The first thing I usually do after textures is edit the Hue Saturation. Go up to the Colors menu and click Hue Saturation. To enhance this button, I increased the Saturation (how bright the colors are) by 30 and increased the Lightness (light or darkness) by 10. I didn't use the first editing effect, Hue, for this particular button. However, it can be a useful tool. If I wanted to make my button more pink or blue, I could move the bar to the right or left. If I moved the bar enough, I could even make this button orange or green! Adjusting the hue this extremely can make the image look distorted though.

Sometimes I adjust the Brightness and Contrast. To do this, go up to the Colors menu and click Brightness and Contrast. A little bit goes a very long way with contrast so normally, never do more than 10. Brightness will make the button lighter and brighter. For this button, I chose not to adjust either contrast or brightness because I thought it was bright enough. After that I usually stop editing the image!

Tip #4: Coloring is something you can do all through the button-making process. For example, you can adjust the Saturation after adding a texture, and then add another texture! It does not matter what order you do these things in.

Tip #5: With some buttons, after textures and coloring, it can become blurry again. If it looks at all blurry, you can sharpen it again! I sharpened this one a very little bit because it looked kind of blurred.

Take a look at the difference after all that image editing:


Congratulations! If you've made it this far, you're done with your button base. Don't be discouraged if it doesn't look so great on your first try. The more buttons you make, the better you're going to get with editing images.

Any questions? Go ahead and neomail me!

Browse

Extras Main Rankings Admiration Tutorials + Intro to GIMP
+ Button Bases
+ Button Text
+ 3D Text Premade Fonts

Adding Button Text

Adding text is the most important part of making buttons! You could have the most beautiful button base, border, and animation in all of Neopia, but if the text isn't legible? The button has no use. Sometimes it can be difficult to make text look good, but with these simple techniques, you'll be adding gorgeous text in no time! Here are the styles that will be covered in this tutorial:

White Pixel Font

Colored Pixel Font

Non-Pixel Font

Suggested Fonts: Pixel & Non-Pixel

There are some fonts that simply don't work on buttons. Because buttons are so small, you have to pick fonts that can be read on a small scale. To make it easier for you to pick the right fonts, I compiled a list of good fonts to use in buttons. (Drag and drop the image to the address bar)

These fonts are quite easy to download. You just need to find a site that specializes in downloading fonts and has a wide variety. My suggestion is dafont.

Of course these fonts are just suggestions; I encourage you to experiment with other fonts and see what your personal preferences are! Out of the pixel fonts my favorites are: 04b03, Bold 04b03 (I will explain how to get this in the "Colored Pixel Font" section), 04b_24, and Bangalore! I don't have a huge preference for the non-pixel fonts; any of them can look good if used correctly! It all really depends on the button.

The Button

Here is the button base I will be using for all these text tutorials! It is one of the premade blank button bases found here! It is very simple, and can handle many different text styles.

White Pixel Font

Let's get down to it! So before this tutorial, you need to have a finished button base, border and all. I recommend either using a button base like these or using my button base tutorial or another button tutorial.

First, select the Text () tool. For this part of the tutorial, I will be using the font, 04b03. For this font, and most pixel fonts, the font size should be set to 8px. The color should be white. Basically, the settings should look like the ones in the image to the left. With the text tool selected, create a text box on your button, and type whatever text you want for your button. For my button, the text will go in the very middle, because there is no focal point in the image and the text should be the center of attention. If you have a busier image, perhaps with neopets or characters, position the text so it does not cover the focal point up.


Now you have text on your button, but you're not nearly done!


This button is crying out for a text border! The next thing you have to do is, with the text layer selected, click the Layer menu, Transparency, then Alpha to Selection. This will select your text. Then, click the Select menu, Grow, and set the number of pixels to 1px. This will be the area of your border. Now we need to add color. The color of your text border should be darker than your button base, but not too dark. To get a good color, it is easiest to use the Color Picker () tool, then darken it. Pick a very prominent color in the button, or more than one if you want a gradient, like I plan on using. I picked a pink color from the left of the button and a purple color from the right. Then, darken the colors by clicking on the Foreground and Background color blocks on your toolbox. Use the color adjuster to drag the intersection of the two lines up and to the left. See the difference in color?


Here you have a choice: you can either use the Fill () tool to make a solid colored border, or use the Blend () tool to make a gradated border. The first option is very simple: make a new layer, pick one color, and fill the area with that color! It is a perfectly acceptable option, however, I believe the gradient effect can look better on many buttons because it ensures that the text border matches the button base.

If you choose the gradient method, make sure your settings match these to the left (drag and drop the image to the address bar). Create a new layer for the text border. To create the blend, click and drag your mouse across the selection. Then press Ctrl, Shift, A on your keyboard to un-select everything. This is what the button will look like at this point:


Some button makers may stop there, but in my opinion, it is still very unfinished. It needs to blend in better with the button, and have softer edges. To do this, we need to use the Eraser () tool. Set the Opacity to about 40. The Brush should be Circle (01), which is 1px in height and width. First, make sure you have the text border layer selected. Zoom in to about 800% so you can really see the details of yor button. Using the eraser, erase the corners of the borders. You basically want to erase any pixel that isn't adjacent, or touching the white text. If it only touches diagonally, erase it. See below how I erased the pixels. The button is zoomed in so you can really see the process (Drag and drop the image to the address bar).


See the difference from the plain border, and the softened border?


It's subtle, but to me, this kind of detail can separate a good button, from a poor quality button. The finish is near for this button! The last touch I want to put on the text is a slight drop shadow. We need to select the text border layer so click the Layer menu, Transparency, then Alpha to Selection. Then, click the Filters menu, Light and Shadow, and Drop Shadow. A window will pop up to adjust your drop shadow. For button text, I always set both Offsets to 1, and the Blur Radius to 5. Leave the opacity, because you can adjust this later, and un-check the Allow Resizing box. The color should be a dark color that matches the button. For my button, I chose a dark purple color. At the end, the settings should look like the ones to the left. Click OK. Now you can adjust the opacity of the drop shadow on the Layers Dock until it is noticeable, but not too dark. For my button, I settled on an opacity of 40. You choose what looks best for your button! It always varies. Here is the final product with a White Pixel Font:

Colored Pixel Font

Coming Soon!

Non-Pixel Font

Coming Soon!

Browse

Extras Main Rankings Admiration Tutorials + Intro to GIMP
+ Button Bases
+ Button Text
+ 3D Text Premade Fonts

Creating 3D Text

Here are some examples of the "3D text" effect from this tutorial:


Above you can see both types of text that will be covered! The first two have colored text that has been brightened, and the second two have white text with a subtle gray shadow.

Colored Text

The first thing you need to do is add text using the Text () tool.

For this effect to look its best, choose a font that is not too thin, and a color that it a bit darker than you want the finished product to look. If a font is too thin, the effect really won't have the desired look, and if a color is light, the font will be hard to read after adding the effect. For the purposes of this tutorial, I chose this dark purple text (drag to the address bar to view full-size).

It's really very simple! After you've added your text (this layer is the "base text"), duplicate the layer. This can be done using the Duplicate () tool on the Layers Dock. Then, change the color of the second text layer to white. So at this point, you should have a colored text layer and a white text layer directly on top.

Next, click on the white layer and move it up and to the left a few pixels. For this example, I moved the layer up 3 pixels and to the left 3 pixels. For the best effect, these numbers should be equal.

Next, we need to blur the layer. To do this, click the Filters menu, Blur, and then Gaussian Blur. The amount you blur the layer depends on your text. If the font is really thin, you should only set the blur radius to be about 1 to 3. For thicker fonts, I would suggest 5 or even as high as 10. For this example, I chose a blur radius of 4. Notice the preferences in my example, the chain symbol is linked, the unit is set to px (pixels), and blur method is RLE.

It's almost done! Now what you have to do is set the mode of this layer to Overlay. With only one white layer, it can be necessary to duplicate the layer, to make the effect more noticeable. Here you will see why it is important to have a dark base text color, because the text will be significantly lighter and brighter.

Merge the text layers, first by merging the first white layer to the base layer (right-click the layer in the Layers Dock, then click Merge Down), and then merging down the second white layer. Here is your final product:

White Text

Again, the first thing you must do is use the Text () tool to add a layer of text. This time, make the text white and add it onto a colored background.

Like with the colored text, it is best to choose a font that is not too thin. If it's too thin, the effect will not look very good. For this part of the tutorial, I chose a purple background with this white text.

Next, we have to create a selection around the text. Click on the Layer menu, then Transparency, and finally Alpha to Selection. A dotted line will appear around the text, indicating that it's selected. Next, we need to click the Select menu, and then Invert.

The way we will add the 3D effect, is with a subtle drop shadow. Click the Filters menu, Light and Shadow, and then Drop Shadow. First, set the Offset X and Offset Y so they are negative. This will help adjust the intensity of your shadow. In my case, I chose -2 pixels. The Blur Radius also effects the intensity of the shadow; the higher the number, the stronger the shadow. I usually choose about 5. The color of the drop shadow should be a medium/light gray color, like the one in my example. Leave the Opacity at default (which is 80) and click OK.

You could be done right now! If you wish, you can adjust the opacity of the shadow if it is too dark or light. To really complete the look, I like to add another drop shadow behind the text. Again, we add a drop shadow by clicking the Filters menu, Light and Shadow, and then Drop Shadow. For this one, set the Offsets to about 1-3 and make the Blur Radius higher, about 10 or so. Either make the color the same as your background but darker, or make it black, and set the mode to Overlay later. That's all there is to it! Here is the final product that I came up with:

Browse

Extras Main Rankings Admiration Tutorials Premade Fonts

Premade Fonts

Welcome to the font section of Bedazzled! To use the fonts, first go to edit your Neoboard Preferences. Copy the first code I've provided, and paste it into your NeoHTML. Then copy the second code, and paste it into your NeoSignature. Unfortunately to those who do not have neoBoard pens, all the fonts require one. I'm sorry if that's an inconvenience to anyone!

Avatar-matching Fonts

10th Birthday
[center][fontc=0s=1f=verdana]neoHTML[/font][p][fontc=#EE9D2D]✦　　✦　　✦　　✦[br][/font][fontc=#F64AD3s=1]█　　　█　　　█　　　█[br][/font][fontc=#7266AC](▔▔▔▔▔▔▔[]▔▔▔)[br](▔▔▔▔▔▔▔▔▔▔)[br](▔▔▔▔▔▔▔▔▔▔)[br]▔▔▔▔▔▔▔▔▔▔[/font][br][fontc=#01AFB8s=1f=tahoma]H A P P Y　[b]B I R T H D A Y[/b]　T O　M E ![br][/font][/center]


A Day At The Beach
[center][fontc=0s=1f=verdana]neoHTML[/font][p][fontc=grayf=courier]let your　[/font][fontc=#209f9ef=georgia][i][b][sub]w[/sub] a [sub]v[/sub] e[] [sub]s[/sub][br]C[/b]RASH[/i][/font][fontc=grayf=courier]　down on me[/font][br][fontc=#5A8C22f=consolass=1]A N D　T A K E　M E　A W A Y[/font][/center]


A Meepit! Run!
[center][fontc=0s=1f=verdana]neoHTML[/font][p][fontf=monospaces=1c=#f88ac0]　▄　　▄ 　▄▄▄▄▄　▄▄▄▄▄　▄▄▄▄　　█　[br] █▀▄▀█ 　█▄▄　　 █▄▄　　█▄▄▀ 　█[br]　　　█ 　 █　█▄▄▄[]▄　 █▄▄▄▄　█　　　▄　　 　[/font][br][fontf=consolass=2c=#7aa6c3]the meepits are watching[/font][br][fontc=#69d53]▔▔▔▔▔　❤　▔▔▔▔▔[/font][/center]


Acara - Angry Prince
[center][fontc=0s=1f=verdana]neoHTML[/font][p][fontc=#8D56B2]✦ 　✦ 　✦[br][/font][fontc=#FAC035]|╲╱╲╱|[br]|¯¯¯¯¯¯¯¯|[/font][br][fontc=#C996A8](▒▒▒▒▒▒)[][/font][br][fontc=#656FDFs=1]╭|　╲ ╱　|╮[br]╰|　● 　●　|╯[br]|　╭─╮　|[br]╰━━━━╯[/font][p][fontc=#D20042s=1f=consolas]A N G R Y　P R I N C E[/font][/center]


Acara - Roberta of Brightvale
[center][fontc=0s=1f=verdana]neoHTML[/font][p][fontc=#DAB42A][sub]✶[/sub] ★ [sub]✶[/sub][/font][br][fonts=4c=#3F7F9F][b]ℛ[/font][fontc=#4C9FC8]OBERTA[][/font][fontc=#229229f=timess=1][br][/b]OF BRIGHTVALE[/font][br][fontc=#DAB42A][sup]✶[/sup] ★ [sup]✶[/sup][/font][/center]


Ace Zafara
[center][fonts=1c=0]neoHTML[/font][p][fontf=georgiac=#555]s h o o τ　f o r　τ h e　m o o n[/font][br][fontc=#4A6DB5s=1]▲▼▲▼▲[/font][fontc=#7F5C8Es=1]▼▲▼[]▲▼[/font][fontc=#B54B67s=1]▲▼▲▼▲[/font][fontc=#EA3A40s=1]▼▲▼▲▼　[/font][fontc=#666s=1f=courier][br]MAYBE YOUʹLL LAND AMONG THE STARS　　[/font][/center]


Achyfi!
[center][sup]neoHTML[/sup][p][fontc=#888]▄▄▄▄▄▄▄▄[/font][fontc=#ed2a2af=monospace][br]▄██████▓▒█▄[br]██Ａ████▓▓▒█[/font][br][fontc=#F4B600f=monospace][]██Ｃ█████▓▒█[br]██Ｈ█████▓▒█[/font][fontc=#ed2a2af=monospace][br]██Ｙ█████▓▒█[br]██Ｆ█████▓▒█[br]██Ｉ████▓▓▒█[br]▀█████▓▒█▀[/font][/center]


Aisha - Disco
[center][fonts=1c=0f=verdana]neoHTML[/font][p][fontc=#FF9E59][sub]✱[/sub]　[sup]✱[/sup]　✱[/font][fontc=#FE629Ds=3]　[sub]✱[/sub]　✱[/font][i]　[b][][fontc=#777f=georgia]d[/b]isco fever!　[/i][/font][fontc=#FE629Ds=3]✱　[sub]✱[/sub][/font][fontc=#FF9E59]　✱　[sup]✱[/sup]　[sub]✱[/sub][/font][/center]


Aisha - Hoban the Navigator
[center][fontc=0s=1f=verdana]neoHTML[/font][p][fonts=4c=#32626F]ℋ[/font][fontf=tahomas=1c=#428044] O B A N　[/font][fontc=#BC9E2As=1]彡 [sup]✽[/sup] ミ [][sub]✽[/sub] 彡 [sup]✽[/sup][/font][br][fontc=#886F39f=georgia][i]a [b]leaf[/b] on the [/font][fontc=#366876f=georgia][b]wind[/b][/i][/font][/center]


Aisha Scalawag
[center][fontc=0s=1f=verdana]neoHTML[/font][p][fontc=#B20101s=3f=georgia]s c [i]a[/i] l [i]a[/i] w [i]a[/i] g [/font][fonts=4c=#555f=tahoma]![/font][][fonts=4c=redf=verdana][b]*[/b][/font][br][fontc=#444s=1f=consolas]A PIRATEʹS LIFE FOR ME[/font][br][fontc=#D32727]¯¯ ¯¯ ¯¯ ¯¯ ¯¯ ¯¯[/font][/center]


Dice-a-Roo
[center][fontc=0s=1f=verdana]neoHTML[/font][p][fontc=#3C88D5]　[sub]♦[/sub][/font][fontc=#1D9138]　♣[/font][fontc=#F1BB03]　[sup]♠[/sup][/font][][fontc=#D42425]　♥[/font][fontc=#AB48CB]　[sub]♦[/sub][br]♠　[/font][fontc=grayf=georgias=1][i]accept the cards[br]　life deals you[/font][/i][/center]


Edna - Cackle!
[center][fontc=0s=1]neoHTML[/font][p][fontc=1]. • ˙ ˙ • .[br][/font][fontf=georgias=1c=green]DOUBLE　[i]double[/font][fontf=georgiac=#769A03s=1]　[/i]T[]OIL　[i]and trouble[/i][/b][/font][fontc=greens=1]　✶[/font][br][fontc=1]　　. • ˙　　　　　　　˙ • . . • ˙[/font][br][fontc=green]✶　　　　　　　　　　　　[/font][/center]

Altador Cup Fonts

Team Altador | Lupe - King Altador
[center][fontc=0s=1f=verdana]neoHTML[/font][p][fontc=#C6B44Ds=4]✳　♛　✳　[/font][fontc=#7D7B5As=4f=georgia][b]teα[/font][fontc=#988751s=4f=georgia]m αlt[][/font][fontc=#B29348s=4f=georgia]αdor[/b][/font][br][fontc=grays=1f=tahoma]K I N G S　O F　T H E　A L T A D O R　C U P[/font][/center]


Team Brightvale | Skeith - King Hagan
[center][fontc=0s=1f=verdana]neoHTML[/font][p][fontf=couriers=1c=gray]ALWAYS LOOK ON THE　[/font][fontf=rockwells=4c=#499653]BRIGHTVALE[/b][/font][][fontf=couriers=1c=gray]　SIDE OF LIFE[br][/font][fontc=#67C071]▔▔▔▔▔▔▔▔[/font][fontc=#99C356]▔▔▔▔▔▔▔▔[/font][fontc=#CAC53B]▔▔▔▔▔▔▔▔[/font][/center]


Team Darigan | Darigan Peophin
[center][fontc=0s=1f=verdana]neoHTML[/font][p][fontc=#65407Ff=rockwells=4]D[/font][fontc=#444f=couriers=3]ARIGAN[/font][fontc=#C81717f=rockwells=4][] C[/font][fontc=#444f=couriers=3]ITADEL[/font][br][fontc=grayf=georgias=1][i]f o r　t h e　c u p ![/i][/font][br][fontc=#DDB93C]▼▲▼▲▼[/font][/center]


Team Faerieland | Fyora - Faerie Queen
[center][fontc=0s=1f=verdana]neoHTML[/font][p][fontc=#D689D8s=1]|¯¯|_|¯¯|_|¯¯|　　　　　|¯¯|_|¯¯|_|¯¯|[br]¯|　　　　|¯　　　　　　¯|　　　　|¯[br]|　　　　¯¯¯¯¯¯¯¯¯¯¯¯¯　　　　[]|[br]|　　　　[/font][fontc=#52A1BBf=georgias=1][i]team faerieland![/i][/font][fontc=#D689D8s=1]　　　　|[br]|___________________________|[/font][/center]


Team Haunted Woods | Werelupe
[center][fontc=0s=1f=verdana]neoHTML[/font][p][fonts=3f=mistralc=#666]H A U N T E D[/font][fontc=#CC0000s=4]　★　[/font][fonts=3f=mistralc=#333]W O []O D S[/b][br][/font][fontc=#89885As=1]▀▀ ▀▀ ▀▀ ▀▀[/font][fontc=#6F6E49s=1] ▀▀ ▀▀ ▀▀[/font][fontc=#545338s=1] ▀▀ ▀▀ ▀▀ ▀▀[/font][/center]


Team Kiko Lake | Kiko - Rock!
[center][fontc=0s=1]neoHTML[/font][p][fontc=#59B2DFf=georgias=4][b]tεαm[/font][fontc=#6B84D4f=georgias=4] kiko[/font][fontc=#7C56C8f=georgias=4] lαkε[][/b][/font][fontc=#FE2A2As=4]　❤[/font][br][fontc=#555s=1f=monospace]WE WILL ROCK THE ALTADOR CUP[/font][br][fontc=#FF6666]¯¯¯　 　 　[/font][/center]


Team Krawk Island | Pirate! - Krawk
[center][fontc=0s=1f=verdana]neoHTML[/font][p][fontf=georgiac=#6080A0][b]KRAWK [/font][fontf=georgiac=#51667C]ISLAN[/font][fontf=georgiac=#424D57]D F[]OR T[/font][fontf=georgiac=#333333]HE WIN[/b]　[/font][fontc=#7090A0s=4]★[/font][br][fontc=#ccccccs=4]▔▔▔▔▔▔▔▔▔▔▔▔▔▔[/font][/center]


Team Kreludor | Grundo - Forever Orange
[center][fontc=0s=1f=verdana]neoHTML[/font][p][fontc=#FFA05Bs=3][sub]✶[/sub]　　✷　[sub]　✸[/sub]　[/font][fontc=#FF771Bs=3][br]✷　　[sub]✸[/sub]　　✶　　[sub][]✷[/sub]　✶[/font][br][fontc=grays=1f=tahoma]K R E L U D O R　F O R　T H E　W I N[/font][br][fontc=#c879be]▔ ▔ ▔ ▔ ▔ ▔ ▔ ▔ ▔ ▔ ▔[/font][/center]


Team Lost Desert | Anubis
[center][fontc=0s=1f=verdana]neoHTML[/font][p][fonts=1c=#C5931B]▄▄▄[/font][fonts=1c=#A37F2C]▄▄▄[/font][fonts=1c=#816B3D]▄▄▄[/font][fonts=1c=#5E564E]▄[]▄▄[/font][fonts=1c=#3C425F]▄▄▄[/font][fonts=1c=#1A2E70]▄▄▄[br]❤ [/font][fontc=#555555f=monospaces=2]TEAM LOST DESERT[/font][/center]


Team Maraqua | Good or Bad?
[center][fontc=0s=1f=verdana]neoHTML[/font][p][fontc=#28B8BA][sub]●[/sub]　●　[sub]●[/sub][/font][fontc=#229BB7s=3][br]　●　[sub]●[/sub]　●　[sub]●[/sub]　[]●[br]ℳ[/font][fontc=#555f=consolas]ARAQUA FOR THE WIN[/b][/font][br][fontc=#23858As=4][sup]●[/sup]　●　[sup]●[/sup]　●　[sup]●[/sup][/font][/center]


Team Meridell | Turtum
[center][fontc=0s=1f=verdana]neoHTML[/font][p][fontc=#FC6262]❤　　　　　　[/font][br][i][b][fonts=1f=georgiac=#D73131]tea[/font][fonts=1f=georgiac=#A83C60][]m me[/font][fonts=1f=georgiac=#78468F]rid[/font][fonts=1f=georgiac=#4951BE]ell[/b][/i][/font]　　　　　　[br][fontc=#74AB62]▔▔▔▔▔▔ 　　　　　[/font][/center]


Team Moltara | Fire Paw
[center][fontc=0s=1f=verdana]neoHTML[/font][p][fonts=4f=georgiac=#EE0F01]　*fire* *fire* *fire*[br][b]M[/b][/font][fontf=georgiac=#EF2A15] O L [/font][][fontf=georgiac=#F15E13]T A [/font][fontf=georgiac=#F29111]R A[/font][br]　　[fonts=1f=georgiac=#f33e3a][i][b]weʹre on fire![/b][/i][/font][/center]


Team Mystery Island | Island Mystic
[center][fontc=0s=1f=verdana]　　neoHTML[/font][p][fonts=1f=georgiac=gray][i]i t ʹ s　n o　m y s t e r y　t h a t[/i][/font][fontc=#65CF9Es=4f=tahoma]　　　　[][br][b]MYSTERY[/font][fontc=#33A165s=4f=tahoma]ISLAND　　　　[/b][/font][br][fonts=1c=#c49b62f=courier]WILL WIN THE ALTADOR CUP!　　　　　　　[/font][/center]


Team Roo Island | Dice-A-Roo
[center][fontc=0s=1f=verdana]neoHTML[/font][p][fontf=consolasc=grays=1]I　A M　A　P R O U D [/font][br][fonts=4c=#4091E1f=verdana][b]roo[/font][][fonts=4c=#F24042f=verdana]lig[/font][fonts=4c=#369f51f=verdana]an![/b][/font][fontc=#F1BB03] ★[br][sup]★[/sup]　★　★　[sup]★[/sup][/font][/center]


Team Shenkuu | Kasuki Lu - Heeyah!
[center][fontc=0s=1f=verdana]neoHTML[/font][p][fontf=tahomac=grays=1]p r o u d　m e m b e r　o f[/font][br][fontf=consolasc=#C0080As=4][b]TEAM [][/font][fontf=consolasc=#D74606s=4]SHEN[/font][fontf=consolasc=#EE8401s=4]KUU[/b][/font][br][fontc=#6E85B4s=1]≡≡≡≡ ✶ ≡≡≡≡≡≡≡ ✶ ≡≡≡≡[/font][/center]


Team Terror Mountain | Let it Snow!
[center][fontc=0s=1f=verdana]neoHTML[/font][p][fonts=1c=#B1CBE8f=courier]★[br]OR MOUN[/font][br][fonts=1c=#86A4C5f=courier]RROR MOUNTA[/font][br][][fonts=1c=#5B7CA1f=courier]TERROR MOUNTAIN[/font][br][fontc=grays=1f=georgia][i]wi l l　w i n　t h e　c u p ![/i][/font][/center]


Team Tyrannia | Tyranu Evavu
[center][fontc=0s=1f=verdana]neoHTML[/font][p][fontc=#EACD2B][sub]✶[/sub] ★ [sub]✶[/sub][/font][br][fonts=4c=#C17319f=mistral]TYRA[/font][][fonts=4c=#764E1Df=mistral]NNIA[/font][fontc=brownf=consolass=1][br]FOR THE WIN[/font][br][fontc=#EACD2B][sup]✶[/sup] ★ [sup]✶[/sup][/font][/center]


Team Virtupets | Lever of Doom
[center][fontc=0s=1f=verdana]neoHTML[/font][p][fontc=#565973]▄ ▄ [/font][fontc=#6B6F8C]▄ ▄ [/font][fontc=#7F85A4]▄ ▄ [/font][fontc=#949BBD]▄ ▄[/font][][br][fontc=red]★[/font][fontc=#444f=rockwells=1][b]　VIRTUPETS　[/b][/font][fontc=red]★[br][sup]★[/sup] ★ [sub]★ ★[/sub] ★ [sup]★[/sup][/font][/center]

Sitely

Click this envelope to neomail me! I welcome any sort of neomail, whether it's a question, critique, or just intended to chat. Never hesitate to drop me a neomail. I will always try to keep my inbox open to you all. Every neomail deserves a reply!

Link Back Buttons

<a href="/~quinsai"><img src="http://i1116.photobucket.com/albums/k573/nienkju4/bedazzeld-1.gif" border="0"></a><a href="/~quinsai"><img src="http://i52.tinypic.com/15fgbiu.jpg" border="0"></a> <a href="/~quinsai"><img src="http://i.imgur.com/nP7Zw.gif" border="0"></a><a href="/~quinsai"><img src="http://i55.tinypic.com/5b21qg.gif" border="0"></a> <a href="/~quinsai"><img src="http://i1115.photobucket.com/albums/k550/saranqhae/Bedazzled.gif" border="0"></a> <a href="/~quinsai"><img src="http://i48.tinypic.com/ab1pc.jpg" border="0"></a> <a href="/~quinsai"><img src="http://i.imgur.com/1KysE.gif" border="0"></a>


<a href="/~quinsai"><img src="http://i.imgur.com/V2cQu.gif" border="0"></a><a href="/~quinsai"><img src="http://i55.tinypic.com/2duh4qv.jpg" border="0"></a><a href="/~quinsai"><img src="http://i.imgur.com/qcCxE.gif" border="0"></a>

Affiliates (CLOSED)

Credits