Home Petpage layout guides Banner guides Button guides Icon guides Miscellaneous guides General Design Techniques Designer's Corner Extras Sitely

Welcome!

My name's Turnip and I'd like to welcome you to The Tutorial Place (TTP). This site is a bit different than my usual guides because TTP is like a potpourri where you can find various tutorials on a bunch of different things, such as making layouts, how to make your text design look spiffy, and so much more!

On top of that, this site is meant to be an open platform for site owners and visitors alike. Designers can open up their own "page" at this site to post their guides or tips.

Feel free to neomail me should you have any questions or want to contribute to this project.


ABOUT TTP

Updates

Though not completely mandatory, please give appropriate credit where needed. For example, if you learned a technique or created a layout using a tutorial, be sure to link back in your credits.

Want to contribute to this guide? Check out the F.A.Q in the Extras for more details.

This site is rather image heavy due to the various screenshots and other graphics. Please allow some time for the site to fully load!

Aug.11.2014
1 new tutorial for guild layouts (check it out here)

Mar.11.2014
Minor updates here and there. There will only be updates when something new is added. Also, if you spot any tutorials that aren't listed here, be sure to send them in!

May.30.2013
1 new tutorial in General Design: Abi's Colouration Tutorial.

May.10.2013
1 new tutorial in General Design: Simple Text Design With 4 Layer Styles

May.8.2013
1 new tutorial on designing text (find it in the General Design Technique section)
1 new article in Designer's Corner dealing with text placement on banners.
I'm looking for proofreaders so if you have spare time, let me know!
Just as a reminder, this site is a work in progress which means minor errors here and there. Also, I'll be uploading tutorials in bulk, rather than one at a time. As always, feel free to suggest new tutorials.

May.7.2013
Added 3 guides to Miscellaneous Guides (all of them dealing with pixels) and one to the Designer's Corner.

Apr.28.2013
+1 suggestion
New tutorial in Petpage layouts: Creating a Minimalist Layout Design

Other guides I've written:

Do you offer requests at your site? Read this guide to learn more about how to offer high-quality service!

Thinking about opening your own review site? The first of its kind, this is a guide that goes through various aspects of review sites, from constructing your rubrics to the "key ingredients" of high-quality reviews.

This in-depth guide goes through numerous aspects of button making, from choosing the appropriate font to cropping for a focal point.



Designer's Corner


Get the inside scoop on how other site owners designed their graphics! These aren't really guides but more like articles on how a designer went about creating buttons, layouts, you name it.

Want to create your own guide or tip page? Fill out the form below and send it in!


Design articles available:

Text Placement on Banners

Need some tips on where to place your text on a banner base? This article gives you a bunch of examples and goes through terms like focal point and spacial alignment.

Written by: Turnip

Designing Moh's Layout

In this article, I talk about how I went about editing the main image for Moh's custom layout (or more specifically, the purpose and usage of textures and how it changes the original image).

Written by: Turnip


Design articles on other petpages:

Why Shade?
Site: /~sugarrush#t4

Why do pixels need shading? Sophia shares her tips and expertise in this short article.

Written by: Sophia




Text Placement on Banners

In this guide, you'll learn about focal points and how it plays a role in determining appropriate text placement. First off, what is a "focal point"? Take a look at the banner below:

The focal point is the main focus or highlight of your image. In this case, the focal point is the librarian because she's the main (or most important) part of the banner.

Where the focal point is on your banner is super important because you have to use this to your advantage when placing text on your image. I'll give you some examples of banners and provide some comments below.

Text placement: Very poor

The text placement on this banner is very poor for a variety of reasons. First, remember how our focal point is the librarian? The text placement is covering the focal point, which isn't great. Also, take a look at the left half of the banner base. There's all this empty space that's not being used and it doesn't contribute anything to the overall banner. Leaving large empty areas makes the banner look uneven and awkward. Note how the majority of the banner's "content" (I.e. focal point and text) are both on the right. This makes the banner look too busy on the right side yet too empty on the left.

If I wanted to leave the text there, what can I do? I can crop the image in a way that reconfigures the placement of the focal point:

Side note: Just ignore the border and focus on the rest of the banner.

As you can see from the example above, if the banner was cropped so that there aren't any empty spaces on the far left, then the text placement would be perfect. By cropping the banner in such a way, I essentially created a new focal point: the librarian's face (rather than the entire character). Thus, it's completely appropriate to put the text on the bottom half of the body because it's not the focal point any longer.

Text placement: Poor

Though not as bad as the previous example, the text placement still doesn't work that well. Again, part of the librarian is being overlapped with text. In the image above, I highlighted what I deem is the "focal point". You might be asking "what about her wing? Shouldn't that be a part of the focal area as well?" The answer is "sure, if you want it to be". Because I have a lot of text (ex. Turnip's Tutorial) and the wing isn't an essential part of the focal image, I can choose whether or not it's important to have.

The banner above isn't entirely that bad. The word "Turnip's" seems to work well as it's in an empty part of the banner. Also, the word "Tutorial" doesn't cover up that much of the focal point. Still, there is a lot of empty space that can be used (top left area).

Text placement: Great!

Text placement also depends on the amount of space you have and the alignment. In this case, we have about 50% of the banner space we can use for text (on the other hand, if you decide that the wing is something you don't want to cover with text, then you have about 30-40% of the base for your text).

Next, is the alignment. In the banner used, the space for our text is beside our focal point, meaning our alignment is vertically situated. Contrast that banner with this one:

In the example above, it wouldn't make sense to put text on top of each other like this:

Turnip's
Tutorial

This is because there isn't much of a "focal point" beside the bottom row of hearts.

Instead, because the image is horizontally aligned, we would simply write our text in a straight line like this:

Turnip's Tutorial

Since the bottom row of hearts is what we want to emphasize, the text would be placed near the top half.

Going back to this example, another reason why the text works is that is uses space effectively. Since the background portion isn't what I'm trying to emphasize, then it makes sense to use that area and cover it up. When you look at the banner, the two main focuses are the text and the librarian.

Example #2

Let's do one more example with this banner (drag and drop for full view):

The faerie holding the pie on the far right is the main focal point. However, if you look carefully you'll notice a second focal point: the faerie on the far left playing the flute. Because the second faerie is smaller and less noticeable, she should not be considered the primary (or main) focal point.

Text placement: Great!

Wait a minute, I'm covering the focal point. Shouldn't the text placement be "poor" instead? The answer is "nope". Remember how I said the second faerie playing the flute is not an important part of the banner? The faerie holding the pie is and that's why the text placement works perfectly well with the banner.

Text placement: Great!

What if you wanted to use more than one focal point of an image? In that case, make sure you don't cover either of them. The text placement above emphasizes multiple focal areas of the banner (I.e. both faeries). The two characters also frame the text, which emphasizes it even more.

Text placement: Very poor

If I only want to use one focal point but not the other, I tend to put text on the secondary focal point to cover it up and make it less noticeable. However, in the banner above that is not how you'd want to go about doing that. Note the large amount of empty space between the text and the focal point (faerie holding the pie).

Because I only want to emphasize the primary focal point, I have to take in account the percentage of the banner I can devote to text (about 90%). Thus, writing text out in a vertical fashion (beside each other like in the first banner) is the more appropriate choice.

Final Tips!

- These are general guidelines. Be sure to experiment with your own banners and see where text placement is most appropriate.

- Keep in mind that your focal point is an area where text shouldn't overlap.




Designing Moh's Layout


In this article, I'll be taking a look at one of the custom layouts I created over at The Lunch Box. Specifically, I'll be talking about texture placement and purpose.

Moh's layout was a custom request for a client and given the image the site owner wanted me to use, I immediately knew what sort of effect I wanted. I love the image chosen and right from the get go, I wanted to emphasize dark shades of brown and focus on powering up the warm colours.

Here's the layout without any image processing:

My goal with this layout was to create a sort of "blend" effect where the focal image also acts as the main part of the background. I decided to duplicate the image and flip it horizontally to create a mirror effect. This was done to create some sense of continuality and to fill up some "empty" space above the content area. Here's what I get:

I was sort of lucky since the rays of light worked in my favour. It adds even more emphasis on that part of the layout.

When it came time to add textures, I had to look at what part of the layout I wanted to emphasize, but also what part of the layout I want to minimize attention. Take a look at this:

The part highlighted in red represents the area of the layout I want to make less noticeable. Why? Because it's blurry. It's a bit unlucky that the central area of the image is naturally blurry but I can use textures and apply lighting effects in a way that emphasizes the outer areas:

The texture I used was a bokeh or "light" texture. The background colour of the texture was green (almost the same shade as the green found in the original layout image). Most of the bokeh textures I use are set to "Screen" because I only want the bokeh effect and I don't want to change the colour of my image. Here, I want to edit the colours so I set my texture layer to "Overlay" which is great if you want to incorporate the colour of your texture into your image.

In the screenshot above, I used red arrows to point out where the bokeh lights are sitting. I strategically placed them to emphasize certain tree branches (in other words, the outer rim of the blurry area). It directs visitor attention to that area, rather than the blurry spot.

Remember before when I said I wanted to emphasize the bold, brown shades and make the image colours "pop" more? This texture does that as well! For the most part, if I only want the light effect, I mostly use bokeh textures that are on a black background. If I want a "two in one" effect of light and colour, I choose a more colourful bokeh texture.

If you're having a hard time following what I mean by "black background" or "coloured bokeh", visit Detail's boken texture section. For instance, the first two rows of textures are "coloured bokeh", meaning that you do get a noticeable lighting effect, but there's also a lot of colour as well. Under the first two rows, notice how some bokeh textures are on a completely black or dark background. When you set such textures to "Screen", the dark background completely "fades" and what you have left is the light texture.

Moving on, I'm one of those people that has a "staple" texture that I like to use as a finishing effect. I apply it at Soft Light, 100%:

The texture I used was an abstract texture that was brown in colour (again, a perfect colour tone for the image). Applying the texture, you'll probably notice how it deepends the brown colours even more but it also makes certain tree branches look a bit "3D".

And that's it! I love the original image the site owner chose for their layout so I didn't want to mess around with it too much. I only used two textures but as you can see, it makes a huge difference in terms of the colour and the lighting effects. Next time you add textures to your graphics, remember that they can be used not only as a "stylish" addition, but also in a technical aspect.




Extras



F.A.Q.
Have a question about this site? It might be answered here.

Suggest a new tutorial
Looking for a specific tutorial? Send in your suggestions here. Also, if you're a designer, take a look at the suggested topics and see if you can grant someone's wish!

Coming Soon
Want to take a look at some guides coming to TTP?


Coming Soon

Want a sneak peek at some future content? Here are some tutorials/tips designers are working on!

If you want to let others know what you're currently working on, click the link below and I'll get it added.



Turnip:



New Tutorials

Didn't find what you were looking for? Why not send in your ideas for future content! Your ideas will be added to the list below. Who knows? Maybe a designer will stumble on this page and write the tutorial you need!

Suggestions sent in

Here are all the ideas sent in so far with a brief blurb about the tutorial and the person who sent it in.

If you're a designer, take a look at the list below and see if you can write about any of the topics.

Ideas sent in:

Interested in writing one of the tutorials above? Send me a neomail and let me know. There's no need to fill out a form yet (you'll only have to do that once the tutorial is complete).




F.A.Q.

Still confused? Just give me a shout and I'll help you out:

ABOUT THE SITE

What does "open platform" mean?
It's just how I like to describe this site. Unlike other tutorials, I want to focus on providing designers with a platform for posting their own tutorials or tips. I often see a lot of designers put their tips or guides as "extras" at their site. This is perfectly fine, but often visitors miss these valuable resources. The purpose of allowing designers to "create a page" at TTP is that it helps bring all of these tips/guides to one place.

What are the differences between a "guide/tutorial" and a "tip"?
Guides and tutorials are much more in-depth. They're longer and provide much more detailed information. Tips (and "hints") are simply lists of valuable information about a certain topic. They're not as in-depth as guides. Unlike guides which are geared towards completely new designers, tips are more useful for those who just want to touch up on their technique.

Are there any differences between "guides" and "tutorials"?
Not really. I tend to use the two terms interchangeably.

In the main Menu, what does "General Design Techniques" mean?
These are general guides/tips that aren't necessarily restricted to other areas, such as layouts. For example, colouring guides may be included in GDT because it can be used for all types of graphics. Technical tutorials, such as cropping, can also be considered a "general technique" because it can be used for layouts, banners, and other graphics.

Can you please list my guide?
Keep in mind that I only "list" guides/tips that aren't full sites. If you have a tutorial or list of graphic-making tips in your "Extras", then feel free to contact me and I'll take a look at your page. In an effort to keep this site as helpful as possible, only higher quality tutorials/tips will be listed.

SUBMITTING YOUR GUIDES/TIPS

How do I send in my own guide/tips?
Underneath the Menu, click on the subject area that you wish to contribute to. For example, Layouts. On the main page, you can find a form and a neomail link.

Do I have to own a site in order to send in a guide/tip?
Nope! Anyone can send in their own guides/tips as long as you feel you're knowledgable enough to do so.

Can I submit tutorials or tips I've already written at my own site?
Of course! Though I strongly recommend altering it in some way, feel free to submit your guide.

Can I collaborate with another designer for my tutorial?
Absolutely! If you want to co-write a tutorial, go ahead. Just make sure that both parties are properly credited (in the form, give both usernames).

What is the minimum length of a full guide/tutorial?
There aren't any strict rules concerning minimum length, but keep in mind that guides/tutorials should be longer than a simple list of tips. Somewhere around 800 words would be great!

What is the minimum length of a list of tips?
Again, there aren't any strict rules. For the purpose of this site (and to try to be as helpful to visitors as possible), please send at least 5 well developed tips.

My list of tips is quite long. Should I turn it into a guide?
That's completely up to you. If you want to keep your tips as a simple list, then that's perfectly fine. On the other hand, if you think your list is getting a bit out of hand, you can always try shortening it or turning it into a full length guide.

Before I send in my guide/tips, what do I need to do?

What is the guideline for screenshots?
If your guide includes screenshots, please make sure that they're are not over 700 pixels in width or length. The more large images added to this site, the longer the loading times. Try to crop your screenshots so that it only focusses on the important aspects. Feel free to add additional text to your screnshot as long as it's easy to read.

Here is an example of a high-quality screenshot (drag and drop for full view):

Here is a very low-quality screenshot:

The second image is an example where the image is much too small. Even though there are arrows which are really useful for pointing things out, the settings and other numbers are tiny!




Miscellaneous guides

These guides didn't really fit into any other category so here they are! They include tutorials on things like shields and backgrounds.

Want to create your own guide or tip page?
Fill out the form below and send it in!


Guides available:

Title of Guide

A short description of the guide will be written here.

Written by: Guide writer
Program: The image program the guide/tip is for
Length: How long is the guide/list of tips?
Status: Is the guide complete or in progress?

