Welcome to Bedazzled
, a graphic, resource,
site hosted by me, Monky
, since July 5th, 2011. Bedazzled
is a site with a large variety
of content ranging from banners and icons to resources and even premade layouts. If you are looking for a large selection of quality content
, then you have come to the right place! Plus, if you don't find something to meet your needs, don't worry! You can put in a request for a custom
graphic or layout. I welcome you to look around and discover the many goodies that Bedazzled
has to offer you.
Do you have a comment, question
I'm always delighted to listen to opinions, whether they're positive or constructive criticism. Visitor feedback
is truly appreciated, so I can continue to improve Bedazzled.
Use the sign below to voice your opinions!
Bedazzled is no longer updated.
I'm very happy to say that I'm not departing on the sour note that many site-makers do. I'm not doing this because of theft or because I've grown tired of Bedazzled. In fact, I still love Bedazzled and graphic-making as much as I did the day I started. I've just realized now that college is upon me, it's time for a fresh start.
As much as I've considered self-freezing to really get me to distance myself from this site, I couldn't bring myself to do it. Bedazzled will remain up for your continued use, simply without updates. You do not need to credit for anything unless you decide you want to. Ignore the rules; my graphics, resources, and layouts/coding are all yours for however they may be useful.
To prevent myself from coming back (because I'll want to), I'm not downloading GIMP or any of my fonts on my new college laptop. There isn't a trace of Neo or Bedazzled here and that's how it's going to stay.
Affiliates: Remove me if you wish. Keep me on if you wish. You're all fantastic sites and I'm so happy that we've been able to be affiliates! I wish you all the best of luck! Listers: Feel free to mark Bedazzled as an inactive site. I'd rather you not remove the site entirely, because I know it could still be useful to people, but it's your decision of course.
I love you all and thank you so much for an amazing two-year journey. I'm sad it's coming to a close, but I am so grateful that I was able to enjoy it while it lasted.
Lots of love,
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.
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. (Be wary: these rankings are not updated frequently)
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!
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.
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.
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!
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
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
4. 49 Days
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
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!
3. Cloud Nine
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!
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.
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!
This tutorial breaks down the different components of the header coding, talking you step-by-step through how to customize them to your liking.
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.
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!
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.
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.
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.
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.
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.
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:
Here is a quick guide to the Toolbox! It explains the different tools used throughout these tutorials.
Finally, this is a guide to the Layers Dock!
Any questions? Go ahead and neomail me!
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.
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.
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
. 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
. 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
it onto your button. Move the texture around using the Move
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
. 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
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!
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
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.
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
, then Alpha to Selection
. This will select your text. Then, click the Select
, 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
, 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
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.
The first thing you need to do is add text using the Text
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
, 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:
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:
If you're visiting this page, it must mean you're looking to build your perfectly customized header
for your site! My goal with this tutorial is to break down the seemingly confusing header code into its basic components so you can edit it to your preferences.
If you use this tutorial at all, it would be awesome if you link back
. If it was helpful to you, it would be awesome if you could help spread the word so other people can learn the basics of header design as well. Although it's not required, it would be greatly appreciated.
Here, I've put together a very simple header code to get you started. It may look intimidating with so many components, but trust me
, you'll get the hang of it quickly. Later I will describe all its different parts. Keep in mind that not every
header needs every
single one of these components. For example, if you decide your header does not need a top border, remove the "border-top" part of the code.
Click in the box, press Ctrl, A on your keyboard and then copy and paste this code into your style tags.
property is essentially the typeface, the font, that your header will be using. When making headers, it's important to not go crazy, using fancy fonts that you downloaded yourself. The fact is that most people will not be able to view them correctly because only computers that also
downloaded those fonts will see the right typeface. Thus, I strongly
advise that you stick with basic typefaces that virtually every computer will have. Here are some common examples:
Comic Sans MS,
Pick a font family that will match the tone of your web design. Personally, for a modern look, I often like to go with a sans-serif
font like Century Gothic, Tahoma, or Verdana. For a fancier look, I prefer serif
fonts like Georgia and Times. That said, many fonts can work well for different headers. It all comes down to your preferences!
property allows you to control how large or small the text of your header will be. Generally, you want your first header (h1) to be the largest, followed by the second header (h2), and so on. There are a couple of different ways to control font-size for headers:1) Keyord Values.
This way, you describe how large you want your text with a descriptive word. The choices are:
2) Pixel Values.
This is the most accurate way I know of for designating your font size. You simple need to say "##px" and that number is how many pixels tall your typeface is going to be. It's fairly straight forward and allows you to really control the size of your header. Here are some examples:
property designates how thick the actual letters in your header are. The only options that are normally used for this property are "normal" and "bold".
This is normal text. This is bold text.
Fairly straight-forward, I think, since bold
is better when you want a bolder
look for your header! If you really want it to stand out and make a statement, bold is the way to go.
property is one way to really customize and have fun with your headers! I suggest using colors directly from your layout. I use a program called GetColor
to do this very easily. Even if the colors aren't directly from your layout, it's best to use a color that's very close. Check out this huge hex color chart (courtesy of PageTutor) for lots of different hex code options.
Although it may be tempting, when working with most layouts you should try to avoid colors that are too bright
(with a few exceptions of course! ex. if you have a dark
background, these may be okay). These can be very hard on the eyes and not very polished looking.
These colors will never look good.
I bet a lot of you even had to highlight
the text to read what it said. That is not
good thing and is something you should avoid.
property can be a fun way to really change the look of a header. This designates how many pixels separate each individual letter. You can either use a positive
number of pixels for a spread-out effect or a negative
number of pixels for a squeezed-together look. Here are some examples:
Letter Spacing is -3 pixels.
Letter Spacing is -1 pixel.
Letter Spacing is 0 pixels (default).
Letter Spacing is 1 pixel.
Letter Spacing is 3 pixels.
Letter Spacing is 5 pixels.
property allows you to control the capitalization of your headers. You can either choose "uppercase", "lowercase", or "none" (This is the default option so if you prefer this, remove the text-transform property completely.this is what lowercase looks like
THIS IS WHAT UPPERCASE LOOKS LIKE
Both ways can look nice for different reasons, and sometimes it even looks best without utilizing this property at all. Again, this choice is up to your own personal preference.
property is exactly how it sounds: it controls the height of the line! If you want to give your text a little more (or less) "breathing room" so to speak, you can adjust the line-height. Here are some examples of what this property can do (this is with size 20px font):
Line Height is 12px
Line Height is 15px
Line Height is 20px (default)
Line Height is 25px
Line Height is 30px
property allows you to coordinate your headers to the left, right, or in the center. If you choose left or right aligned, please see the padding
property below for what I suggest. Here are some examples of this text-align
property at work:
Aligned to the left
Aligned in the center
Aligned to the right
Padding Left and Right
properties create space between the left and right edges of the header and your text, respectively. It allows the text to have a little more room so it doesn't look so cramped next to the side of the header. If you have left-aligned text
I suggest having padding to the left and if you have right-aligned text
I suggest having padding to the right. It makes the header look a bit more polished and less cramped.
Here are some examples of how this works:
No left padding
20px left padding
No right padding
20px right padding
There are also padding-top
properties to allow more space above or below the text. I usually just use the line-height property to do this though.
The only time I ever use the font-style
property is to make a header italic. It is a great effect that can really change up the look of a header. Here's an example:
This is normal text.
This is italic text.
I only ever use the font-variant
property to make a header with what's called "small-caps". This is when every letter is uppercased, and the letters you capitalize are just larger uppercase letters. This effect can make your header look really cool and kind of fancy. Here's an example:
This is normal text.
This is With Small Caps.
property is another way to really transform the look of a header. The default setting will be none
(i.e. no background). This can look very nice and fluid and is probably how I style most of my headers. However, there are places where other background colors can look very nice. There are two ways that I use to change the background of a header:1) Solid color.
This is a fairly simple way to color your background and all you need to do is select a hex code. The code will look like background:#123456;
This is a way to make a header a little more unique and interesting. You can use an image background as well! Don't get too flashy or your header could come off looking very tacky; that said, a very
subtle pattern or a transparent background can look very nice and professional. Here's how to use an image background:
properties, I think, are one of the best ways to really change up a header design. You can use bottom, top, left,
borders. There are 3 components to any border: the color, style, and weight. This is what a basic border code looks like:
As always, the color is determined by a hex color code. Pick whatever you want! It's totally up to you.2) Style.
There are different styles of border available. The options are solid, dotted, dashed,
Check out examples below:
Solid Bottom Border
Dotted Bottom Border
Dashed Bottom Border
Double Bottom Border
This is how you control how thick or thin you want your border to be. The weight of the border is controlled by pixel measurements. You can take it from the thinnest, 1px, to as thick as you like. Try to make the border thicker when you want a bolder look.
First Letter Effect
This is a way that I really like to add interest to my headers. Using this technique, you can format just the first letter of each word. This is what the code would look like (with some suggested
properties to change:
See this effect in action with my own headers:
It makes it a bit more unique and can really make your headers stand out.
The most important thing in header design is to have fun and make your own unique headers. I hope this tutorial was able to help equip you with the knowledge you need to build your perfectly customized headers. Good luck and have fun!
Any questions? Go ahead and neomail me!