Archive for September, 2007

More Starbursts Than You Can Shake a Stick At

Starbursts/sunbursts have always looked cool to me. It probably stems from my affinity for all things Japanese, but they’re just so fun to make and use and look at. In this tutorial I’ve included about a billion different ways (or four) of making starbursts in Photoshop - each looking a bit different than the other.

Starburst

So flip a coin, roll a die, or hope for divine intervention, and pick your path so we can get started already!

Read the rest of this entry »

The Midas Touch: AKA Turning Objects into GOLD!

What if everything you touched turned to gold?

Now you can have that power - without the donkey ears.

This is a tutorial on turning objects into gold with Photoshop. I find this works better on smooth, shiny, or artificial items - although this can be applied to living things the effect is not as convincing.

Gold Image

Gold Image

This tutorial was suggested by Mizaks, owner of The Critical Critics.

Read the rest of this entry »

Mask Your Photos to Make Curved Edges (+ Other Strange Shapes!)

Have you always wondered how to get a photograph to have such nice, rounded edges?
Well, using masks, there is an easy way to do that in Photoshop. And the effect doesn’t stop at curved edges! If you can lasso it, you can mask it.

Mask

Mask

Read the rest of this entry »

Dead Easy Complex Geometric Shapes

(thank you knmt for sending me this tut!)

In this tutorial, I’ll show you how to create spiffy-looking complex geometric shapes using pre-defined Photoshop shapes. The final effect looks pretty cool, almost like tattoos, and they are dead easy and fun to make!

geometric shapes

Let’s get started.

Read the rest of this entry »

A Plethora of Free Icons

Icons are usually small, detailed works or art that are useful for a heckuvalotta things. I’ve seen them used a lot on the web as navigation or used to accent a button, as well as in interfaces/program design, and on desktops for us compulsive customizers.

Here I’ve collected a list of sites which provide free icon sets. Although you don’t need to pay for these, since they are free, it does not mean you can do whatever you want with them. Make sure to read the respective terms and conditions for each website!

FamFamFam
http://www.famfamfam.com/lab/icons/

Icons provided by FamFamFam (the brainchild of Mark James) are frequently spotted all over the web. Offering a massive collection of over a thousand different carefully crafted icons, this should be one of the first places you stop by on your hunt. His Silk Set is immensely popular, and he’s designed a Mini Set purposely for the web, as well as a collection of minilicious Country Flags.

2pt3 - Twotone Icons
http://2pt3.com/news/twotone-icons-for-free/

Design by Paul Jarvis, this pixel-perfect 75 icon set comes in - you guessed it - two tones. Bold, forward, simple, and straight to the point! He’s also provided the PSD files as well, should you wish to change the colours.

MouseRunner
http://www.mouserunner.com/Spheres_Icons_Index.html

MouseRunner is run by Ken Saunders, a legally-blind graphic artist. That hasn’t hindered his ability in the least - he has designed quite a handful of different icon sets, all of which sport a very Web 2.0 glossy style. His icons are well-crafted and come in a variety of colours. Being spherical, they probably will find their use as buttons or badges of honour (He’s a big Firefox fan, and it shows!).

Drunkey Love
http://www.el73.be/drunkey-love/downloads/

The Drunkey Love iconset is another large collection (100+!) of tiny, hand-pixelled icons. Similar to the FamFamFam Silk set, but with a more rugged look, these icons will surely find it’s calling on the web. Either that, or they can be left to ferment in a folder, available for whenever you need a quick pick-me-up.

Crystal Icons
http://commons.wikimedia.org/wiki/Crystal_Clear

Everaldo Coelho has painstakingly made and collected over 200 large, slick, crystal icons, and has passed them on to you to use freely. The link above leads you to a page where you can view all the icons available. Make sure to visit Coelho’s Development Website to download the (huge!) icon files.

N.Design
http://www.ndesign-studio.com/resources/mini-pixel-icons/

Gorgeous and practical, N. Design Studios has really outdone themselves with this icon set. Designed by Nick La, these are all extremely well-made, and dead useful. The set includes alternate icons for file types, shopping carts, credit cards, navigation buttons, print icons - you name it! Most icons also come in complementary colours as well. However do take a look at the license - at the time of writing you’re free to use up to ten icons without credit, but after that it’s either link back or pay a small fee.

Matt Ball
http://www.mattballdesign.com/portfolio/