Fading a Background

Have a background pattern that's too harsh? In this tutorial, learn how to "fade" the intensity of the background so that it looks nicer! At the end of the tutorial, I also talk about how to darken a background.

Written by: Turnip
Program: Photoshop 7
Length: Tutorial
Status: Finished

Re-colouring a Background

Found a nicer background but it's not in your colour? This tutorial shows you my technique for re-colouring background patterns.

Written by: Turnip
Program: Photoshop 7
Length: Tutorial
Status: Finished

Guides on another petpage

Guild Layout Tutorial
Site: /~Nendria

Ever wanted to know how to start making your own guild layouts?

Written by: Jewlz
Program: GIMP
Length: Full length
Status: Finished

Coloring tutorial
Site: /~sugarrush#t3

After you finish a pixel outline, Sophia provides tips on how to colour it!

Written by: Sophia
Program: None
Length: Tips
Status: Finished

Starting A Pixel
Site: /~sugarrush#t2

In this short tutorial, learn about how to start the outline for your pixel!

Written by: Sophia
Program: None
Length: Tips
Status: Finished

Pixelling basics
Site: /~sugarrush#t1

In this tutorial, Sophia writes about the fundamental basics of pixelling.

Written by: Sophia
Program: None
Length: Tips
Status: Finished

Creating a Basic Shield
Site: /~Cenouritita#basic

Learn how to create a simple shield with an image.

Written by: Candie
Program: GIMP
Length: Tutorial
Status: Finished

How To Outline Images
Site: /~Cenouritita#outline

Create a spiffy border for your shield's image.

Written by: Candie
Program: GIMP
Length: Tutorial
Status: Finished

Blending Colours on a Shield
Site: /~Cenouritita#blend

This tutorial shows you how to create multi-coloured shields.

Written by: Candie
Program: GIMP
Length: Tutorial
Status: Finished

Make your own Signature
Site: /~Xross#tut1

Create a spiffy signature banner for your forum posts.

Written by: Kuroida
Program: Photoshop
Length: Tutorial
Status: Finished

Introduction To GIMP
Site: /~quinsai#gimpintro

This aptly named guide introduces you to GIMP.

Written by: Monky
Program: GIMP
Length: Tips
Status: Finished

Ray of Light
Site: /~ilvira#rol

Create an astounding light effect for your next graphic.

Written by: Nienke
Program: Photoshop
Length: Tutorial
Status: Finished

Creating a PNG
Site: /~ilvira#psd

Learn how to cut an image out and create your very own PNG.

Written by: Nienke
Program: Photoshop
Length: Tutorial
Status: Finished




Re-colouring a Background

Program: Photoshop 7 // Difficulty: Easy

So, you've found the perfect background pattern that fits your petpage. Problem is, the colour doesn't match your petpage! Looks like you'll have to find another backgroundÖ

Wait a minute! Before you throw away that perfect pattern, why not edit the colour? In this tutorial, I'll show you an easy way in which you can change the colour of the background.

Open up your background pattern in Photoshop.

First things first, let's open up the background you'll be editing. Here's the image I'll be using throughout the tutorial:

Adding a layer style.

In the Layers win.dow, take a look at the bottom and click the Add a layer style button. In the list that pops up, choose Color Overlay. Here's a screenshot:

When you choose "Color Overlay", the Layer Style win.dow will pop up. But, hold on. What happened to our image? Our background is now completely red! Don't worry though, because we'll be changing the settings. Take a look at this screenshot below:

(drag and drop into the address bar for full view)

Instead of the default Blend Mode setting at "Normal", we'll be changing it to "Color" instead. When you do this, you're essentially telling the program, "Look, I want you to cover up the original colour of the pattern, not the pattern itself."

Here's a screenshot of our progress so far:

(drag and drop into the address bar for full view)

Now, you're simply going to change the colour around until you find something you like. You can do this by clicking the colour picker. Here's a screenshot of what I mean:

(drag and drop into the address bar for full view)

I think I'll just stick with the original red default colour. Now, for quick colour edits, you'll probably just want to edit colours using the Color Picker. However, you can go a step further and blend the new colour layer with the colour of the original pattern. See that Opacity bar underneath the Blend Mode? You can use that to edit colours as well. Here's an example:

(drag and drop into the address bar for full view)

When I lowered the opacity of the red colour layer, the original black colour showed through a bit more. What I'm left with is a slightly deeper red colour.

After editing your colours, click "OK" to exit the Layer Style. Save your image, upload it, and it's ready to be used as your background!


FINAL NOTES:

- What I like to do is use the Color Picker win.dow to find a basic colour, whether it's blue, green, red, whatever. Then, I play around with the opacity to change the shade of the colour. For instance, in this tutorial I went with the default red colour. By changing the opacity and blending the red colour layer with the original image, I edited the red shade so that in the end, it was a slightly deeper maroon colour.
- Changing the opacity is an addtional step. It's nothing major and most of the time, it isn't needed if you're using the Color Picker anyways.




Fading a Background

Program: Photoshop 7 // Difficulty: Easy

In this tutorial, I'll be showing you how to fade a background image. What do I mean by "fade"? Well, let's say you've found a background image you like. However, after putting it in your coding and viewing your site, you realize that it might be a bit too dark for your liking. There are probably many different ways to do this, but here's my technique.

For this tutorial, I'll be using this background image below:

I could just use this image as is, however, I want the background to be less noticeable. Also, I like the pattern and there's no guarantee that I'll find a lighter background at another site. Instead, I'll just go through a few simple steps and edit the image.

Open up your image in Photoshop and add a new layer.

When you open up your background image in Photoshop, there should only be one layer - the image itself. We're going to start by making a new layer. You can do this by pressing Shift+Ctrl+N and clicking "OK", or you can just go to your Layers win.dow and click the "Create a new layer" button at the bottom. Here's a screenshot below:

(drag and drop into the address bar for full view)


To keep track of our progress, let's rename this new layer the "White Layer".

Fill the white layer!

You're probably wondering why it's called the "White" layer. That's because we're going to fill it up with a white colour. First, choose the Paint Bucket Tool by pressing G. You can also just click on it in the Tools win.dow. Next, we're going to make sure our foreground colour is white. Take a look at the screenshot below:

On the left side, I've highlighted the foreground and background colour. The default colours are always black (for foreground) and white (for background). Since we want white as the foreground, we'll need to change this. There are two ways you can do this. First, see that little two-headed curvy arrow? If you click it, it'll switch the two colours around so that white becomes the foreground colour (with black becoming the background colour). This is the easiest method. Or, you can click black foreground square, which will make a Color Picker win.dow pop up. There, you can set the colour to white as indicated in the screenshot above.

Now that we have white as our foreground colour, go ahead and fill in the White Layer. As you'll probably find out, filling in the White Layer means you've completely covered up the background image. Here's a screenshot of the result:

Get ready to fade!

Now's the part where you decide how "faded" you want your original background to be. With the "White Layer" selected, adjust the opacity settings. Here's a screenshot of what I mean:

The lower the opacity of the White Layer, the less fading effect you'll get. On the flip side, if you only lower the opacity by a small amount, like 20%, then your background pattern will be much lighter than the original. For this tutorial, I'll go right in the middle and set the White Layer to an opacity of 50%.

After setting the opacity, merge the layers by pressing Shift+Ctrl+E. You can also go to the top, click "Layers" and select Merge Visible. A screenshot of this process is provided below:

(drag and drop in the address bar for full view)

After you've merge the two together, you should only have one layer showing up in your Layers win.dow Now, just save the background, upload it to your favourite image host, and it's ready to use!


What if you wanted to darken an image instead?

This tutorial was all about fading an image and getting it to be lighter than the original. What if you wanted it to be darker instead? Let's say you found the perfect pattern but the image is way too light and you want to make the background stand out a bit more. In this case, what you'd do is open up your image, replicate the original layer, and set this top layer to multiply. You can replicate the bottom layer by going to Layers at the top, then choose Duplicate Layer. Or, you can simply press Ctrl+J.

The more times you replicate and set to multiple, the darker the original background becomes.




General Design Techniques

On this page, you can find various in-depth guides and tips on various design techniques. These are "general" in terms of scope so they can be applied to various graphics, such as layouts or icons.

Want to create your own guide or tip page?
Fill out the form below and send it in!


General guides available:

Title of Guide

A short description of the guide will be written here.

Written by: Guide writer
Program: The image program the guide/tip is for
Length: How long is the guide/list of tips?
Status: Is the guide complete or in progress?

Abi's Colouration Tutorial

Want to give your images a soft, glowing look?

Written by: Abi
Program: N/A
Length: Tutorial
Status: Finished

Simple Text Design With 4 Layer Styles

Want use a text design that's simple yet elegant? This style looks best on simple/minimalist layouts and helps you create a fresh, clean look!

Written by: Turnip
Program: Photoshop 7
Length: Tutorial
Status: Finished

Gradient Text Design

Want to learn a simple technique for making your text stand out? This tutorial shows you how to do a gradient border and text style.

Written by: Turnip
Program: Photoshop 7
Length: Tutorial
Status: Finished

Using the Pen Tool to Create Wavy Lines

Want to create a nice, wavy border for your image? The Pen tool may seem hard to use, but it's really simple!

Written by: Turnip
Program: Photoshop 7
Length: Tutorial
Status: Finished

Adding a "Shine" Effect

This simple yet effective technique can really put the spotlight on a specific area of your layout.

Written by: Turnip
Program: Photoshop 7
Length: Tutorial
Status: Finished

Dark Blue Colouring Technique

This technique teaches you how to colour an image so that the end result has a sharp, dark blue tint.

Written by: Turnip
Program: Photoshop 7
Length: Tutorial
Status: Finished

A Mini-guide on Textures

Using textures the right way is harder than you think! In this short guide, I take a look at various layer settings and show you the differences between them.

Written by: Turnip
Program: Photoshop 7
Length: Tutorial
Status: Finished

Applying Textures To Graphics

In this guide, I show you how I'll be applying textures to my graphics.

Written by: Turnip
Program: Photoshop 7
Length: Tutorial
Status: Finished

Guides on another petpage

How to Texturize
Site: /~ealdros#t3

This tutorial helps you choose which textures will work best with your image and how to apply them.

Written by: Nina
Program: Photoshop CS6 Extended
Length: Tutorial
Status: Finished

Creating 3D Text
Site: /~quinsai#3dtext

Make your text stand out by giving it a neat bevelled appearance.

Written by: Monky
Program: GIMP
Length: Tutorial
Status: Finished

Texturizing
Site: /~ilvira#texcolor

Learn more about using textures, what settings to set them to, and where to place them.

Written by: Nienke
Program: Photoshop
Length: Tutorial
Status: Finished

How To Create Smooth-like Images
Site: /~Jeonyi#1tut

This easy tutorial shows you how to create smoother, more vibrant images.

Written by: Sandy
Program: Photoshop
Length: Tutorial
Status: Finished

Colouring: "Rage" technique
Site: /~XxNight_ProwlerxX110#rage

Dark Light's Rage colouring technique will give your graphics a warm and bright look.

Written by: Tina
Program: GIMP
Length: Tutorial
Status: Finished

Colouring: "Vintage" technique
Site: /~XxNight_ProwlerxX110#vintage

Looking for a vintage look for your graphics? This tutorial at Dark Light will help!

Written by: Tina
Program: GIMP
Length: Tutorial
Status: Finished

Colouring: "Grime" technique
Site: /~XxNight_ProwlerxX110#grime

This colouring technique over at Dark Light shows you how to achieve a grimy, greenish look with your graphics.

Written by: Tina
Program: GIMP
Length: Tutorial
Status: Finished

Colouring: "Dreamer" technique
Site: /~XxNight_ProwlerxX110#dreamer

This colouring technique over at Dark Light will teach you how to create a "dreamy" effect with your graphics.

Written by: Tina
Program: GIMP
Length: Tutorial
Status: Finished

Colouring: "Sweetness" technique
Site: /~XxNight_ProwlerxX110#sweetness

This colouring technique over at Dark Light shows you how to add a burst of bright pink colours to your image.

Written by: Tina
Program: GIMP
Length: Tutorial
Status: Finished




Abi's Colouration Tutorial


This is an image tutorial so drag and drop it into the address bar for full view (or right click and choose View Image).





Simple Text Design With 4 Layer Styles

If you have a layout that's minimalist in style and want to keep your text design just as simple, here's one method that I've been developing.

In this tutorial, I'll show you how to add four different layer styles to your text, resulting in a simple yet elegant design. You don't have to sacrifice style in order to gain simplicity! An example of the style I'll be showing you can be seen in the banner below:

Before you begin…

After some experimentation, I find that this style only works best with large fonts. Sorry button users! This style doesn't work well for small fonts because you need to use fonts with more "width". Along the same lines, it looks best with blockier fonts (or those that are thicker).

This text design works best on simpler backgrounds. In the banner above, the reason why the text design worked is because there's a faded white rectangle which makes the background appear less busy and noticeable.

Let's get started!

Step 1

Here's my "plain" text that I'll be editing:

I've chosen a blocky font because it'll be easier to show you the specific layers I'll be talking about.

Go to your Foreground/Background Color tool and change your colours to whatever you want your gradient to be. It really depends on your layout/image but I tend to choose one colour but two different shades: dark and light. However, in this tutorial, I'll be choosing two different colours to match my banner's colour palette.

If this is your first time designing gradient font, I strongly suggest you keep things simple and only use one colour as well.

Important note: For my tutorial, I'm just designing the text from the ground up. However, if you're styling text for a layout or banner, make sure you use appropriate colours (more about this in the "Final Tips" section).

To edit the Foreground or Background Color, just click on the squares to bring up the Color Picker win.dow.

Go to your Layers Window and make sure the layer with your text is highlighted in blue. Go to the top of your win.dow, click Layers, go to Layer Style, and select Gradient Overlay.

An alternate route is to look at the bottom of your Layer Window, click on the icon with the fancy "F" in a circle (hovering over it will say "Add a layer style"), and choose Gradient Overlay.

The default gradient colours are black and white, which isn't exactly the most interesting or appealing colours you want for your layout/banner/button/etc. Beside the coloured bar is an arrow that you can click. This makes a menu drop down. Select the first box (it should say "Foreground To Background" when you hover over it):

Here's what I have:

I chose a navy blue and teal for my colours. I'll be keeping my text design relatively simple, so I'll stick with the default Linear style (in other words, one colour at the top, the other at the bottom).

Step 2

Whenever you add a new layer style, you'll get there by clicking "Layer" at the top of your win.dow, choosing "Layer Style", and then whatever final option you want. Since this is quite repetitive, I'll leave it out of the rest of the tutorial and say something like this…

Add a Bevel and Emboss layer. I find that with thinner handwritten/cursive fonts, the Depth of your bevel effect needs to be much lower than when using a blocky font. Here are my settings:

