Don't want to spend all that money on Photoshop? There is a free alternative, GIMP, or GNU Image Manipulation Program. A good alternative with a lot of support and plenty of tutorials to help you learn GIMP. Here is a list of a few GIMP Tutorials. Most of the sites these GIMP tutorials are on have many other tutorials. These should be enough to get you started though.

GIMP Tutorial - The User Interface

(more…)

Popularity: 13% [?]

It's the weekend! Here are a few web design and graphic design related posts I stumbled upon (not from StumbleUpon just regular browsing) over the week.

45 Photo Editing Tutorials for Photoshop - A great list of tutorials to help you learn about photo editing in Photoshop.

Designflavr - I just found this site and I really enjoy it. "DesignFlavr is a breed of website that hopes to deliver the latest and freshest art and design straight to you with no frills and no hassle. The concept behind this website is to help support the vast and ever growing number of Designers and Artists that reside here on the World Wide Web."

css-warfare - Another inspiration site with a lot of good CSS designs.

25 MORE Reasons You Might Be A Hardcore Graphic/Web Designer - A list of reasons you might be a hardcore graphic or web designer over at bittbox. The first list is also available.

Popularity: 12% [?]

Here are ten band gig, or show, posters. Old or new gig posters can always be used as inspiration. They usually have some great typography elements, nice use of colors, and interesting imagery. I never really thought about looking at gig posters for inspiration until a recent trip to Nashville, Tennessee. There were posters everywhere down there. Hatch Show Print posters are found all over in Nashville. I'm only showing ten posters, but there are literally thousands of gig posters out there. Some of these are Hatch Show Print and some are ones I found at GigPosters.com or GIGART.com.

(more…)

Popularity: 13% [?]

For me, one of the best parts of running this blog is that I am always learning something new. Doing research for new posts and finding new resources and sites helps me expand my knowledge and pass it on to the readers. With all the CSS I have written and learned, I never really knew about global resets. I have seen them before in other peoples code, but didn't pay much attention to them.

I recently came across a great article over at perishablepress.com that explains what they are used for and gives a long list of different types of resets. I have unknowingly used resets before when setting padding and margin to 0 for different elements and then adjusting it to my liking.

It's important to design sites with cross-browser compatibility in mind. With the different ways that browsers handle CSS and the fact that each browser has it's own default setup for things like margins and padding, adding these global resets can really help the design process. I plan on implementing some of these resets in future design projects.

Here is an example of a CSS reset. To find a lot more check out this Killer Collection of Global Reset Styles.

* {
     padding: 0;
     margin: 0;
}

The * is called a wildcard symbol. Here it is used as a wildcard selector which means that these properties are applied to every element. So, all the padding and margins are reset to 0.

You can add other properties to the wildcard selector. Some people will add border: 0; and outline: 0;. The above, with padding: 0; and margin: 0;, is one of the most popular CSS resets used.

The post at perishablepress is worth a read, and they have a lot more reset options.

Popularity: 13% [?]

Let's take a look at styling anchor tags, or links, using CSS. We will be going over the CSS pseudo-classes that are used with links - link, visited, hover, and active. First, let's take a look at the link pseudo-class in CSS.

:link - this pseudo-class is used to style a normal unvisited link. When you are styling links you should put this pseudo-class first.

a:link
{
color: #339966;
}

Notice that we use the HTML tag, or selector, a because that is how a link is represented in HTML. The :link represents the pseudo-class. Then you set your properties between the curly braces. This CSS will change all the unvisited links to a green color.

:visited - this pseudo-class is used to style a visited link. When you are styling links you should put this pseudo-class second.

a:visited
{
color: #00ffff;
}

You will see that most sites will set the visited link color to the same color as the normal a:link color.

:hover - this pseudo-class is used to style the mouse over effect of a link. When you are styling links you MUST put this after a:link and a:visited.

a:hover
{
color: #FF0000;
}

:active - this pseudo-class is used to style an activated link element. When you are styling links you MUST put this after a:hover.

a:active
{
color: #FF00FF;
}

This effect is seen while clicking the link. You will find the a lot of sites will style a:hover and a:active the same.

Putting it together in the HTML.

<html>
<head>

<title>Link and pseudo-classes</title>

<!– Embedded Styles –>
<style type="text/css">
a:link
{
color: #339966;
}

a:visited
{
color: #00FFFF;
}

a:hover
{
color: #FF0000;
}

a:active
{
color: #FF00FF;
}

</style>

</head>

<body>
<p>
<a href="#">A Link</a> Lorem ipsum dolor sit amet,
consectetuer adipiscing elit, sed <a href="#">diam nonummy
nibh</a> euismod tincidunt ut laoreet dolore magna aliquam
erat volutpat.
</p>

A Link Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

You can see how the styles effect the links. You can also combine these anchor CSS pseudo-classes with regular CSS classes. This can help you style links differently throughout the page.

a.className:link, a.className:visited
{
color: #ff0000;
text-decoration: none;
}

a.className:hover, a.className:active
{
color: #00ff00;
text-decoration: underline;
}

The above CSS shows you how to add a class name to the pseudo-classes and how to style multiple elements at the same time. className can be whatever you want to name your class. You can put the :link and :visited pseudo-classes together by adding a comma between declarations. The HTML would look like this:

<p>
<a class="className" href="#">A Link</a> Lorem ipsum
dolor sit amet, consectetuer adipiscing elit,
sed <a class="className" href="#">diam nonummy nibh</a> 
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>

All you need to do is add class="className" to the anchor tag.

A Link Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Styling links using CSS is easy - just remember to put the pseudo-classes in the correct order - :link, :visited, :hover, :active.

The HTML

Popularity: 19% [?]