Enter Matt Ball, and his delightful, colourful Mac-looking icon sets. His Developer Icon pack is particularly useful for toolbars and application design, and he’s also got a small set of icons featuring mobile phones to download freely as well.

Mini Icons
http://www.brandspankingnew.net/archive/2006/12/hohoho.html

Mini means mini! These eyeball-straining icons are a mere 10×10px, and look clear and great. It takes skill to design something so small and yet still recognizable! Not to mention, this is quite a large collection, with 113 icons to date. He’s also created slightly larger (16×16px) Doctype Icons, with 42 of those making up the set.

IconBuffet
http://www.iconbuffet.com/

I’ve saved my favourite for last! IconBuffet offers a tasty platter of icons in bite-sized morsels. They work differently from the other free icon sites - click on ‘Free Delivery’ at the top - you will need to sign up to receive your first (random) icon set. Following that, you will receive a free ‘delivery’ each month - and you can even trade and give deliveries to friends! But keep at it and soon you’ll be sporting a large collection of slick, scrumptious, and whimsical icons.

Hope that was enough to get you started with your collection. If you’ve found other great icon resources leave a comment and I’ll check it out!

Your Favicon is Showing

Regular readers of the Minty Ferret may have realized that I’ve recently added a favicon to the site. Favicons are little images that show up beside the web address and bookmarks - just look above. See the ferret paw-print? That’s a favicon.

Favicon Tutorial

So here’s a quick tutorial on making a favicon and uploading it so it works on your website.

Open a 16×16px document.

Favicon Tutorial

Design your favicon. You only have a small area to work with, so keep it simple! You might want to stick to just a letter, a portion of your logo, or something uncomplicated that represents your website.

Favicon Tutorial

Now select File > Save for Web.

Favicon Tutorial

Although favicons are .ico files, there is no option to save it as such in Photoshop. We need to save it as a .gif and then use a third-party software to convert it to a favicon-friendly file.

Favicon Tutorial

Once you’ve finished saving it as a .gif, head on over to Favicon from Pics. Upload your .gif image to their site.

Favicon Tutorial

Now download the provided file to your computer.

Favicon Tutorial

Unzip the folder…

Favicon Tutorial

And upload the favicon.ico file to the root of your website.

Favicon Tutorial

Add the following code between the HEAD tags on every page you want your favicon to show.

Favicon Tutorial

<link rel=”Shortcut Icon” href=”/favicon.ico”>

Note: If you’ve done this and your favicon is still not working, you have have to specify the full path to the icon. For example, I had to use http://mintyferret.com/favicon.ico instead of /favicon.ico to get it to work.

Upload the revised files to your webspace. And there you have it! Your very own favicon.

Favicon Tutorial

Looking for favicon inspiration? The Favicon Gallery has a nice list of favicons for you to peruse.

Thick Diagonal Lines and Stripes in Photoshop

Here I will give you a very quick tutorial on how to make diagonal lines / stripes in Photoshop. However, if you’d rather have them ready-made, scroll to the bottom of the post to download my Diagonal Line Patterns for Photoshop.

First, open a square canvas made of odd-numbered pixels. I used 15×15px in my first few patterns and then expanded it to a 25×25px canvas.

Now grab the pencil tool and set it to 1px.

diagonal lines

Now you simply have to make the shapes shown below to achieve the desired effect. Every single one of these are included in the Diagonal Line Patterns package at the bottom of the post for you to download.

diagonal lines diagonal lines
A 1-px line
diagonal lines diagonal lines
A 3-px line. Notice the added dots at each corner to make the pattern seamless.
diagonal lines diagonal lines
A 5-px line. As the width increases, you need to compensate for that by filling in the corners in a diagonal fashion as well.
diagonal lines diagonal lines
A 7-px line.
diagonal lines diagonal lines
A 7-px line, this time on a 25×25px canvas.
diagonal lines diagonal lines
A 9-px line.
diagonal lines diagonal lines
A 11-px line.
diagonal lines diagonal lines
A 13-px line.

And so on and so forth. Then simply select Edit > Define Brush Pattern to create your Thick Diagonal Stripes pattern!

The patterns you can download below are the same as those shown above, and will look something like this once you’ve loaded it up into Photoshop:

diagonal lines

And without further ado, here is the link to download the package. If you make anything with this pattern that you wouldn’t mind sharing, please contact me or post a comment and I’ll gladly showcase your work here!

>> Download the Thick Diagonal Lines Package Here <<
Downloaded 6430 times