Using red arrows, I pointed out some areas where you'll want to experiment.

Here's what I have so far:

Bevel is a great way to make your text stand out. It gives your text more dimension and depth. However, the next step sort of "deletes" the majority of this effect by combining it with an inner shadow. You might think that the bevel is unnecessary but there is a difference between keeping it and deleting the layer style.

Step 3

Add an Inner Shadow. This is an important step but also the trickiest. In your Layer Style win.dow, you'll want to edit the colour of your shadow. The default colour is black, but I always recommend that you edit the colour to make it match your text. My gradient overlay colours are navy and teal, so I want to choose a blue shade that's darker than both.

After applying my layer, this is what I have:

Though it might not seem like a difficult step, you have to be careful because the inner shadow is what makes the text "pop". If you're using a thinner, cursive-style font, then the "size" of your inner shadow can't be too big or else you'll wash out the gradient colours.

Take a look at the example below. The size of the inner shadow is way too large. See how the gradient colour is no longer visible? It just doesn't look as good!

Step 4

Lastly, our "finishing" touch. Add a Drop Shadow layer style. Again, you'll want to edit the colour so that it matches your text. Try to choose the same colour as your Inner Shadow just so your text looks more unified in the end. Here are my settings:

And here's my final result:

Looks pretty spiffy, huh? Here's another example using cursive font:

In the purple example, I had to lower the opacity and size of the inner shadow so that the gradient colours (dark and light purple) was still visible.

Final tips:

