Log in

Photo Sharing and Video Hosting at Photobucket

Software: Photoshop CS3, though it is manageable with older Photoshop versions.


[x] filters
[x] blending modes
[x] shortcuts
[x] tweaking and saving default brushes

Difficulty: intermediate. Basic knowledge of Photoshop would come in handy.

- All you might need for this tutorial is an image of a match, which you can cut from the original image and insert into your canvas. Though you can, of course, make the match yourself.
- By following this tutorial, you will most certainly end up with many layers. To save some time it might help to name some of them. I’ll drop a note on which, though you can name wherever you think it’s necessary.
- I’ll mostly be working with shortcuts today.
- There will hardly be any specific settings given in this tutorial, simply because the methods used here call for different settings each time. No two shapes will be the same in form or size, and thus the settings for each will consequentially be up to the maker.
- This graphic takes time to make, so you might like to bring some along.
- If you start the tutorial and don’t have time to finish it, save it as .psd file so you can work on it again another time without losing any of your layers.

readCollapse )

This tutorial took a lot of time, but I hope that some of you found it worthwhile and enjoyable.
I’d be very happy to see your results!

Should you have any questions concerning the features in this tutorial, feel free to drop a comment here and ask.

Thank you very much for reading!


How to:
Download the button of your choice to your computer, then upload it to your image hosing site (e.g. photbucket dot com).
Then copy and past the html code from the text area below, and paste it into your profile.
Hightlight the part that says ‘the_URL_of_your_image_comes_here’ and paste the url of your image over that part. (Hit the space-bar once after you have pasted if necessary.)
Save the changes in your profile and your done.

Thank you very much for your support!

buttonsCollapse )
Note: This site will be sporadically updated for different buttons and buttons-styles. Drop by at the community’s profile every now and then if you’re interested.
Tutorial aspects today:

Working with groups.
Free transform specials.
Making buttons that animate on mouse-hover for your website.
Making buttons/graphics that link to another site.

[Photo Sharing and Video Hosting at Photobucket]

A photoshop cs3 tutorial, but any of these effects can be achieved with any of the earlier photoshop versions. I am sure that this tutorial is translatable.
You will not need Image Ready or any other type of animation software.

Notes: Keyboard shortcuts are in the brackets.

Before you start:
If you are only interested in the html codes required to turn an image into a link – the html that is usable in your Livejournal profile – please scroll all the way to the bottom of the tutorial: “Finishing off #2.”
If you are interested in how to create an on-mouse-hover button as shown in the example image above, so you can use it in your website, please follow the tutorial… or the parts of the tutorial you would like to apply to your animated image.

tutorialCollapse )

Other examples using this method:

[Photo Sharing and Video Hosting at Photobucket][ Photo Sharing and Video Hosting at Photobucket]

I hope this tutorial is useful or helpful to some of you, and that you enjoyed it.
Should you have any questions, feel free to comment here.
Your opinions, suggestions or critiques on this tutorial would be very appreciated. I’d like to improve, and for that, I need your help. =)

Thank you very much for your attention!


I'm so random today...

I just saw a tutorial that made me laugh.
Icon made in six steps, the poster said. I couldn't believe someone would require that many steps to achieve that kind of effect, so I went to check it out.
Six steps indeed (more if you go into detail), though all that would have been required was desaturate-> add texture ->stroke with x-pixels ->add red blob. Done. Five steps.
The icon would have looked better with just two steps (desaturate -> stroke) in my opinion. But who am I to judge?
Anyway. I scrolled down and found this comment:

Thank you! Horrible tut, Add to memories :)

Me: (°.°)???

The thanks seemed to be sincere, and I went to the poster's profile, wondering if commenter and poster might be on one another's f-lists. But no.
The commenter states that s/he doesn't know English very well.

Is that sarcasm or a mishap in language? I don't know.

I've another little tutorial coming up soon, so stay tuned... if you're interested. =D

May. 1st, 2007

A bit off-topic, but I thought I’d post it all the same. It deserves the wtf-stamp, I think.

Ok. I don’t mind contra-thinness movements at all, but why does it always have to be like this?


the basics when tweening in Image Ready

This tutorial is for Image Ready.
It explains the tween tool.

So what is tweening?
The explanation is quite simple, actually.
Tweening inserts a custom amount of frames between two frames – one frame, and the frame that comes after it, or the first and last frame (and vice versa).
The positioning and the opacity of your layers will be automatically tweaked in the tweened frames, so you don’t have to do it manually.

Examples of simple icons where tween was used.

Photo Sharing and Video Hosting at Photobucket Photo Sharing and Video Hosting at Photobucket Photo Sharing and Video Hosting at Photobucket

Below is a tutorial that explains the basics of how it’s done.
Read more...Collapse )


You know what I don't get?

Text brushes.

Why would I want to say the same thing, in the same style, on multiple icons? Why would anyone? Especially when the words are usually random, very generic, song lyrics. I DON'T get this. Why not just install some new fonts and do it oneself, picking text and fonts that actually match your icon?

(Hi, by the way. New member here and this is oh, just what I need to take the edge off the indiscriminate love-fests that are the big PS-related comms. :))

optimizing file sizes in Image Ready

Tutorials explaining what I am about to explain have been posted many times before, but since those tutorials can’t seem to be found when needed, I thought I’d just type one up again.

Note: follow the links to view screen shots.

Today, we’ll learn how to shrink an animated icon’s file-size (kb) in Image Ready.

click for tutorialCollapse )


tutorials for you?

Still referring to this post.

Anyone interested in making a header similar to this one?

I could have a post up by the week’s end.

Things you will be introduced to:

- exclusion (a link to a former tutorial will be given)
- Rounding off corners
- Masking images
- Blending modes
- Stroke
- The clone tool

Should anyone be interested in a tutorial, feel free to comment here. (Should anyone be interested in the header, feel free to snag it.)

Thank you very much for your attention!