freeyourdesign

A Few GIMP Tutorials

fyd — Wed, 07 May 2008 11:35:46 +0000

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

GIMPLite Quickies

Important GIMP hotkeys

Transparent Glass Lettering

Glow Effect

How to Create a Gradient Background Image in GIMP

Making a Web 2.0 Logo in GIMP

Make a Gimp pattern from scratch

Quickmask Tutorial

How To Create Your Own Website Design Using Gimp

BG Tutorial 1: Caution tape

Vista Button

30 Ultimate Web 2.0 Layer Styles for Gimp

What's Good on the Web

fyd — Sat, 03 May 2008 15:06:40 +0000

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.

Inspirational Band Gig Posters

fyd — Fri, 02 May 2008 11:42:45 +0000

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.

CSS Global Reset Styles

fyd — Wed, 30 Apr 2008 11:33:36 +0000

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.

CSS Tip - Using Link Anchor Pseudo Classes

fyd — Mon, 28 Apr 2008 13:32:35 +0000

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.




<span class="text">Link and pseudo-classes</span>

<!– Embedded Styles –>






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

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:

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

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

CSS Tip - Different Color Borders

fyd — Fri, 25 Apr 2008 11:50:45 +0000

A quick CSS tip. Don't want your css border to have the same color for every side. Well, you can make each side have a different color - it's easy.

.exampleBox
{
width: 100px;
height: 100px;
border: 3px solid #000000;
border-color: #ff00ff #00ff00 #0000ff #00ffff;
}

Some text in the box

Let's take a closer look at the css border properties. We start off by creating a border: that has a 3px 'stroke' that is solid and the color black. The next property we use is border-color:. The format here is TOP, RIGHT, BOTTOM, LEFT - or clockwise around the square starting from the top. Even though we set a color in the border: property, we put border-color below it which gives it precedence - or it 'overwrites' the border's color.

Need the HTML - I used an embedded stylesheet here, but this will work the same in an external stylesheet.



<span class="text">CSS Different Colored Border</span>








Some text in the the box

Web Design Code Rap SEO Rapper

fyd — Wed, 23 Apr 2008 11:40:00 +0000

If you haven't seen these rap videos by Poetic Prophet, aka SEO Rapper, you've gotta watch, or at least listen, to them. This guy is actually rapping about web design and search engine optimization, and they are full of good information. All the lyrics are posted on YouTube, just click (More info) on the right just below the users info - in case you can't keep up with what he is saying.

He has a few other videos…
Link Building 101 Rap
Paid Search 101 Rap
Social Media Addiction Rap
Conversion Closing Rap
Worth a watch and you might actually learn something.

Photoshop Tutorial - Using Textures

fyd — Mon, 21 Apr 2008 12:26:58 +0000

Adding textures to your work in Photoshop can really add a sense of detail. Depending on the textures and how you use them, they can help make a piece look more realistic, or grungy, or even cartoonish. They can really define a Photoshop piece. So, let's learn how to bring a texture image into Photoshop and use it to help our artwork look better.

First of all you need a few files - if you have your own textures that's great. I am using a couple of concrete textures. We also need some sort of object to add the texture to. I'm just going to use an RSS icon, but feel free to try other things, like text.

The Background

Open a new file. I made mine 800px X 600px. The size doesn't matter that much.

Fill the Background layer with a color. I think darker colors look better with the concrete textures we will be using. My color #2c2721.

Create a new layer and name it light spot.

Grab the Gradient Tool. Make it a Radial Gradient and pick a very light gray and a medium gray as your background and foreground colors. Foreground #e1e1e1 Background #898989
Drag from the center of the image almost to the top.

Set the Blending Mode for the layer to Overlay
This gives us a spotlight look.

Texture the Background

Now, we will add a texture to the Background layer. I will be using the second concrete texture from above.

Go to File->Place… and browse to where you saved the second concrete texture from above. Select it and click Place.

The image will come in ready to be resized or moved around. Resize it to cover the whole image/background and hit Enter.

Rename the layer that was created to bg texture.

Right-click the bg texture layer and select Rasterize Layer.

I have found that changing the Layer Blending mode to Multiply works best for texturing. Feel free to experiment with other Blending Modes. Like Overlay, Soft Light, and Hard Light.

Change the bg texture's Layer Blending mode to Multiply and adjust the opacity to about 50%.

What we've got so far.

The Icon

Next, we will bring in our next item to texturize. I'll be using the RSS icon from above. If you are using text, you don't need to bring anything in - just type out your text.

Go to File->Place… and navigate to where you saved your RSS icon. Select it and click Place.

Resize the image if you need to and hit Enter. Rename the layer icon and right-click the layer and select Rasterize Layer.

Double-click the icon layer to change its Layer Styles. Add a Drop Shadow and change the Angle to 90.

Next, right-click the icon layer and go to Duplicate Layer… rename it reflection and hit OK.

Drag that layer below the icon layer. Double-click the reflection layer to change its Layer Styles and remove the check by Drop Shadow.

With the reflection layer selected. Go to Edit->Transform->Flip Vertically.

Select the Move tool (keyboard shortcut 'v'), hold down the shift key, and drag the reflection down below the other icon.

Now we will add a Layer Mask to make the reflection fade out.

Still on the reflection layer, click the Add Layer Mask icon at the bottom of the layers pallet.

Grab the Gradient tool - Foreground color #626262 Background color #000000.
Start your drag at the top to the reflected icon and drag to the bottom of it.

Create a new layer and name it shadow.

Grab the brush tool(keyboard shortcut 'b') and set the color to black, size to about 65, and Hardness to 0%.

Brush just underneath the main icon. Set the shadow layer's Opacity to about 35%.

Finally - Texture the Icon

Now, we can add a texture to the icon. I will be using the first concrete texture from above.

With the icon layer selected, go to File->Place… and browse to where you saved the first concrete texture, select it and click Place.

Resize the texture if you need to, I just left it the size it came in at - we will get rid of the extra later - hit enter.

Rename the layer icon texture and right-click the layer and select Rasterize Layer.

Change the icon texture layer's Blending Mode to Multiply and set the Opacity to about 50%.

With the icon texture layer selected, hold down the ctrl key and left-click on the icon layer's thumbnail to make it our selection.

Now, hit ctrl+shift+i to invert the selection or go to Select->Inverse.

Make sure the icon texture layer is still selected and hit the delete key on your keyboard. This will get rid of the extra texture image we just brought in.

And there you go - the finished product.

Click to Enlarge

Download Files

Free Download Custom Textfield Search Field Backgrounds

fyd — Wed, 16 Apr 2008 11:40:59 +0000

We got an idea on how to implement custom textfields in CSS and HTML in an earlier post. So, I went ahead and put together a few free textfield or search field background images. These are just some examples to give you an idea of what you can create. I made them in Illustrator and they are free. I have also included the HTML and CSS for each image as a reference. The download below comes with png files, gif files, the CSS, the HTML, and the Illustrator file. Everything you need to get started.

HTML EXAMPLE

Download Files

Toilet RSS Icon

fyd — Wed, 16 Apr 2008 03:33:23 +0000

The original icons can be found in a post at Smashing Magazine Fresh, Free and Gorgeous RSS/Feed Icons.

Every time I see this icon all I think of is putting the little orange guy on a toilet. It's just the newspaper and the sitting position he his in - it makes me laugh. So, I went into Illustrator and

Just a little humor.

So, it doesn't look nearly as great as the original icon set. The set looks great - very well done - thanks Dirceu Veiga - Icons by: FastIcon.com - nice work.