This text style works best on simple backgrounds (lightly patterned or solid coloured). I find it doesn't look that great on a background image since the soft drop shadow won't stand out (the text itself won't stand out either).




Gradient Text Design

One of my favourite text styles to use is a gradient. Not only does it look super spiffy, but it's also extremely easy to do!

You can use this style for pretty much anything, from layouts to buttons. Here are some examples where I've used gradient text style in my own work:

For the banner, the gradient colours are used for the main text (white is the border colour). It's the opposite for the icon where the gradient is used for the border, rather than the main text. The button is another example where the gradient is used for the border. The difference here is that the gradient direction is different. For "Zig Zag", the gradient colours went from left to right whereas for the button, the gradient colours go from top to bottom. Finally, the layout is another example of gradient for the main text.

In this tutorial, I'll be going through both gradient styles: gradient border and gradient text. If you want to skip to the gradient border tutorial, Ctrl F and type in GDT2 to skip down.

Gradient Text Tutorial

This is the "plain text" I'll be editing for the tutorial. I've chosen to use two different styles of font (cursive and block).

Step 1

Go to your Foreground/Background Color tool and change your colours to whatever you want your gradient to be. In general, I tend to choose one colour but two different shades: dark and light. If this is your first time designing gradient font, I strongly suggest you keep things simple and only use one colour as well.

Important note: For my tutorial, I'm just designing the text from the ground up. However, if you're styling text for a layout or banner, make sure you use appropriate colours (more about this in the "Final Tips" section).

To edit the Foreground or Background Color, just click on the squares to bring up the Color Picker win.dow.

Step 2

Go to your Layers Window and make sure the layer with your text is highlighted in blue. Go to the top of your win.dow, click Layers, go to Layer Style, and select Gradient Overlay.

An alternate route is to look at the bottom of your Layer Window, click on the icon with the fancy "F" in a circle (hovering over it will say "Add a layer style"), and choose Gradient Overlay.

The default gradient colours are black and white, which isn't exactly the most interesting or appealing colours you want for your layout/banner/button/etc. Beside the coloured bar is an arrow that you can click. This makes a menu drop down. Select the first box (it should say "Foreground To Background" when you hover over it):

Step 3

Here's what I have with my text (I choose dark and light purple for my colours):

The default style of the gradient is "Linear" (in other words, one colour near the top blends to your second colour near the bottom).

In your Gradient Overlay win.dow, you can change the style by clicking the menu underneath your gradient colours. Here's an example of a Radial style:

Looks pretty spiffy, right? I find that Radial looks best when you use one colour in a dark and light shade.

Spiffy Tip! What if you want to "switch" the positioning of your colours? For example, what if I wanted dark purple near the bottom and light purple near the top? In the Gradient Overlay win.dow, click on "Reverse" next to your coloured bar.

Step 4

And that's pretty much it! Experiment with other settings such as Angle and Scale and see what those do.

Remember the difference I pointed out between the icon and button example? For Zig Zag's icon, I changed the angle of the gradient overlay to 0 degrees (making the gradient go from left to right).

Here's an example. My Foreground Color is pink and my Background Color is blue. Using the Linear gradient style, I set my angle to 0 degrees.

See the bit of purple in the middle? That's what happens when two different colours "blend" together. If you only want to stick with one colour, it's best to choose two different shades of that colour (ex. light and dark pink). If you don't mind additional colours being added, you can try different colours (ex. pink and blue).

Of course, you wouldn't leave your text with a simple gradient because most of the time, this isn't enough to make it stand out from the rest of your image. Here's what some further editing got me:

Like this style? Here were my settings:

Drop shadow:

Inner shadow:

Border:

Spiffy Tip! Though you can feel free to use my exact settings (credit is appreciated), I highly encourage you to experiment on your own! You never know what great style you'll stumble upon. See that example above with the pink/blue gradient? That's one style I developed (I call it "Metalic Shine" because it's super bright and noticeable). Following tutorials is a great way to start developing your own techniques!

GDT2: Gradient Border Tutorial

Step 1

If your image is quite colourful and busy, I suggest using plain white text with a gradient border to make it stand out more.

Like in the previous tutorial, select your colours for Foreground and Background. Go to Layers near the top of your win.dow, select Layer Style, and choose Stroke.

In your Stroke win.dow that pops up, go to Fill Type and change it to Gradient.

Like what you did in the previous tutorial, change your Gradient colours. Here's what I have:

Step 2

The text isn't looking that great for many reasons. First, let's lower the width of the border. In your Stroke win.dow, look near the top for the "Size" option. I'm going to lower mine to 2 pixels.

Spiffy Tip! In general, blocky fonts look best with a border around 2 or 3 pixels. San serif, cursive fonts, and anything that is "thinner" looks best with 2 pixels. Small fonts (like the ones you would use for buttons) look best with 1 pixel. Don't go over 1 pixel for small font!

Step 3

If your text colour wasn't white to begin with (mine is black), take this time to change it. Go to Layers, select Layer Style, and choose Color Overlay. Click on the coloured rectangle and drag the colour to white (or type in FFFFFF in the # option near the bottom). Here's what I'm left with:

After some further editing here's what I have:

Want this style? Here were my settings:

Drop shadow:

Bevel and Emboss:

Final Tips

Experiment with your gradient colours. Try not to choose two totally different colours because it may look a bit weird in the end. In the example above where I used a pink and blue gradient, an unintentional third colour came out of it. If I had some purple shades in my layout, I would leave it like that. However, if the purple colour doesn't match my layout or banner, I would try to choose different colours for my gradient.

Make sure your colours match your image. For example, if you're designing your text for a layout (which uses mostly green, blue, and dark purple, you wouldn't choose pink and light purple because this wouldn't work well with your layout).




Using the Pen Tool to Create Wavy Lines


Examples of layouts where I used the Pen Tool to create wavy lines:

The Pen Tool (P) may very well win the vote for "Most Hated Photoshop Tool" but that's just because it's hard to get into and understand. Once you figure out the basics, it's super easy to use!

I use the Pen Tool mostly to create wavy lines in my layouts (as seen above). However, you can use it just about anywhere. In this guide, I'll show you how to create a wavy border for an image.

Step 1

Open up your image in Photoshop. Here's what I'll be using:

In the screenshot above, I've placed my image in a larger win.dow. The grey "border" you see is actually the background which is 669 pixels by 395 pixels. The image is 628 pixels by 338 pixels.

Click the Pen Tool (P) in your Tools win.dow. In the Options win.dow at the top, click the second option as indicated in the screenshot below:

This is the Paths option.

Step 2

Now it's time to draw the "line". What you want to do is click outside of the actual image. Since I want my "wavy" line near the bottom, I create the line near the bottom:

As indicated by the red arrows in the screenshot above, both of my points are outside of the image boundaries. This is because we don't want to run into any troubles later on when it comes time to delete parts of the image.

Step 3

Go to your Tools win.dow and select the Direct Selection Tool (A). This should be directly above the Pen Tool. If you currently see the Path Selection Tool instead, just right click on the image and choose the tool you want.

Go back to your layout image. Near the left edge of your image, right click with the Direct Selection Tool and from the drop down menu, click Add Anchor Point:

You'll see a new little "dot" appear on your line. Click on the largest one and drag it upwards a bit.

Notice how the line is beginning to curve.

Step 4

Go a few centimetres down the line. Again, right click using the Direct Selection Tool and add an anchor point.

However, this time move the large dot in the opposite direction. Since our first dot was moved upwards, we're going to drag our second dot downwards. In the screenshow below, I tracked the movement of our second anchor point in the white boxes:

Continue creating anchor points until you reach the end of the line.

Step 5

In your Layers win.dow, create a new layer above your image.

Switch to your Brush Tool (B). On the Options win.dow at the top, click the brush type. Choose the 1-pixel brush. Don't select any of the brushes with the soft edges. This will give the image a wonky, "blurry" border. What we want is a smooth border so the first few brushes in the default menu will give us just that. Make sure it's 1 pixel in size.

Step 6

Again, make sure your new Layer (the one you created) is above your image layer and highlighted.

In your Layers win.dow, click the "Paths" tab near the top. Then, right click on Work Path. From the menu that drops down, select Stroke Path. Make sure the tool selected is "Brush". Then, click OK. That's a lot of steps to follow so here's a summary:

Step 7

In your Layers win.dow, click the "Layers" tab. The new layer you created now contains the "wavy line". To get rid of the Pen markings, select your Pen tool and choose "Shape layers" in your Options win.dow near the top.

Here's what I have:

Spiffy Tip! The colour of your line is based on the Foreground Color. Make sure it's a colour that you can easily see against your image.

Select the Magic Wand Tool (W). Click the area below your wavy line. This highlights everything below your line.

Spiffy Tip! This is why you want your Pen line to exceed your image boundaries. If your line doesn't completely cut off the bottom portion of the image, you can't use the wand to select this area.

Step 8

While the bottom of your image is being selected, go to your Layers win.dow. Click on the layer that has your image.

Then, Edit - Cut (or Ctrl X).

In your Layers win.dow, delete the layer with your wavy line or simply click the "Eye" to hide it.

Spiffy Tip! I like to keep all of my layers just in case I need it later, so I always "hide" it rather than delete it outright.

And you're done! Here's what I'm left with:

I've added a drop shadow to emphasize the wavy line to show you how it looks.

Final tips:

- Use these wavy borders sparingly. Creating too many wavy lines (like on all four sides of an image) may make it look too busy or overly complicated.

- For this tutorial, I've kept the wavy line rather symmetrical. However, try experimenting! Sometimes you'll get a completely different effect than what you were hoping for. How you drag the anchor point directly effects the wave line. For example, dragging the anchor point downwards or upwards by a lot, dragging it side to side, etc.




Adding a "Shine" Effect

Program: Photoshop 7 // Difficulty: Easy


One way to add some nice accents to your image is to create a "shine" or "glow" effect in certain areas using a simple brush. For this tutorial, I'll be using the following image:

After cropping for a focal image, going through my colouring techniques, and applying one texture, I'm left with this.

The goal of this tutorial is to show you an easy way to add some neat highlights to an image so that you end up with something like this:

Note the wavy shine behind the text. Adding a bit of lighting effects here and there will help draw your visitor's attention to a specific part of the image. In this case, my focus was to add emphasis to the text.

Step 1: Open up your image in Photoshop and create a new layer on top of your base image.

Step 2: Select the Brush Tool (B) by pressing B or simply click on the icon in your Tools win.dow. For the "shine", make sure your foreground colour is white (or any other very light shade).

Step 3: At the top of the win.dow, there should be an option called "Brushes". Click on it and choose a circular brush. Make sure the edges are slightly "blurry" or "soft". This type of brush should have come pre-installed with Photoshop as it's very basic.

Step 4: Depending on how large your image is, you may want to adjust the size of your brush. The one I use for this example is around 50 pixels. Make sure that your empty layer is selected, not your base image. Using your brush, making a swirly design. Since my intention is to help highlight the text, I'm going to make the "swirly" design on the left beside the focal image.

Step 5: If we left it at that, the "shine" is too strong! We need to blend it into our banner so that it looks nicer and gives a softer "shine" effect. Set your "shine" layer to soft light.

That should give you something like this:

Step 6: Alternatively, you can choose to set your "shine" layer to overlay instead. Here's what you get:

Notice how the shine is much stronger! We should probably tone it down a bit and lower the opacity of that overlayed shine layer. This is what we get:

Using "overlay" results in a brighter "shine" effect. Whichever setting you choose is up to you. With "soft light", you generally don't need to lower the opacity any further. With "overlay", you get a stronger and more pronounced "shine" but you'll need to remember to lower your opacity so that the shine layer doesn't look so blinding or harsh.

Final tips

Don't overuse the shine! A little definitely goes a long way. If you're just starting out, the easiest thing to do is to put the shine highlight in empty areas, usually where the text will go.

Though I used a white colour for this tutorial, try experimenting with others? Here's a red/brown "shine". It's set to "soft light".

You might also want to use a shine technique to highlight the focal image. In the example below, I put the shine on top of Illusen's face.





Applying Textures To Graphics

Program: Photoshop 7 // Difficulty: Easy

In this tutorial, I'll show you how I applied by texture to the icon above. I'll be using the finished icon from my previous guide (icon colouring techniques). Though I normally hate putting textures and text on icons, an image may need a little something extra. I use textures to add accents and features, so most of the time, I try to keep the original colour of the icon.

After the colouring process, I like to merge my layers into one. You can do this with Ctrl+Shift+E or go to Layer, Merge Visible.

I'll be using three textures and one pattern for this icon. Here's a screenshot describing how I've applied the textures:

Using a white diagonal pattern over an image is a popular way to "finish" a graphic. However, be sure to keep the focus on the icon, rather than the lines. The pattern is too heavy and has the appearance of "sitting" on top of the image, so these next steps will be for blending.

Most of the time, I only like using diagonal patterns on certain parts of an image, rather than the entire thing. Instead of using an eraser to get rid of the unwanted lines, I simply add a layer mask with a gradient to create a fading effect.

Let's compare the icon before and after applying the layer mask:

As you can see, the gradient got rid of the white diagonal lines on the upper right part of the icon, but we still have the pattern on the lower left. I did this because the pattern was obstructing my original textures too much. And, like I said before, I generally use diagonal patterns on certain sections of an image instead of the entire thing.

You can leave the icon like this and call it finish, but personally, I think the lines are still too "obvious" and could be blended into the image a bit better. I'm going to go ahead and blur the edges of the diagonal lines a bit using the Blur Tool. I'm using a circle brush that's 22 pixels in diameter, set at 40% strength. Using the brush, I lightly go over the edges where the diagonal lines fade into the rest of the icon by doing small "click and drag" motions. An important tip is to drag in the same direction as the diagonal lines. So, in this case, I'll be moving the brush towards the upper right.

The layer with the white diagonal lines was set at Soft Light so I'm going to lower the opacity of the layer to 50%. This makes the pattern noticeable, but it's not overbearing on the icon or competing with the other textures as a focal point. I'm also going to slightly erase the diagonal lines on the character's hair. Here are my eraser settings:

Here's what I have:

Phew! There you have it - the finished icon. You may want to add additional text to the image, but for me, I hate text on icons so this is enough.

FINAL TIPS:

- If you're using textures to add effects to your graphics, remember that they are meant to accent your image, not cover it! The first thing a person should see is the main image.
- Sometimes, textures you choose may not work well with the icon. It's all about experimenting with various textures until you get one that's suitable.





A Mini-guide on Textures

I love using textures because it gives graphics more depth and accents, but using them correctly is a tricky thing. Using too many texture layers, using them in ways that don't flatter the original image ñ these are the kind of things that can catch graphic makers off guard. This isn't a typical "guide", more like a compilation of tips and tricks for making the most out of the textures you have. I'll be going over some major problems that I've come across.

Before you start reading, please note:

- This page isn't meant to educate you in making graphics. It's meant to teach you the basics of using textures. I'll try to include screenshots of things that are important, but not everything will have a screenshot. In general, it'll be a text-based guide.
- I use Photoshop 7 for all of my graphics, but the same rules apply to other software as well, like GIMP.
- Drag and drop all images into the address bar for full view (or right click and choose View Image).



So, let's get started! For the majority of this "guide", I'll be using this image below:

However, whenever I make a banner I always adjust the image's basic colours first. I won't go into detail about that since this isn't a colouring guide. After editing the original image, here's what we'll be starting with:


#1) Blending is important!

The most common mistake that graphic makers do is pile on multiple layers of textures, set them all to opacity, and leave it at that. In order to make the most out of your textures, you need to blend the textures so that they fit the image. For this example, I'll be using the following textures from Swimchick:

You can hover over the textures to see what I'll be calling them. For example, I'll refer to the grungy brown texture as texture 1. In addition, I've used a brush that looks like a handwritten letter in #FFFFFF for one layer, which I'll call texture 4.

There are two images below. Can you tell which one's the well blended one?

Image One

Process:
Layers
All of the Swimchick textures (textures 1-3) are set to 100% opacity, while my own brush texture is set to 50% on normal.
Additional editing
For texture 4 (white letters), I ran a circle eraser (90 pixels in diameter) a few times over the usul so that the words don't cover it too much.

Image Two

Process:
Layers
Texture 1 (brown) is 60% overlay, texture 2 (blue) is 30% color burn, texture 3 (flowers) is 50% soft light, and texture 4 (letters) is 70% soft light.
Additional editing

For texture 1 (brown), I added a layer mask and set my foreground colour to black and my background colour to white. I then chose my gradient tool and used the default linear gradient in the top left corner of the image. Similar to the first image, I ran a circular eraser over the usal to lighten texture 4.

Analysis

So, we have our two images and as you can probably tell, image 1 is an example of a poorly blended banner while image 2 is more nicely textured. Let's take a closer look at the problems for image 1.

Textures don't need to be set to opacity only. Try out other layer styles, like color burn or soft light. Test all of them out and see which one fits the image the best. Some layer styles accentuate the colour of your textured layer, while others make the effects more noticeable. I'll talk more about this issue in the next section.

In the first example, the textured layers are just "sitting" on top of the image. It makes the base image feel heavier and messy. When I look at it, my eye automatically spots a few things. First, the letters in the background are too prominent. It's very conspicuous against a dark background. If you want to use any sort of writing texture, always make it barely noticeable because whenever there's text, our eyes automatically seeks it out and tries to read it.

Secondly, the bright spot near the usul's tail is distracting. By setting that particular layer to opacity, it not only over-brightened that spot, but it also makes the image appear to be more sharpened than it actually is. If we're blending this layer, I would probably run an eraser through it a few times just so that the lighting effect is lessened. In general, be careful when using textures that have lighting effects because a poorly blended layer will attract attention in unwanted areas.

Lastly, the flower pattern near the mountain at the top is too obvious and stands out. Like the other problems mentioned above, it's distracting. In essence, my eye goes to the textures first, which is not good! Used correctly, textures should appear to be a part of the original image and shouldn't have the appearance of being too heavy.

In the second image, there's more focus on blending the textures so that they work together so that they compliment the base image. A few of the layers are still a bit too harsh, but compared it to the first example, it's a huge improvement. If you look at the second example, you'll still notice a slightly brighter spot near the usul's tail. This is where I would put text like "Moved" or "On hiatus" because the slightly lighter area will draw a person's attention to that spot.


Using bokeh textures on different settings

Base image:

Texture used:

Another common mistake is that textures are always set to overlay. While this may work for some textures, you should try to experiment with different layer styles to see which one compliments your image. For all of these examples, I leave the textures "sitting" on the image, and I won't be blending them in just so I can show you the differences between them.

Using the bokeh texture on overlay 100%


This isn't a poor image by any means, but there are problems. First, you can barely see the texture itself. Sure, it made the colours more bold and vibrant, but what we're looking for are the lighting effects that bokeh textures are meant to provide. Experienced graphic maker shouldn't be adjusting colours solely by using textures because piling them on will make the image look more cluttered in the end. However, if you're just starting out, textures are an easy way to colour an image if you're not familiar with curves or colour balance.

In this example, using overlay with certain textures will deepen the colours of the image. What if you didn't want a drastic change of colour? Well, we can set the overlay layer to something less than 100%, but the lighting effects in the texture would be too faded. They wouldn't be accenting the image because no one would see it!

Using the bokeh texture on lighten 100%


Setting the texture layer to lighten keeps both the retro blue colour of our original base image and brings in a bit of the bokeh colours as well. It also adds more depth in terms of the colour range. You can see this in the blue space on the left side of the usul. See how the soft red mixes with the blue and creates a more gradient effect?

Of course, we wouldn't be setting this layer to 100% as the lighting effects are too heavy and obvious. What if we lowered the opacity of the bokeh layer?


In the example above, I lowered the opacity of the lighten layer to 60% and it makes a huge difference. We get back some of the retro blue colour, but that's not to say that the colouring effects of the bokeh layer is completely lost. You can see hints of red in certain areas that really works well with the image. However, since the purpose of our bokeh layer is to add some light effects to the image, we need to focus on that. We can clearly see the lighting in the textured layer but it's not over the top.

Using the bokeh texture on screen 100%


The differences between lighten and screen are minute, but there are differences. Using screen, you can see that the texture layer has more of a "glow" to it. It adds more of a white colour to the overall image. The problem with using screen is that it washes the colour of the base image away. Try lowering the opacity to 60 or 70%.

Final tips

You're not using textures to cover the image and "make it better". Rather, textures are meant to accent certain aspects of your image. In a lot of images I use, I like to put bokeh textures in empty spaces. For example, if I was using the image below, I would position the bokeh "circles" so that they cover the space around the focal image (the blue eyrie).

The texture you chose may not work well with your image. If that's the case, throw it out and pick a new one.

Blending the textures takes a lot of practice. There are many techniques, such as adding a layer mask and a fading gradient. Or, you could use an eraser to control which aspects of the texture you want to shine through.

Overlay is overused. You don't "have" to set every texture to that style. Try experimenting with other styles and see which one looks best. One of my favourites is colour burn, which works great with grungy textures because it generally deepens the colours of the base image, making it more bold and striking. On the other hand, lighten or screen works well with bokeh or other light effect textures because it minimizes the background colour of the texture layer and instead, emphasizes the lighting effects.

Use effect textures primarily to add additions and accents to your image, rather than to change the colour of the base. However, some abstract/light textures might change your entire colour palette if your set it to screen. Experiment!

Used in moderation, textures can make your image look amazing. However, too many texture layers will clutter up your image, making it look messy and "heavy". If you use too many light or bokeh textures, your image will look like a bright light. Too many grungy or heavily patterned textures, and your image will look low-quality.




Dark Blue Colouring Technique


Program: Photoshop 7 // Difficulty: Easy

The image I'll be using for this tutorial is from Spirited Away. I've already cropped it to 100 by 100 pixels so it's ready to go. This is one of my favourite colouring techniques and I use it in a lot of my icons because it doesn't take a lot of time at all. As you can see from the before and after images above, this technique gives images have a dark feel to it and emphasizes a blue colour tone.

First, I'm going to open my image up in Photoshop 7. Press Ctrl+J to duplicate your original image (or you could go to the top and click Image, Duplicate). Name this new layer Colour Balance so you can keep track of your progress.

Choose your new layer (the one called 'colour balance') and go to Image, Adjustment, Colour Balance. Input the following settings:

SHADOWS: 0, 0, -18
MIDTONES: -45, 0, -30
HIGHLIGHTS: 0, 0, -20

Make sure you have Preserve Luminosity selected. I've included all three screenshots here:

After applying these settings, here's what I have so far:

Duplicate this Colour Balance layer and name this new one Hue/Saturation. Go to Image, Adjustment, Hue/Saturation. Apply the following settings:

HUE: +3
SATURATION: 0
LIGHTNESS: 0

I've included a screenshot below.

While still on your Hue/Saturation layer, go to Filter, Sharpen, Sharpen Edges.

After sharpening your layer, this what the image will look like:

Still working with the Hue/Saturation layer, open up the Colour Balance menu again and input the following settings:

SHADOWS: 0, 0, 10
MIDTONES: 0, 0, 40
HIGHLIGHTS: 0, 0, 15
Again, make sure Preserve Luminosity is selected.

After applying the colour balance, here is what I'm left with:

Duplicate the Hue/Saturation layer and rename it Overlay. Select this new layer. Click Layer, Layer Styles, Color Overlay. Now, I want to give the icon a more retro colour, so I'm going to choose a shade of blue as my overlay colour. I use #D9DFF7, set the layer to multiply, and set the opacity to 50%. Here's a screenshot of my settings and the result:

As you can see, it's not a huge change, but there are subtle differences.

Duplicate the Overlay layer and name this new layer: Top Layer. While on the Top Layer, go to Image, Adjustment, Color Balance and apply the following settings:

SHADOWS: -20, 0, -15
MIDTONES: 0, 0, 0
HIGHLIGHTS: 0, 0, 5

As always, make sure Preserve Luminosity is checked.

After applying the final colour balance settings, we're done with the colouring process! Let's compare the original image with our new one again:

FINAL NOTES:

- You can work through the colouring process with only one layer. The reason I duplicate layers is that I may want to go back to a previous layer if I made an error along the way, or I may want to rework the settings to better suit the image.
- Experiment with your settings. You don't need to go by my numbers at all!
- Have fun!




Icon guides and tips

On this page, you can find various in-depth guides and tips on making icons.

Want to create your own guide or tip page?
Fill out the form below and send it in!


Icon guides available:

Title of Guide

A short description of the guide will be written here.

Written by: Guide writer
Program: The image program the guide/tip is for
Length: How long is the guide/list of tips?
Status: Is the guide complete or in progress?

Cropping Icons for Different Focal Points

The way you crop your icons can influence how the viewer perceives them. In this article, I take a look at some icons found at various graphic sites.

Written by: Turnip
Program: None
Length: Tips
Status: Finished



Guides on another petpage

Icon Cropping
Site: /~Xross#tut2

Learn various cropping techniques and how to crop for different focal points.

Written by: Kuroida
Program: Photoshop
Length: Tutorial
Status: Finished





Cropping Icons for Different Focal Points

Gone are the days where icons are immediately cropped to focus on the character's face. Now, it's all about making your icon's focal point look interesting and original. The way you've cropped your icon can influence a visitor's perception of what you're trying to convey. Does that sound a bit too profound for you? Well, it's only the truth! Here are some icons that I've collected from various sites and what comes to mind when I look at them:

Site: Psychochromia

First thoughts: Using some of the best and most creative cropping techniques I've ever seen on Neopets, Fa does an excellent job in creating totally different emotions using the same images and even the same colouring technique. In this first icon, the scene focuses on the character's hands. It's a bit ambiguous and as the viewer, we don't know a lot about what's going on. Her left hand seems to be squeezing another character so there's a sense of urgency (who is this purple character? Why is he or she being held?).

Quick notes: Mysterious, unclear

First thoughts: The second icon focuses on the character's scowl (obviously she's not happy at something but it's unclear to the viewer what it is). The viewer's eye automatically travels to the top corner because her bright green eye is very noticeable. If we follow the direction in which the character is looking, we aren't able to understand the source of the character's frustration.

Quick notes: Discontent, angry

Site: Live The Riot

First thoughts: Focussing on an entire scene rather than one particular character is one way to get a really give an icon a cinematic feeling. In this icon, the characters aren't that noticeable and it has been cropped in order to give viewers some key aspects: the flowing curtains in the background and the wide, carpeted staircase.

Quick notes: Regal, expansive

First thoughts: This is such an excellent icon for many technical reasons (and it's these technical reasons that casual viewers often "miss" or don't pay much attention to). What I absolutely love about this icon is that it mirrors us. The image has been cropped to include a spectator on the far left who's watching the couple dancing. As they are the focal point of the icon, we as viewers also give them our attention.

Quick notes: Observation

Site: Dark Light

First thoughts: This icon is cropped to include both the sparkle and the character in the frame. Including both gives the viewer more information about the scene. The two focal areas (the sparkle and the character's face) are also at opposite ends of the icon. One's in the bottom left corner and the other is in the top right corner. This symmetry means that most of the icon gets the attention of the viewer. Because there aren't any other elements, both the sparkle and the smiling face of the faerie gives the icon a "calm" feeling.

Quick notes: Magical, happy, calm

First thoughts: Cropping for additional space on the left/right side of the focal image can give the viewer a sense of movement. If you divide the icon into three vertical panels, you'll notice that the first "panel" is empty (there's only the rock and ground). Combine that with the focal character looking in that direction (particularly the pose of the character), it looks like he'll be moving towards that side of the icon. If the icon was simply of the character on the side of the building, then viewers might think he's climbing. However, devoting such a large amount of icon space to the ground gives a stronger implication to the sense of falling.

Quick notes: Movement, space

Site: The Lunch Box

First thoughts: Right from the get-go, the viewer immediately takes in the urgency of the situation in the icon. The focal character is hanging on to the side of the building. Because large amounts of the scenery has been included in the icon, viewers also see a sense of danger and the scale of the buildings on the ground. The viewer understands that the character is high above ground.

Quick notes: Danger, scope

First thoughts: When the image is cropped to only include the Bruce, this makes the icon seem much different. Here, the focal character gives an unpleasant look towards the viewer. As the scene takes place in the library, the Bruce looks like he or she is reprimanding the viewer. This takes on a much different emotion than the original image, which is more light-hearted and comical. You can view the original image here (type in "library" in the search option).

Quick notes: Intrusive, unwelcome

Site: Kansas

First thoughts: This icon shows a very interesting cropping technique where the two focal characters are almost cut out of the image. Instead, the space between them is emphasized and it's the first thing that a viewer's eye will notice. To someone who isn't familiar with the characters, this visual emphasis on space acts to emphasize space between the characters on a personal or emotional level.

Quick notes: Separate, apart

First thoughts: Remember Dark Light's second icon above (the one with the Charizard)? There, space was used to imply movement. In this icon, empty space is used as a protective barrier. It takes up about 50% of the visual space and it's a very prominent part of the image. The focal character is on the left and based on the positioning, seems to be in a position where they're unnoticed.

Quick notes: Hiding, unseen

Final Tips for cropping icons:

- Experiment, experiment, experiment! Don't just rip off someone's cropping technique just because you think cropping half the character's face out is "so totally cool". Instead, think about the technical aspects of why the character's face isn't fully shown and think about how you can crop your own icons in a way that conveys similar emotions.

- There's nothing wrong with cropping so that a character's face is centered. However, if you offer 20 icons at your site and all of them are cropped the exact same way, this probably wouldn't be visually appealing. Cropping to a character's face and centering it on the icon is an easy technique, but be sure to advance beyond that.

- I've created a small section of experimental icon cropping over at The Lunch Box if you'd like to take a look.




Banners guides and tips

On this page, you can find various in-depth guides and tips on making banners.

Want to create your own guide or tip page?
Fill out the form below and send it in!


Banner guides available:

Title of Guide

A short description of the guide will be written here.

Written by: Guide writer
Program: The image program the guide/tip is for
Length: How long is the guide/list of tips?
Status: Is the guide complete or in progress?




Buttons guides and tips

On this page, you can find various in-depth guides and tips on making buttons.

Want to create your own guide or tip page?
Fill out the form below and send it in!


Button guides available:

Title of Guide

A short description of the guide will be written here.

Written by: Guide writer
Program: The image program the guide/tip is for
Length: How long is the guide/list of tips?
Status: Is the guide complete or in progress?


Guides on another petpage

How to make "Snow
Site: /~Jessander#snowg

Create a snowfall effect for your buttons.

Written by: Justine
Program: GIMP
Length: Tutorial
Status: Finished

How to make "Snow
Site: /~Jessander#snow

Create a snowfall effect for your buttons.

Written by: Justine
Program: Photoshop
Length: Tutorial
Status: Finished

Snowfall Animation
Site: /~grundogeisha#anisnow

Ever wanted to create some snowfall animation for your buttons?

Written by: Rica
Program: GIMP
Length: Tutorial
Status: Finished

Making A Button
Site: /~toit#mab1

This tutorial quickly goes through various steps involved with making a button.

Written by: Nicole
Program: Paint Shop Pro X2
Length: Tutorial
Status: Finished

Making Button Bases
Site: /~quinsai#makingbuttonimage

This tutorial goes through the various steps of making a button base, such as positioning and image editing.

Written by: Monky
Program: GIMP
Length: Tutorial
Status: Finished

Adding Button Text
Site: /~quinsai#buttontext

All buttons need text, am I right? Learn how to add and style text in this nifty tutorial.

Written by: Monky
Program: GIMP
Length: Tutorial
Status: Finished

Making a Great Button
Site: /~interstade#tips

Includes a list of tips ranging from choosing appropriate large fonts to sharpening your button base image.

Written by: Turnip
Program: Photoshop
Length: Tips
Status: Finished

Cropping
Site: /~ilvira#cropping

Just how do you get those 88px by 31px images? This in-depth tutorial goes through the steps.

Written by: Nienke
Program: Photoshop
Length: Tutorial
Status: Finished

Adding Borders
Site: /~ilvira#border

Learn how to finish off your button with a spiffy border!

Written by: Nienke
Program: Photoshop
Length: Tutorial
Status: Finished

Shine Animation
Site: /~ilvira#shine

The "shine" animation is a popular choice for button-makers. This tutorial teaches you how to do it!

Written by: Nienke
Program: Photoshop
Length: Tutorial
Status: Finished

Sparkle Animation
Site: /~ilvira#sparkle

Want to create little sparkles for your button? This easy-to-follow tutorial can help you achieve that effect.

Written by: Nienke
Program: Photoshop
Length: Tutorial
Status: Finished

Glow Across Animation
Site: /~Jeonyi#3tut

Ever wanted to learn how to do that "shine sweep" animation? Here's how!

Written by: Sandy
Program: Photoshop
Length: Tutorial
Status: Finished

Soft Star Animation
Site: /~Jeonyi#2tut

Make your button shine with this start animation tutorial!

Written by: Sandy
Program: Photoshop
Length: Tutorial
Status: Finished

Saranghae's Button Making Tips
Site: /~Jeonyi#tips

A small list of button making tips, ranging from animations to text.

Written by: Sandy
Program: None
Length: Tips
Status: In progress




Layout guides and tips

On this page, you can find various in-depth guides and tips on making layouts.

Want to create your own guide or tip page?
Fill out the form below and send it in!


Layout guides available:

Title of Guide

A short description of the guide will be written here.

Written by: Guide writer
Program: The image program the guide/tip is for
Length: Is this a full guide/tutorial or a list of tips?
Status: Is the guide complete or in progress?

How To Make A Spiffy Layout

This in-depth guide goes through the design aspects of creating a graphic-style layout, from creating the shape to designing a background.

Written by: Turnip
Program: Photoshop 7
Length: Tutorial
Status: In progress

Creating a Minimalist Layout Design

This in-depth guide shows you one way to design a simple yet stylish layout that emphasizes colour and smaller technical aspects rather than graphics or visuals.

Written by: Turnip
Program: Photoshop 7
Length: Tutorial
Status: Finished

Creating Spotlights on your Layout

Want to add some interesting lighting effects on your layout to finish it off? This tutorial teaches you an easy way to achieve just that!

Written by: Turnip
Program: Photoshop 7
Length: Tutorial
Status: Finished

Guides on another petpage

Layout Jargon
Site: Name of site here

A short blurb about the tutorial.

Written by: Username
Program: N/A
Length: N/A
Status: N/A




Creating a Minimalist Layout Design

My other layout tutorial, How To Make A Spiffy Layout, focussed on a graphic-style layout so let's switch things up! In this tutorial, I'll show you some easy steps to creating a minimalist layout design.

Here are some examples of simpler, non-graphic layouts I've designed:

Benefits of a simpler design:

- They generally take less time to create in Photoshop.
- They can give your page a clean, professional look.
- Your colour palette isn't restricted to the image you use (ex. because there aren't any images used in the three layouts above, I could create my colour palette from scratch).

Important note! This tutorial assumes that you know the basic workings of Photoshop. If you're looking for a more in-depth, step-by-step tutorial, visit How To Make A Spiffy Layout first.

Step 1

In Photoshop, Ctrl N and open up a new win.dow that's around 1000 pixels in width and 600 pixels in height (if you want absolutely no vertical scrolling for the main layout, set it to 500 pixels in height). I set my Foreground Color to #EEEEEE and using the Paint Bucket Tool (G), I fill my first layer.

You might also want to take this time and rename your first layer so that it'll be easier to remember. I name mine Background.

For now, I don't have any colour scheme in mind so let's just design the general shape of the layout.

Make your Foreground Colour #FFFFFF. Choose your Rectangle Tool (U) and create a rectangle. Make sure it's slightly larger than what you want your content area to be since this rectangle will be our border. In your Layers win.dow, right click the layer and choose Rasterize Layer.

The Rectangle Tool is pointed out below:

Step 2

Change your Foreground Color (I usually change mine to a light shade of grey). Using the Rectangle Tool (U), create another rectangle on top of your first one. It should be smaller so that it fits evenly inside.

Again, right click on your new layer and choose Rasterize Layer. Here's what I have so far:

In your Layers win.dow, click on the layer with your white rectangle (the first shape you created). Go to the top of your win.dow, click Layer, look for Layer Style, then choose Drop Shadow. These are my settings:

Step 3

Make your Foreground Color white (#FFFFFF). Make your Background Color a darker shade of grey.

Spiffy Tip! When I don't have a colour palette ready to use, I use various neutral colours (like grey).

I'll be adding three different layer styles to the content area (the layer with your second rectangle, the smaller of the two). First, I apply a Drop Shadow with these settings:

Next in an Inner Shadow with these settings:

Lastly, I have a Gradient Overlay with these settings:

Here's my final result:

Step 4

I'll be creating an area for my menu (similar to what you see on the layout at this site). First, choose your Rectangle Tool (U). Next, create a small, narrow rectangle. Right click on your new Layer and choose Rasterize Layer. Drag your new layer below the other two rectangle shapes (your new layer should be above your Background layer.

Click on the layer with your border (the larger of the two rectangles). Go to the top menu, click "Select" and "Load Selection". Click OK. In your Layers win.dow, choose your newest layer (the narrow rectangle). Press Ctrl X. You'll notice that the narrow rectangle no longer "shows up" under the border.

Spiffy Tip! Want to get rid of this step? Simply move your narrow rectangle so that it's even with the edges of the border. That way, there's no need to go through the steps of deleting it and making sure it doesn't overlap. One reason why I showed you this step is that sometimes you may have different elements on your layout that requires you to overlap then delete. For example, take a look at this layout:

Notice how the rectangles for the menu are uneven. What I did there was simply duplicate the same narrow rectangle, but moved certain ones farther to the left. Then, I selected the entire content area and went about deleting parts of the link rectangles that were showing up.

Step 5

Right click on the layer with your content area and choose Copy Layer Style. Right click on the layer with your narrow rectangle (the one for the menu) and click Paste Layer Style.

Since this shape is much smaller than the content area, the drop shadow will look much more prominent. Be sure to lower some settings. For my layout, I've lowered the spread to 5% and the size to 5 pixels.

Let's add our site title. Since there's a lot of space in the top right corner of my layout, I'll add it there. Using the Text Tool (T), click on an area of your layout and type out your text. Before you do that, however, you may want to make your Foreground Color black (#000000) just so the text stands out more and you can easily see it. Here's what I have:

I also took this time to type the word "Menu" and positioned the text over the narrow rectangle with the Move Tool (V).

As you can see in my example above, you can get really creative with your text design. I repeated the word "Turnip's" and made one of them black. That's the "main" one. The other repeated words are lighter in colour and not as noticeable so they serve only a design aspect.

To change the colour of your text, highlight the text and look at the Options win.dor near the top. Then, click on the coloured square and a Color Picker window should pop up.

Step 6

Play around with your layout design and make any adjustments you see fit. For my layout, I'll be adding a brush design underneath my text to make it a bit more visually appealing. Since the purpose of this layout is to be simple, try to keep it that way.

Now, look for a suitable colour palette. Since our layout has no image, I want my colours to "pop". My all-time favourite resource for colour palettes is Colour Lovers though if you want to stay on Neopets, Kleur is a useful resource as well.

What I like to do is open a new win.dow and paste my palette in there. That way, I can easily use the Eyedropper Tool (I) to quickly and efficiently grab the colour I want.

Next, we need to "input" our colour palette into various aspects of our layout (like our content area, background, etc). For my content area, I'll be choosing lighter shades of my colour palette. To "grab" a colour, I click on the Foreground Color square and the Color Picker win.dow pops up. I click on my palette (whichever colour I want), then I click OK. I repeat this for the Background Color square.

Let's edit our content area first. Before we do that, let me show you a super fast way to get to the "Layer Style" menu:

Once you're at the Layer Style win.dow for Gradient Overlay, edit your Gradient colours. From the drop down menu, click the first square (it should say Foreground to Background when you hover over it).

The colours may seem a bit dark. If this is the case, take a look at the "Opacity" setting (just above the Gradient colour choices) and lower the number. I'll be setting mind to 70%. Here's a look:

Step 7

Next, let's edit your Drop Shadow. The default colour for a drop shadow is black, but I like to edit it further so that it seems more natural in terms of colour choices. Bring up the Layer Style menu for your Drop Shadow and click the coloured box beside "Blend Mode". I'm going to select a darker shade of orange. Make sure the colour fits naturally with the colours chosen for your content area. For example, I have orange near the top of my content area and a light, golden colour near the bottom. I would not choose something like red or purple as my drop shadow colour. Instead, I choose a darker shade of orange that will look natural with both colours I currently have.

Lastly, let's edit the Inner Shadow colour. Again, I choose a darker shade of orange. If you find that your inner shadow isn't never noticeable, you can also take this time to increase the opacity. Previously, I had 22% as my opacity but I'll be increasing it to 33%. Here's a look at the content area:

While the effect might not be noticeable on its own, a minimalist layout style is truly the sum of its parts. Whereas in a graphic-style layout you have a flashy image that's very noticeable, here, the small details are what counts the most.

Step 8

Click on the layer with your narrow rectangle. Repeat the previous steps of editing the gradient overlay colours, the inner shadow colours, and the drop shadow colours.

Step 9

Now it's time to make our background. For simpler layouts like these, I like using a gradient background because the dynamic colours add a lot of style. A simple, solid background would seem too plain and boring!

Edit your Foreground and Background Colors since these two colours will be used as your background. Select the Gradient Tool (G). Click on the layer with your background (for me, that's always the bottommost layer).

To use the Gradient Tool, clear near the top of your layout and drag towards the bottom, then release. Here's what I have so far:

At this step, you may want to go back and edit any colours that you think don't really fit. Since I'm happy with my background but less than pleased with my content area, I went back and edited the colours of the gradient overlay, inner and drop shadow. Here's what it looks like now:

Spiffy Tip! While lots of tutorials go through making layouts step by step, there are always times when you'll have to go back and edit something if you're not happy with it. Don't let the idea of "steps" force you to head in only one direction. If a part of your layout ends up looking a bit off, go back and edit. For instance, you may be thinking that it's more efficient if I coloured the background first and then edit the colours of the content area. And true, that would be more efficient but my personal layout design process is a bit different. Personally, I like to add at least some colour on my layout before the background because then I can get a sense of colour usage and how I want the end result to look like.

Step 10

Click on the layer that has your border (the larger rectangle). Again, we'll be editing the Drop Shadow colour so that it fits with our colour palette. Because we now have a background, it'll be easier to see what colour our drop shadow should be. For my layout, I choose a dark red.

Step 11

Now it's time to edit the text. As my background is quite dark (especially the top half where the text sits), I'll be making my text colour white. To do this, I add a Layer Style, Color Overlay. Click on the coloured box to choose a new colour.

For my "repeated" words, I'll choose a slighter shade of red so that it's not as noticeable as the white text. After adding drop shadows and bevel effects, here's what I have:

I purposely didn't post my settings for the text styles because this is an area where you should experiment! It's fun to see what styles work best with others.

And that's it!

Making a simple layout is pretty simple, right? It's all about adding the small details like drop shadows and gradients. Here's a look at the final version:

You can get super creative by adding more "modules" like a box for updates or stylized links:

Final tips:

The colours you use for a simple/minimalist layout is crucial. As you can see in my layout above, the colours are warm, inviting, and very bold. It's still visually appealing when you have dynamic colours that work nicely together.

Don't go overboard with your "extras". In the layout above, I added one fancy brush underneath my text. This added a lot of style but if I added more than one, the layout would look cluttered and messy.




Creating Spotlights on your Layout

Adding spotlighting effects can make your layout shine! Not only is it super easy to accomplish, but it adds a lot of style and accents to your page.

Spiffy Tip! You can translate this tutorial to other graphics as well! Create spotlight effects on banners and buttons to give the images a nice shine.

Here's the "before and after" version:

Step 1

Create a new Layer above your layout image. Next, go to your Tools win.dow and select the Gradient Tool (G). At the top, make sure your settings are similar to mine below:

To change your Gradient settings, click the arrow to open up the menu. The second setting (Foreground to Transparent) is what you want. My foreground colour is green because that's the main colour of the layout I'm editing.

To the right, click the second Gradient style called Radial Gradient. This will give us the "circle" shape of the spotlight.

Step 2

Drag and release to create the gradient circle. Important areas to hit include the sides of the content area and a few on the main layout image itself. Don't both drawing any spotlights on the content area since it won't show up.

Make absolutely sure that none of your gradients exceeds the layout image. Because I'm using a patterned background image that's already saved, if one of my spotlights gets cut off, it'll look really bad when I code the layout. Just pay careful attention to the edges of your spotlight and make sure it's not too close to the edges of your layout image. In the screenshot below, I've coloured my spotlight black so that you can easily see where I've placed them. Don't make yours black since the final effect won't look as great.

Spiffy Tip! If you're worried about your spotlights exceeding the layout boundaries, feel free to use the Brush tool to create your spotlights instead. It takes a bit more effort since you have to constantly change your brush size (you don't want all your spotlights the same size. That wouldn't look natural). When using the Brush tool, make sure you select the Airbrush Round. It's the Brush that looks circular but a bit "blurry" around the edges. It's the same brush I point out in the Shine Tutorial.

Step 3

Set the Layer with your spotlights to Screen. Here's what I have:

If the spotlight effect looks a bit too heavy or harsh, lower the opacity. For my layout, I want to give the page a more vibrant effect so I'll leave it at 100%.

Step 4

While you can leave your layout with one layer of spotlights, I tend to create two: one layer with colour spotlights (in my case, green) and a second layer with white spotlights. To create a second spotlight effect, simply repeat the tutorial.

Create a new layout (above or below your current spotlight layer). Make sure your Foreground Colour is white. Then create some spotlights around the layout. Try not to overlap your previous spotlights though. Again, set your layout to Screen. Here's what I get:

Notice how the white spotlights are slightly different than the green spotlights. They're a bit brighter!

And you're done! Easy, right? Here are some final tips for your spotlighting effects:





How to make a spiffy layout

Making a layout can be quite difficult, especially for newcomers but my goal is to simplify this and hopefully make it as easy to understand as possible. This guide is written for Photoshop 7, though you can definitely "translate" it to GIMP or any other image editing program.

If you're new to Photoshop 7 (PS7), I encourage you to read through "Prologue: Introduction to Photoshop 7". It'll give you useful tips and tricks that will help you along the way.

Before you begin…

- If you've used this tutorial to make your own layouts, please be respectful and give proper credit back to this page. While this guide is here to help you with your layouts, please try to incorporate your own style and experiment. This guide should be considered a starting point. rather than a "learn and copy" guide. Rather than aim to make all of your layouts look like mine, focus on the techniques and experiment so that your layouts are completely your own!
- Some screenshots may be scaled down. Drag and drop into the address bar for full view (or right-click and choose View Image).
- Be prepared for a lot of text. Screenshots are used primarily as a supplement to the text-based content.
- The word win.dow may sometimes shows up as a "disallowed word" or -blocked-.



Prologue: About this guide

Quick shortcuts

In various chapters, you might see something like this: Filter - Blur - Gaussian Blur. Here's what it means:
  • Look at the top of your screen and click Filter.
  • From the drop down menu, choose Blur.
  • From the Blur menu, choose Gaussian Blur.
Here's another example: Edit - Transform - Flip Horizontal. This means:
  • Look at the top of your screen and click Edit.
  • From the drop down menu, choose Transform.
  • From the Transform menu, choose Flip Horizontal.
The "dashes" will indicate what comes next. For instance, after "Transform", you'll choose "Flip Horizontal". The reason why this is included in the guide is because writing all three sentences will take up a lot of space and time.

Finding what you're looking for

Near the beginning of each chapter, you might see something like this:

Chapter topics:

  • CH1.1: Your workstation
  • CH1.2: Toolbar
  • CH1.3: Shortcuts

To quickly get to a specific section in that chapter, hold Ctrl and press F and type in the section code. For instance, if you wanted to skip to "Shortcuts", you'd type in CH1.3.

You might see the phrase Spiffy Tip! here and there. These are extra or miscellaneous tips that I've thrown in. They're not entirely crucial to the layout-making process, but it's just something to keep in mind.


Chapter 1: Introduction to Photoshop 7

If you're new to Photoshop 7 or aren't very familiar with the program, don't skip this introductory chapter. I'll show you more about your workstation, what your most important tools are, and some nifty shortcuts that can save you a lot of time.

Chapter topics:

  • CH1.1: Your workstation
  • CH1.2: Toolbar
  • CH1.3: Shortcuts

CH1.1: Your workstation

Your PS7 workstation can be pretty important. Here's a scaled-down screenshot of what my personal workstation looks like:

Here's a brief run-down of my win.dows from the screenshot above:

Toolbar
I won't go over this in detail since it's important enough to have its own section below. Suffice it to say, it's probably your most important win.dow to have.

Navigator
The Navigator is basically a smaller version of your current win.dow. For example, in the screenshot above, my current win.dow (which is minimized at the bottom) is my layout. You can sort of see the large white content area, and the brown and orange colours of the main image. This Navigator is especially useful because sometimes you may have to zoom in on your image by a lot. It gets hard to keep track of where exactly you are if you're only looking at pixels. With your Navigator, you can click on a specific area of the image and you'll "transport" there on your main win.dow. The Navigator is not essential, but it's convenient if you tend to zoom in on your images.

Status Bar
This is a must have win.dow as it allows you to quickly and easily change your zoom levels. On the bottom right-hand corner is a percentage. This tells you the current zoom level of your win.dow. If it's at 100%, then it's "normal". In other words, the image is at full size. If it's at 50%, then the image is 50% smaller than the original size. If it's 150%, then it's 50% larger than the original size.

Actions
Like the Navigator win.dow, this one is entirely optional. I have a lot of "actions" that I use to colour my images or edit them. Since this isn't a colouring tutorial, I won't go into specifics. If you're new to Photoshop 7, you can skip this win.dow.

Options
Again, this is another "must have" win.dow to have open. The Options bar will allow you to modify your tools and other settings. This is extremely useful to have!

Layers
This win.dow is extremely important, almost as much as the Toolbar. This shows all of your layers in your current win.dow. If you take another look at the screenshot, you'll notice I have quite a few layers. The very bottom layer is my background (it's a gradient of orange/brown colours; layer 1).

How do you display certain win.dows?

If you go to the top of your win.dow, click win.dow and this brings down a bunch of options. See the screenshot below.

Based on the screenshot above, you can tell what win.dows I have opened or not. The ones with a checkmark beside it is opened and ready to use in my Photoshop workstation. For the purposes of this tutorial, be sure to have the same win.dows open so that you can easily access them.

CH1.2: Toolbar

The Toolbar is probably the most important win.dow to have so let's talk more in-depth about it. I'll highlight some important tools that you'll be using in the screenshot below:

How can I access the alternate tools?

You might have noticed how some tools have a small arrow in the bottom right corner. This means that there is an alternative tool that you can use. To access it, simply right-click on the tool's image. Here's a screenshot of it:

The image of the Brush means that's what I'm currently using. However, if I wanted to use the Pencil tool instead, I right-click on the brush image which brings up the menu above. Then, simply click on Pencil Tool.

CH1.3: Shortcuts

When I first started using Photoshop, not only was I unsure of what I was doing, but it took so long to get anything done! Now that I've explored and learned the shortcuts, designing a layout can take as little as 20 minutes!

You can use shortcuts to access tools!

If you look back at the screenshot with the toolbar, notice how there are specific letters in brackets. Simply press the key to quickly access the tool. For instance, want to switch to the Move tool? Just press the V on your keyboard. Want to quickly switch to the Brush? Press the B on your keyboard.

Using these keyboard shortcuts will save you a lot of time in the long run. You can learn the shortcuts for each tool by hovering over the tool's image. If there's a letter in brackets, that's the shortcut you can use.

Along the same lines, I use a lot of other keyboard shortcuts as well. Here are some of them:

- Ctrl A: selects the entire win.dow (great for copying and pasting)
- Ctrl C: copies what you've highlighted
- Ctrl X: cuts out what you've highlighted (this is difference than the previous shortcut because it entirely removes what you're highlighting)
- Ctrl S: saves your file
- Ctrl J: duplicates the layer you've highlighted

To find more shortcuts, just browse through the menu at the top of your win.dow (File, Layer, Edit, etc). Beside many of the options, it will show you a keyboard shortcut (if it's available).


Chapter 2: General layout do's and don'ts

This is just a general list of things you should keep in mind or avoid like the plague!

Do…

Do: Use a unified colour palette. The more colours you throw on your layout, the more likely it'll look complicated. Stay away from a visual mess and keep your colour palette simple and unified. Here are some layouts I've made. Hover over them to see what the colour palette it:

When I say "unified" colour palette, I don't mean one single colour. For example, the first layout above uses a pink and green colour palette. This is still considered "unified" because both colours are present in the layout's main image.

On the other hand, you can definitely use a single colour for your layout, though I recommend using various shades of the same colour. For example, let's say you only wanted to use purple as your colour palette. From there, you can use various shades that compliment each other, such as #851FDB, #C9A8E6, and #530F8D. If you simply use one colour, then your layout will look a bit dull and uninteresting.

Do: Whatever you need to start your layout. Some people like to sketch out a rough copy of the shape of their layout, others just go in straight away and experiment.

Ask others for help. If you think a part of your layout looks odd, ask your fellow site owners and see what they say.

Don't…

Don't: Make your layout too big. My general rule of thumb is to have a width no more than 1000 pixels. Keep in mind that not everyone will have a giant, widescreen computer screen like yours. Some might just be 1028 pixels in width. With that in mind, make sure your layout will look spiffy in many screen resolutions. With the height, I generally keep it to 700 if I want a larger content area, or 500 if I want no vertical scrolling at all. It's really up to you!

Spiffy Tip! 1028 screen resolutions are quickly going extinct and larger sizes are much more popular. If you feel your layout design would benefit from a larger width, then that's fine!

Don't: Make your content area too big. Keep your content area's length around 580 pixels and less. Your entire content area (and the accompanying scrollbar) should be completely visible. If you make your content area too tall, then visitors will have to scroll up and down to view the entire thing.

Use overly bright or neon colours. You want your layout to draw people in, not discourage them from visiting.

Copy other people's layouts. This is disrespectful and it's not going to help your layout look more appealing. Part of the fun of making layouts is experimenting and finding your own style. In this guide, I show you techniques that I use in my own layouts. This should be a starting point. Rather than aim to make all of your layouts look like mine, focus on the techniques and experiment so that your layouts are completely your own!


Chapter 3: Plan your design

Getting a unique and fresh layout design should be one of the first things you think about. In this chapter, I'll show you how I combine generic shapes to create a spiffy design!

Chapter topics:

  • CH3.1: Starting your layout
  • CH3.2: Using the Shapes Tool

CH3.1: Starting your layout

As mentioned in the previous chapter, everyone has different ways of starting their layout. If you're more visual-based, it might help if you take a piece of paper and make a rough sketch of your general layout shape.

Step 1

The first thing you need to do is open a new win.dow. You can easily do this by pressing Ctrl N. Or, you can go to the top of your Photoshop win.dow, click "File", and choose "New". The following win.dow will pop up:

For the purposes of this tutorial, I'll be making an anchored graphic-based layout, with emphasis on minimizing vertical scrolling. To do this, I've set my height to 500 pixel (on the vast majority of computers, this should mean no vertical scrolling at all). I've set my width to 1000 pixels, which is my personal limit. Lastly, I've set "Contents" to transparent.

Step 2

Though this is an optional step, I like to work with a coloured background that I can easily change later on.

Spiffy Tip! I generally use a very light shade of grey (like #E5E5E5) as my background colour. Why not white? Some elements of the layout may be white themselves so it will be hard to see. Always choose a coloured background.

Step 3 (optional)

In your Layers win.dow, rename your bottom layer. You can do this by highlighting your layer (it should be in blue once highlighted), right-click the layer, and choose Layer Properties. Since this will be our very bottom layer, I've named it Background.

And that's it! This may seem very basic but it's how I start all of my layouts. This win.dow acts as your canvas so now, let's get started!

CH3.2: Using the Shapes Tool

When I create layouts for other people, I'm given an image to work with. However, with the majority of my personal layouts (for my sites or portfolios), I tend to start with a general design before getting an image. So, that's what I'll do here. I already have my 1000 px by 500 px canvas, which is empty at the moment. To keep this tutorial simple, I'm going to focus on a simple and minimalist design.

An easy way to do this is to use the Shapes Tool. I've pointed it out below:

Step 1

Select the Rectangle Tool (if you don't see it, chances are you'll have to right-click and choose the correct tool. Remember that some tools have multiple settings).

Next, take a look at your Foreground Color. If it's still the same shade of grey used to color your background, then be sure to change it. I've changed mine to a darker shade of grey (#ACACAC).

Step 2

Go to your canvas, click on an area, then drag to create your shape. Once you're happy with your shape, let go and marvel at it! Take a look at your Layers win.dow. You've just created a new layer. Congratulations!

However, we need to do some tinkering. Right-click on your shape's layer (the layer your just created) and choose Rasturize Layer. You should see a difference with your layer immediately:

Because the layer with the shape is higher on the list, this means it is on top of the Background layer. Always make sure that your Background layer is the very bottom layer.

Spiffy tip! Don't like the shape you just created? Get rid of it quickly by pressing Ctrl Z.

Here's what my canvas looks like so far:

I've created a sort of square shape and using the Move Tool, I moved the grey square so that it sits at the very top corner.

Step 3

You might be wondering what this dark grey square actually does. What I like to do is use these shapes to create a general outline of where my main image is going to go. In this case, the dark grey square represents the layout's main image. While a square is simple enough, I'm going to go ahead and create some additional shapes in order to make my layout look more spiffy. Feel free to do the same with yours!

After creating some more shapes, here's what I have:

How did I make the circles? Right-click on your Rectangle Tool and choose Ellipse Tool.

As you can see in the example above, my layout's design is taking shape! The dark grey areas represent the layout's image, which means I'm going to be putting my content area on the right side.

Step 4

The more shapes you create, the more layers you create. Take a look at all the ones I've accumulated so far:

Spiffy Tip! This is a great opportunity to experiment! Create various shapes and see what you can come up with.

That's a lot of Shape layers! When you're confidant with the general shapes you have, you can merge your layers into one single layer. This will make editing much easier. To do this, take a look at your Layers win.dow. Notice how there is a small picture of an eye beside each layer. Look at your Background layer and click the eye. This essentially "hides" it.

Next, highlight any of your shapes layer (it doesn't matter which one). Go to the top of the win.dow and Layer - Merge Visible or simply press Ctrl Shift E. Going back to your Background layer, click the empty spot where the eye used to be. The eye should "reappear".

Let's rename our shape layer so that it's easier to work with. I've named mine "Layout Shape". If you've done everything correctly, this is what your Layers win.dow should have:

Step 5

Now that we're finished with the layout image's general shape, let's add our content area. As I said before, it's going to be placed on the right side. Again, I'm going to use the Rectangle Tool.

Make sure your Foreground Color is white and make a shape where your content area will go. Here's what mine looks like:

Don't forget to rasturize your new shape as well!

What we want is for the white content area to be below the dark grey shapes. If your content area is above your shapes, go to your Layers win.dow and drag your Content Area layer below the shapes layer:

In the screenshot above, I've already renamed the layer as "Content Area". Let's recap:

- The layer called "Layout Shape" is basically where our main layout image will go.
- The layer called "Content Area" should be below the "Layout Shape" layer but above the "Background" layer.
- The bottommost layer is "Background".

Get creative!

Add stuff here


Chapter 4: All About Images

In the previous chapter, we basically set up our layout "template". Now, let's find an image and edit it! This chapter does not deal with major image editing (colours, textures, etc). It only focuses on choosing an appropriate image, resizing it, and other technical aspects of layout images.

Don't worry though! There will be more in-depth image editing tutorials later on.

Chapter topics:

  • CH4.1: Finding the perfect image
  • CH4.2: Image size
  • CH4.3: Adding the image

CH4.1: Finding the perfect image

The layout template I created in the previous chapter uses an "L-shape". This will be important because if you look back on the screenshots of my template, you'll notice that the large bulk of the image will be on the left. See the screenshot below:

The narrow circular part on the top right is just there for style. It's not the focal point of the layout so we don't have to worry about what part of the image is there. So, when we look for an image, we need to find something that has the majority of the focal point on the left side.

Here are some examples of images that would not work with our template:

In the three examples above, the focal image (I.e. the character or main part of the picture) is either on the right side or near the center. This wouldn't work with the design that we have since our focal image is meant to be on the far left.

Spiffy Tip! Of course, you can always flip the images horizontally (if the focal image is on the right, we can "force" it to be on the left by flipping the image). For the purposes of this tutorial (and to keep things simple), let's try to look for an image we don't have to re-position any further.

The following images would be appropriate based on our template:

For this layout guide, I'll be using the first image (Altador Cup Aftermath Background can be found at Charly's SWF Collection).

Because layout images are quite large, there's not many places you can look (in terms of Neo-relates images anyways). However, here are some to keep in mind:

Full screen backgrounds: There's a convenient link which lets you download the wallpapers. I always recommend that you download the larger of the two options (1024 by 768). With a large image, you can always cut it down and resize it if you don't need the extra space, but you can't make the image larger without making it blurry and low-quality.

Charly's SWF Collection: This is my favourite resource for layout images. After finding an image, I click on the small preview to open up the image in the win.dow. I press F11 to go full screen (this enlarges the image). Next, I press Prt Scr to take a "photo" of the screen. Next, I open a new win.dow in Photoshop and paste (Ctrl V) the image.

Details: This site has a lot of PNGs which are super useful. I like using these to create simply, texture-based layouts (ex. Open Eyes' portfolio). Because the layout in this guide is graphic-based, I need to find a complete or "full" image, rather than just one character image.

CH4.2: Image Size

Depending on how large your layout is, you'll want to make sure your image is just as big. For example, go back to your template and figure out the width of the layout image.

To do this, click on the Layout Shape layer (it should be highlighted in blue). Go to the top of your screen, click "Select", and choose "All". Alternatively, you can simply press Ctrl A. This highlights your win.dow (and since we've highlighted the Layout Shape layer, it selects everything in that specific layer).

Now that your layer is select, press Ctrl C to copy everything in the win.dow. Then, press Ctrl N. We're not going to create a new win.dow. Instead, we're just going to look at the width. By default, whenever you have an image copied, opening a New file will automatically set the width and height to the copied image's specifications. In my case, my width is 970 pixels with a height of 436 pixels.

With that information in mind, click "Cancel" to get rid of the win.dow since we're not trying to create a new file.

I have to make sure the image I choose is no smaller than 970 px by 436 px or else I'll run into complications.

CH4.3: Adding the image

Step 1

Once you've found a suitable image, open it up in Photoshop.

Go to your layout template, select your Layout Shape layer, press Ctrl A to select the entire layer, and Ctrl C to copy it.

Now, go to your image win.dow and press Ctrl V to paste your layout shape onto the image itself. Here's what you should have:

Step 2

We're going to use this shape to select parts of the image that we want. However, it's a bit hard to see since the dark grey doesn't let us see the image below it. To fix this, let's lower the opacity. Go to your Layers win.dow, select the layer with the shape (it should be above your image), and lower the Opacity to around 60%.

The grey shape that you copied over should be a bit translucent. You should still be able to see the shape (the edges and such), but you can now see the image below it. This will help us determine where to position the layout shape.

Step 3

With your layout shape layer select, use the Move Tool (V) and drag the shape around until you have your focal point positioned in the large square section. Here's where I've put my grey shape:

As I mentioned before, the top right bit (with the half circles) is not the important part. I don't have to worry about what part of the image ends up there. However, I need to make sure that my focal point (the yurble) is positioned appropriately in the larger part of my template.

When you've positioned your layout shape, make sure that the layer with your grey shape is highlighted in the Layers win.dow. Select - Load Selection - OK.

After pressing OK, you should notice some lines that run around your grey layout shape. This means it's being selected. Go to your Layers win.dow. and select your image (I.e. the bottom layer). Press Ctrl C.

Step 4

Go back to the win.dow with your main layout template. Press Ctrl V to paste your copied image. Using the Move Tool (V), drag the image so that it overlaps your grey layout shape. This is what you should have:

Go to your Layers win.dow. Select the "eye" beside the layer with your grey shape. We no longer need this so let's hide it. However, let's not delete it outright since we may need it later on. It's always safer to keep a layer than delete it and realize you need it down the road. At the same time, I'm going to rename my new image layer as "Layout image":

And that's it!

Of course, getting the layout shape isn't the last thing you do. There is a step that I left out and it's editing the image itself. Simply copying and pasting the unedited image to your layout isn't going to make it look interesting. Take a look at the editing image below:

Taking the image I wanted, I applied a colouring technique, a blur layout, and an inner shadow. Don't worry if these phrases sound confusing! This chapter only dealt with getting our image over to the layout, not editing. Editing is something I want to cover separately in later sections.


Chapter 5: Background and Content Area

Thanks to the previous chapter, our layout is coming along rather nicely. We've added our image and everything is taking shape. However, the layout still looks a bit dull so let's spice things up by editing the background and content area.

Chapter topics:

  • CH5.1: Background gradient
  • CH5.2: Editing the content area

CH5.1: Background gradient

Using a gradient for your background can give your layout a bold, colourful look. It's more simple than using a patterned background, but it's very easy to create.

Step 1

Click on the Foreground Color square. A new win.dow should pop up called Color Picker. Next, click on an area of your image to "grab" a colour. I chose a light yellow colour. Once you're satisfied with your colour choice, click "OK"

Next, click the Background Color square (this square is the one that is slightly overlapped by the Foreground Color square). Again, the Color Picker win.dow should pop up. Choose another colour from your image but make sure it's not too similar (my two colours are #F3D685 and #E1A56C).

Step 2

Choose the Gradient Tool (G). If you currently see a Paint Bucket instead, right click on the tool's image and choose Gradient Tool.

Go to your Layers win.dow and select the Background layer (this should be the layer at the very bottom of the list).

Once highlighted, go back to your layout. Using the Gradient Tool, click on the image and drag down. See the following image for clearer details:

And that's it! Depending on which direction you "drag and release" (I did mine from top to bottom), your colours may end up in different positions). For example, if I clicked near the bottom, dragged upwards, and then released, the darker shade would be at the top and the yellow would be near the bottom.

Since I tend to like the darker shade near the bottom of the layout, I'll leave it as is.

Experiment!

Sometimes the colours you grabbed at the beginning don't look that great together. If that's the case, go back and grab some new ones.

Take a look at some of these:

The top layout uses super bold colours. This can create a very engaging and dynamic feel for your layout! The middle one uses much lighter colours (yellow and orange). This gives the layout a brighter, "happier" feeling. The last one at the bottom uses more muted colours (light brown and purple). This makes for a more "quiet" and subtle background.

All of the colours you see used for the background have been directly taken from the layout image itself. There are times when you may want to edit your selection colours. For example, let's say you grabbed #C36476 but you don't want super colourful or bold background. You can use the Color Picker win.dow to edit your selection.

Again, experiment with your colour choices. Sometimes if a colour is too different from your original selection, your background may not work well with your layout image.

CH5.2: Editing the content area

One of my favourite content area designs is to make it a bit faded, give it a spiffy drop shadow, and add a very faint gradient shadow.

Step 1: Drop Shadow

In your Layers win.dow, select your Content Area. At the bottom of the Layers win.dow, you should see a fancy F in a circle (if you hover over it, it will say "Add a Layer Style). Click it and choose "Drop Shadow" from the menu.

The default settings for the Drop Shadow is horrible. 75% is extremely heavy, especially since the default shadow colour is black. First, click on the square beside "Blend Mode" and change the colour to something more appropriate with your colour scheme.

Next, lower the opacity to around 40%. There's no "right" or "wrong" values to have, so experiment! If you want a more pronounced shadow effect, the 40% range is perfect. If you want the shadow to be visible but not very obvious, 20% or lower should be sufficient.

Spiffy Tip! In the Layer Style menu, look on the far right side. You'll see the buttons "OK" and "Cancel". Below it should be "Preview". Make sure this option is checked because seeing a preview of your style is a huge help!

The angle's default is 120 degrees. This is fine and you don't have to change it. I like changing mine to 90 degrees because I like the shadow to be completely centered.

Spiffy Tip! If you have a "light source" on your layout, you can edit the angle of the shadow to correspond with it. For instance, if you have an image of the sun in the top corner, you may want to make it appear as if the sun is casting a shadow on the content area.

The next few settings (Distance, Spread, and Size) are completely up to you. The default settings (5px, 0px, and 5px respectively) are perfectly fine. If you want a "softer" appearance, try the settings in the screenshot below:

Step 2: Gradient Overlay

Before you add a Gradient Overlay to your content area, make sure you have the colours you want in your Foreground and Background colours (you can use the same colours that you used for your background gradient).

In your Layers win.dow, select your Content Area. At the bottom of the Layers win.dow, you should see a fancy F in a circle (if you hover over it, it will say "Add a Layer Style). Click it and choose "Gradient Overlay" from the menu.

Spiffy Tip! Want to flip the colours around? Click on the "Reverse" option.

The content area looks a bit dark and harsh. I'm going to lower the opacity to 70%. In some cases, you may want to keep the opacity at 100%. However, since my background colours are quite bold and noticeable, I'm going to make the colours of my content area a bit softer.

And we're finished! As always, experiment! In the gradient overlay above, I used the linear (default) style. Another style I use very often in my own custom layouts is radial. This is a bit harder to use because you have to coordinate your colours much more carefully to avoid a tacky "spotlight" effect. For beginners, the linear effect is easiest to pull off.


Chapter 6: Saving your images for coding

Chapter topics:

  • CH6.1: Saving your layout image
  • CH6.2: Saving your background image

CH6.1: Saving your layout image

To save your layout as an image: Layer - Merge Visible or Shift Ctrl E.

Then, choose File - Save As or press Ctrl S to bring up the Save win.dow. Make sure you save your image as a PNG in order to retain image quality.

Yeah, pretty simple, huh?

Spiffy Tip! I always keep on Photoshop file of my layout (with all the layers separate) just in case I need to go back and make changes. In this case, it's better to choose "Save As" rather than "Save" since I don't want to overwrite my PSD file as a PNG file (which can't be edited).

CH6.2: Saving your background image

Saving your layout's easy but your background? That's a bit tougher.

Step 1

In your layers win.dow, select your Background layer. Then Select - All or press Ctrl A. Press Ctrl C to copy your selection.

Next, File - New or press Ctrl N to make a new file. Make your width 100 pixel. For your height, add around 50 pixels.

Step 2

Paste your background to your new file (Ctrl V). Using the Move Tool (V), drag the image so that it's near the top (once you're close, the image should "snap" to place).

Create a new layer and drag it under your current one.

Using the Eyedropper Tool (I), grab the colour at the very bottom of your background image (in my case, it's the light brown near the bottom).

Switch to the Paint Bucket Tool (G). With your new layer selected, click it to fill the layer. Layer - Merge Visible or Shift Ctrl E to merge your layers together.

Step 3

Near the bottom of the Layers win.dow, click the second icon to create a layer mask (see image below for details).

Make sure your Foreground colour is black and your Background colour is white. Select the Gradient Tool (G). See the image below for details:

What this does is "fade" the bottom of the image so that your background will work perfectly with your solid background color. Colour show up differently on different screens so this extra step will help in making sure the background looks perfectly.

Before you save, be sure to apply your layer mask:

And your background is ready! Like saving your layout, File - Save As. Be sure to save as a PNG.


Chapter 7: Adding Text

Chapter 7: Adding Text Adding text to your layout is an important step, but if your text design looks low-quality, that can have a negative impact on your otherwise high-quality image!
  • CH7.1: Choosing the font
  • CH7.2: Size of the text
  • CH7.3: Text placement
  • CH7.4: Adding text to your layout
  • CH7.5: Text design

CH7.1: Choosing the font

For any graphic or layout designer, having a large arsenal of different fonts is important! I download my fonts from dafont, a free resource.

Before we continue adding font to our layout, let's go over some font "categories":

I just chose a handful of examples for each major category. As you can see, cursive or handwritten fonts are very elegant and can add a lot of sophistication to your layout design.

On the other hand, "San serif" and more basic fonts are really useful when trying to create a minimalist or simple design. In any case, I personally like to use more basic fonts for the links.

Themed or fancier fonts are something that isn't widely as they work best on a "case by case" basis. Taking a closer look at the examples, "Churli" is a super cute font, but would you want to use it with a dark, spooky image? Probably not. On the other hand, "All Over" would definitely be a better font choice with a spooky theme.

Let's take a quick look at some layouts I've created in the past, paying close attention to the font choice.

In the layout below, the site's name is "Doodle". Right off the bat, I knew I wanted a "handwritten" font. This would suit the site's name and the overall casual appearance of the layout. Can you imaging layout if the font was something like "Vivaldi"? That's a bit too fancy, especially when paired with the layout image and pastel colours.

While in the previous layout my font choice was mostly based on the site's name, here I looked at the main image. The focal image of the pink flowers and the green leaves gives a very soft and elegant feel. I choose to write the site owner's name in a cursive font. I wrote "portfolio" in San serif font just to create some contrast.

In trying to create a clean, professional theme, I chose to go with a basic font (one that you can find pre-downloaded on your computer). Since the header uses a wood pattern along with bright, bold colours, using a simpler font helps keep the layout from looking too busy.

CH7.2: Size of the text

The site name should be one of the first things a visitor spots when they load your petpage. Don't make it too small or else it won't be visible and the rest of your layout will overpower it.

CH7.3: Text placement

Where you put your text on a layout is super important. Make the best use of space by making sure that your text isn't covering the focal image.

In the layout below, the text is placed above the focal image's arm. This adds a sense of symmetry and creates a more unified feeling for the overall layout. An added bonus is that the character is looking straight at the text. This helps to direct visitor attention to that area as well.

The text is placed within the circle of mushrooms. This uses space effectively and efficiently. Imagine if I placed the text at the very bottom of the banner, or on the top-right corner. That would look very strange! Here, the focal image frames the text.

This text placement is a bit different because I created an entirely new area for the text (I.e. the rectangle behind it). Originally, I planned on putting the text near the bottom right corner (underneath the left hand). However, the image is quite busy so there was less focus on the text. Instead, I positioned the text in a place that overlaps both the content area and the image. This helps create a sense that both of these separate elements are joined by the site title.

CH7.4: Adding text to your layout

There are so many ways to design text! It's an area where you can get really creative and experiment. However, let's recap the basics of adding text to a layout:

Size: The text should be large enough to be seen at a distance, but not too large as to cover the entire layout with giant letters.
Font: The font should work nicely with the layout design. It should be easy to read.
Placement: The placement of the text should work well with the focal image and/or on the layout itself. It should be somewhere immediately visible when loading the layout. It should not cover the focal image.

Step 1

Select the Horizontal Text Tool (T). Click on an area of your layout. Drag and release to create a text box. Now, type in your site name (or whatever text you want as your "main" layout title). For me, I've chosen to type in "My Portfolio". When you're done typing, go to the Options win.dow (near the top) and click the checkmark on the far right (hovering over it, the following text appears: Commit any current edits).

Step 2

We are definitely not leaving our text like that! The first step to editing will be to choose an appropriate font. I want to keep my layout rather simple for a variety of reasons. First, my background is pretty bold and colourful. Second, the image has a lot going on so using a super fancy font will just make everything look more complicated than it should.

Using the Horizontal Text Tool (T), I click on my text to begin editing it again. Highlight the entire site title. In the Options win.dow, the first drop-down menu is where you can select your font. I'll be choosing Harabara as it's one of my favourites. It's not as simple as other San serif-styled fonts, but it's not too fancy like handwritten ones.

You should also take this time to edit the size. I still have some space left on either side of my text so I'll be making it a bit larger. Again, once you're satisfied with your edits, click the checkmark in the Options win.dow to commit to your changes.

Spiffy Tip! Make sure your anti-aliasing method is set to Smooth (setting it to Strong also works). Since you're using a "large" font, don't set it to "None" as your text will look jagged and low-quality.

Step 3

In your Layers win.dow, make sure your Text layer is highlighted (mine says "My Portfolio"). One of the simplest ways to make your text stand out from the rest of your layout is to add a solid border. To do this, go to the bottom of your Layers win.dow, click the first icon (the fancy "F" in a circle), and choose Stroke.

The default colour of the border is red and the size is 3. I'm definitely going to edit the colour and to do this, I simply look in the section called "Fill Type" and click the coloured rectangle to bring up a Color Picker win.dow.

I'll be grabbing a dark brownish colour for my layout.

Spiffy Tip! As always, make sure your "Preview" option is checked since this allows you to see the "real time" edits you're making.

I'm also going to keep my border size at three. For large fonts, I generally choose 2 or 3 as my border size, depending on the style of font. Handwritten/cursive fonts are quite "thin" so choosing a heavy border (ex. size 3) is not a good idea. It'll overpower the text and make it look awkward. On the other hand, simpler or blocky fonts can use thicker borders.

Once you're satisfied with your border, do not click OK! Instead, we're going to edit the text color. On the far left of your Layer Style win.dow, you'll notice a whole lot of options. Highlight the Color Overlay option and go to that win.dow.

Spiffy Tip! Don't just click the little option beside the "Color Overlay" text. You have to click on the text itself to go to the options win.dow.

Since I choose a dark colour for my border, I need to choose a lighter colour for my text itself. As a safe choice, I could go with white but I'm going to add some minor colour to my text by choosing a super light shade from my layout. In the screenshot below, I click the small coloured rectangle to bring up the Color Picker win.dow. Then I click in the area highlighted by the red rectangle (the top portion of my content area).

Step 4

A border and text colour are the very basics of text editing, but here's where you can experiment! Explore the various Layer Styles and see what it does to the text. I added a Bevel and Emboss effect. Here are my settings:

One of the styles that I almost always include with my text design is drop shadow. Here are my settings:

Spiffy Tip! The default colour of your shadow is black but to edit it, click on the coloured rectangle next to the Blend Mode (this is near the top). I usually pick a dark colour from my layout. In this case, I choose a dark shade of brown. Though black is perfectly fine, editing the colour makes the shadow match my layout better. It gives the shadow a more natural look that blends well with your main image.

Let's take a step-by-step look at the edits I've applied to the text:

Pretty easy, huh?

CH7.5: Text design

Text design is all about experimenting with that works and what doesn't. Sometimes, a technique you used for a blocky font won't look that great on a thinner, handwritten font.

Here's a quick chart of the text design issues you should avoid:


Chapter 8: Coding your layout

There are already so many great resources out there that there's really no point in creating my own "how to" code chapter so this page will be less in-depth than other ones. There are coding examples below. I strongly urge that you don't just "copy and paste" but rather try to understand what that piece of coding does.
  • CH8.1: Basic skeleton
  • CH8.2: Input your background
  • CH8.3: Coding Resources
First of all, make sure you upload your layout and background to your image host. We'll need the URL of the image when coding.

CH8.1: Basic skeleton

You should code your layout in a source code editor, rather than Office or the Neopet "edit petpage" section. I use "Notepad", a free program that should come free with any PC. I won't go into major specifics on each coding so I strongly suggest you do further learning/research wherever possible.

In Notepad, I usually start with my style tags:

This spiffy piece of coding is where things like your text styles and content area are designed. It doesn't house your actual site's content. I like to think of it as a "menu" that lists how your layout will look in the end.

Next, I like getting rid of the Neopets copyright and the bar at the top of the petpage:

The sf removes the copyright while hiding tables will hide the Neopets bar.

Important! If you remove either of them, please write out the copyright on your page somewhere:

Copyright 2000-2013 Neopets, Inc. All Rights Reserved. Used With Permission. NEOPETS, characters, logos, names and all related indicia are trademarks of Neopets, Inc., © 1999-2013. ® denotes Reg. US Pat. & TM Office. All rights reserved.

I usually write mine at the bottom of the "credits" section. Additionally, since we "hid" the table, I've create my own version of the Neopets bar:

The resource above can be found at The Lunch Box (in the resource section). There are different shapes and sizes to choose from so if your content area is small, I've also designed small ones as well!

If you use the credit sign above, here's how you code it:

Just input your username and voila! Your credit sign is ready for use.

The code for removing tables is great and all, but what if you wanted to use tables in your content? It wouldn't show up! A super easy solution is to create a new table id:

The piece of coding above basically says "look, if your table's ID name is "normal", then it will be visible". In your content, your table would be coded like this:

Next, we're going to use one piece of coding to code for four different aspects of our layout:

This basically says that all the text in tables, paragraphs, td cells, and the body will be 12px in size, use the verdana font, is #8C8C8C in colour, and has a line-height of 17px. With your text, you don't want to make it too small! Anything less than 8 is too small for easy reading.

Spiffy Tip! Always make sure your text colour is appropriate. Try to stay away from neon or overly bright colours. I tend to stick to neutral colours, like grey.

Every layout needs stylish text styles. Here are some of the text styles for this site: bold and italics.

The code above is what I use for bolded text and it goes between your style tags. The font-weight indicates that yes, I want the text to be bold. Though not entirely necessary, I also like to include font: 9pt verdana;. Sometimes, the font you choose for your bold text styles may be different than what you have for your main body text.

Spiffy Tip! Make sure that your text styles are the same size as your main body text. There's nothing tackier than having your body font at 9pt but your bolded text at a smaller or larger size. This creates uneven sentences in terms of the line-height. Stick to one size!

In your main content, this is how you use the bold text styles:

Next is italics! Here's one of my styles from a layout I use:

Spiffy Tip! Sometimes, text can get hard to read when it's italicized as the "slant" may push your text out of your content area and it becomes hidden. I personally like to bold my italics as well by adding font-weight: bold; to my italics text style.

Get those neat headers!

At this site, there are three headers. Here's what they look like:

Header one

Header two

Header three

Header one is my primary header, or the "main" one I use at the top of each page. In general, H1 headers are larger and more "visible". It acts as a title on your page.

I use H2 (my secondary headers) as sub-titles. It's great for breaking your page into manageable chunks.

Lastly, my H3 (tertiary headers) are used less often, but I always like to have a spare header just in case! I use these to emphasize important sections where needed.

You can find a lot of premade header styles at The Lunch Box (resource page, Site Headers section).

CH8.2: Input your background

Between your style tags, this next piece of coding will code for your background:

For a small piece of coding, this has a ton of different elements! First, url("URL OF YOUR BACKGROUND HERE"); indicates that I want to use a particular image as my background. This is what I'm using (drag and drop for full view):

Because of the way I designed the background, I only want it to repeat horizontally. background-repeat: repeat-x; will do this.

Spiffy Tip! If you wanted it to repeat vertically, change repeat-x to repeat-y and see what happens!

The last bit of the coding is background: #E1A56C; and it's super important! Because your visitors may have different screen resolutions, you need to add a solid coloured background that matches your background image.

In Photoshop, use the Eyedropper Tool (I) and grab a colour near the bottom of your background image. If you choose a random colour (or grab a colour that's near the middle of your background image), then the background colour won't perfectly match your background image.

If you've chosen the right colour, you should see no "discontinuity" between your background image and your solid background colour. For instance, my background image has a height of 550 pixels. However, let's say I viewed my layout in full screen. That's about 900 pixels! On the layout, the top 550 pixels is the repeated background, while anything below it is the solid colour background.

CH8.3: Coding Resources

There are already a lot of resources for coding your content area and anchor links so I won't discuss it here. Instead, this next section will focus on bringing together these resources for your convenience!

Zel's Anchoring Guide is absolutely a "must read" because she offers you the coding as well as in-depth tips on what the coding means.

The page only offers the style sheet coding but not the actual coding for your content area. This is the content area themselves:

Spiffy Tip! When positioning and creating your anchor divs, I always found it useful to add border: 1px solid red; and border: 1px solid blue to the two div styles. This just gives me a better visualization of where it is on the page as well as the width/height.

The coding and design section at The Directory has a ton of CSS and HTML petpages. There's definitely no shortage of sites you can check out to code your layout image.

How to code a blog-style layout with in-page anchors

This aptly named guide teaches you how to make anchored layouts. It also has coding for removing the neopets bar and copyright.

CSS Guide has a lot of coding for you to pick up, mostly the basics such as centering font and coding images.

This page has their coding divided into two categories: Basic and Advanced. Some neat coding in the Advanced section includes designing stylish links and creating images that change when you hover on them.

Neopets coding tips, tricks, articles from doubleSTANDARD

This page is not your typical coding resource, but it's still something I would recommend. The guides are written in article form so it may be difficult to find exactly what you're looking for. I recommend scrolling to the very bottom and checking out the index of all the articles, just to see if there's anything useful for you.

Sitely


Link Back


Listed At

Smiley Central, Desolace, Luminescent

Credits

Layout designed and coded by Turnip (background pattern from Subtle Patterns, edited by me; PNG from Details)
Tutorials are written by the person credited. Please do not copy or redistribute elsewhere.
Resources are from The Lunch Box; all graphics are linked for credit.
Designer's Corner was inspired by Aesthetic.
Textures are from Details, swimchick, dA.
Copyright 2000-2013 Neopets, Inc. All Rights Reserved. Used With Permission. NEOPETS, characters, logos, names and all related indicia are trademarks of Neopets, Inc., © 1999-2013. ® denotes Reg. US Pat. & TM Office. All rights reserved.

Opened April 2013




Heads Up! You're about to leave Neopia!

You've clicked on a link that will take you outside of
Neopets.com. We do not control your destination's website,
so its rules, regulations, and Meepit defense systems will be
different! Are you sure you'd like to continue?



It is a journey
I must face...alone.
*dramatic music*
I want to stay on Neopets,
where the dangers of
Meepit invasion
are taken seriously.
Heads Up! You're about to leave Neopia!

You've clicked on a link that will take you outside of
Neopets.com. We do not control your destination's website,
so its rules, regulations, and Meepit defense systems will be
different! Are you sure you'd like to continue?



It is a journey
I must face...alone.
*dramatic music*
I want to stay on Neopets,
where the dangers of
Meepit invasion
are taken seriously.
Heads Up! You're about to leave Neopia!

You've clicked on a link that will take you outside of
Neopets.com. We do not control your destination's website,
so its rules, regulations, and Meepit defense systems will be
different! Are you sure you'd like to continue?



It is a journey
I must face...alone.
*dramatic music*
I want to stay on Neopets,
where the dangers of
Meepit invasion
are taken seriously.
/help/bumper/headers/log-in-to-facebook

NEOPETS, characters, logos, names and all related indicia
are trademarks of Neopets, Inc., © 1999-2014.
® denotes Reg. US Pat. & TM Office. All rights reserved.

PRIVACY POLICY | Safety Tips | Contact Us | About Us | Press Kit
Use of this site signifies your acceptance of the Terms and Conditions