Figure 1: kuler.adobe.com

So you’re finally stepping up to the plate to make your own website from scratch? Step one, make the plan. Step two, gather your resources. Step three, start developing. As a developer, your main focus is probably on steps one and three: the actual creation of the website – how are you going to code this wonderful monstrosity of an idea you have in your head? This usually leaves the visuals as a secondary focus, and when it comes time to find the images for your website, there might be little to no budget left. So how do you cut down (or out) the graphics budget for your website to compensate? You have two options: you could create the images yourself, or utilize free online resources.

In this article, we’ve compiled a list of do-it-yourself tips, plus other free online resources that can help you greatly reduce the need to purchase graphics.

Getting Started – Planning Your Website’s Theme

Before you start making any images for the site, my first recommendation is to establish your theme so you can ensure that the elements you incorporate are consistent. This means that your colors, fonts, and textures should be similar, or at the very least, complimentary.

Colors

Let’s begin with colors. Here are three great resources to help you choose a color palette that best suits not only the purpose of the site, but your own personality as well:

Adobe Kuler (https://kuler.adobe.com/create/color-wheel/)
Choose a color rule (like analogous or monochromatic) and adjust the color wheel to see the corresponding color set.

Figure 1: kuler.adobe.com

Figure 1: kuler.adobe.com

COLOURlovers (http://www.colourlovers.com/palettes)
This is more of a social hub where people can create and share their own color palettes. Here you can find millions of premade color palette suggestions posted by other users.

Pictaculous (http://www.pictaculous.com/)
This site lets you upload an image that inspires you and it will automatically generate a color palette based on the key hues of that image.

Fonts

Fonts can also make a difference in the design of your website. Keep in mind that for the actual text of the website, you’ll probably want to stick to web safe fonts (http://www.w3schools.com/cssref/css_websafe_fonts.asp), but you can use any font you want for images that require text, like buttons and logos. Here are a few places you can browse and test the look of different fonts:

Wordmark (http://wordmark.it/)
Wordmark lets you type your sample words into the field at the top of the page and see that text displayed in different font styles. You can then scroll through, select your favorites, and click “filter selected” to view and compare them side-by-side.

Dafont (http://www.dafont.com/)
Here you can browse and download new and unusual fonts of your choice. Keep in mind that these fonts can fall into different categories, like “Free for personal use,” “Donationware,” or “100% Free.” Make sure you double-check which category your fonts belong to before you download them.

Figure 2: dafont.com

Figure 2: dafont.com

Now that you have your colors and fonts picked out, you can apply them to the collection of images you’ll use on your website.

Creating and Gathering Buttons

Clickable images are an essential part of any website. Here are some free tutorials on how to create button images using Photoshop or GIMP (the free, open source alternative to Photoshop):

Creating Photoshop Buttons and Icons for Beginners by Alexandria O’Brien (http://learntoprogram.wpengine.com/creating-photoshop-buttons-and-icons-for-beginners/)
In this extended tutorial, you’ll learn how to make a simple button and a few matching icons for “Home,” “Contact,” “Comment,” and “Portfolio” links.

Figure 3: One of the buttons demonstrated in “Creating Photoshop Buttons and Icons for Beginners.”

Figure 3: One of the buttons demonstrated in “Creating Photoshop Buttons and Icons for Beginners.”

How to Make Glossy Buttons in Photoshop by Ronald Bien (http://naldzgraphics.net/tutorials/how-to-make-glossy-buttons-in-photoshop/)
This tutorial illustrates how to create circular buttons that have a glossy shine.

A Design Tutorial on Creating Shiny Buttons with GIMP by Reynante Martinez (http://www.youthedesigner.com/2011/02/07/a-design-tutorial-on-creating-shiny-buttons-with-gimp/)
Here’s another nice, lengthy tutorial on how to create a button that has that glossy look – only this time, in GIMP.

Figure 4: The tutorial from YouTheDesigner

Figure 4: The tutorial from YouTheDesigner

Gimp Tutorial: Creating a Push Button by Blogger user Jozmak. (http://jozmak.blogspot.com/2007/08/gimp-tutorial-creating-push-button.html)
In this tutorial you learn how to create a circle button that appears pushed in.
If you’re not quite brave enough to attempt making button images in your own software, fear not! Alternatively, you can use online generators to make the button for you, or you can download free button images from sites like these:

Da Button Factory (http://dabuttonfactory.com/)
Here you can use the online generator to create a basic button. Once your button is created, click the “download” link next to the button’s given URL in the middle of the page to get a .PNG (or other) file type.

GR Sites Button Maker (http://www.grsites.com/generate/group/2000/)
This site offers a more detailed button generator that breaks down every step of the button image making process.

Figure 5: The Button Maker from GRSites.com

Figure 5: The Button Maker from GRSites.com

Figure 6: Some of the button creation options with GRSites Button Maker

Figure 6: Some of the button creation options with GRSites Button Maker

Free Website Buttons from entheosweb.com (http://www.entheosweb.com/free-downloads/website_buttons/default.asp)
Here you can chose a set of premade buttons in an array of colors to directly download. It’ll give you a zipped file with each colored version of the button as a JPEG.

Free Web 2.0 Buttons PSD by freepsdfiles.net (http://downloadpsd.com/gui/free-web-2-0-buttons-psd)
At this site you can find an even larger selection of button types (although not in as many colors!) to download as a Photoshop file. After you get the file, it’s just a matter of choosing from the different layers and exporting the individual images to use on your website.

Figure 7: Free Web 2.0 Buttons PSD by freepsdfiles.net

Figure 7: Free Web 2.0 Buttons PSD by freepsdfiles.net

All-free-download.com (http://all-free-download.com/free-icon/free-buttons-for-website.html)
Here I’ve found a number of sizable buttons for download. Just navigate to the ones you want and click the “Click here to free download this file now!” link on the right-hand side.

Repeatable Textures for the Background

Interested in adding a texture or pattern to your website background? Listed below are a few tutorials to get you started. Keep in mind that when using patterns and textures on your website, the more subtle your design is, the better. Your visitors will appreciate not having to strain their eyes to see around heavily detailed or contrasting backgrounds, especially if you have the body of the text directly on top of the texture (which is also not recommended).

How to Make a Photoshop Pattern on wikiHow (http://www.wikihow.com/Make-a-Photoshop-Pattern)
This is a basic overview of how to add a texture into your Photoshop’s pattern options. Use this to add your own custom patterns you’ve made, or ones you’ve already downloaded from other sources. Once your pattern is registered in Photoshop’s pattern gallery, you can then use it on any shape and it will automatically scale and tile.

Create Your Own Two-Minute Textures in Photoshop by Gabrielle Gosha (http://www.sitepoint.com/create-your-own-two-minute-textures-in-photoshop/)
This tutorial demonstrates how to use Photoshop’s built-in filters in order to create a random-looking pattern that can be made to look like rock or metal.

Figure 8: “Create Your Own Two-Minute Textures in Photoshop” by Gabrielle Gosha

Figure 8: “Create Your Own Two-Minute Textures in Photoshop” by Gabrielle Gosha

How to Create a Seamless Texture in Photoshop by PhotoshopTextures.com (http://www.photoshoptextures.com/texture-tutorials/seamless-textures.htm)
From this site you can learn how to take a picture and alter it so that it can be seamlessly tiled when used as a repeating texture patch. The tutorial is aimed at creating texture patches for a 3D plan, but you could easily apply this technique to a picture of your favorite fabric, for example, and use that for your website’s background.

Tileable Textures by Adrian Likins (http://www.gimp.org/tutorials/Tileable_Textures/)
This tutorial goes through the process of creating textures in GIMP 1.2 using the gradient brushes.

Tutorial: Create perfectly repeatable textures from gimpusers.com (http://www.gimpusers.com/tutorials/create-repeatable-seamless-textures)
Just like seamless texture tutorial explained how to prepare a picture to be used as a repeatable texture patch, this tutorial goes over how you would do that in GIMP.

Figure 9: Tutorial: Create perfectly repeatable textures

Figure 9: Tutorial: Create perfectly repeatable textures

And finally, here are a few spots where you can find some free textures of your choosing.

Archive Textures (http://archivetextures.net/)
Archive Textures features hundreds of images that can be downloaded and used as a repeatable tile. Just choose the one you want, click on the “Download Now” link under the agreement statement that pops up. Then copy the enlarged image directly from the browser.

subtlepatterns.com (http://subtlepatterns.com/)
Subtle Patterns offers Photoshop-ready patterns that can be plugged in. Rather than download the plugin, you can just chose a pattern to download directly and manually import the .PNG file into Photoshop using the technique demonstrated in the wikiHow tutorial previously mentioned.

Figure 10: subtlepatterns.com

Figure 10: subtlepatterns.com

webtexture.net (http://www.webtexture.net/tag/background/)
This site offers daily high-quality HD textures for free. Just choose the set of textures you’re interested in and scroll down to click on the “Download the File” button at the bottom of the post.

As you can see, the graphics budget for your website doesn’t have to be extravagant…or even existent at all, if you know a few good resources to help you along the way! We hope this article can help you realize that you don’t need to be scared of the design process of any project. There are plenty of other options, including making your own images.

By Alexandria O’Brien

Leave a Reply

Your email address will not be published. Required fields are marked *