Tutorials! Let's learn how to do graphics - for everyone!

[Grace]

I know some of you have Adobe Photoshop, others have PSP - Lady ~ what do you use again?

I was thinking there are a lot of people who wish to make graphics, yet they are technologically challenged - but I think anyone can learn graphics - and it's fun when you play around and come up with something neat and new.

So what I was thinking that maybe what we can do is post a few tutorials, and everyone try to mimic that one tutorial and post their results in the corresponding thread. That way we can all learn something and see how we've progressed - and we can help each other if it doesn't quite turn out properly.

We can post tutorials for different programs - and hey, what will be challenging is the opposing program (say the tutorial is done with PSP) will have to try and figure out how to do the same thing in Photoshop.

I'll post a few tips and tricks too that I have found.. Now let me try and find a good tutorial...

[angelofmine]

Oooh, I'm totally down with that. ^_^

I'll try to post a few of my own "tutorials" as well.

[angelofmine]

Also -- in my case (and I'm sure Grace's as well), if anyone has any questions on how to do anything, no matter how random it is, just post here and we'll try to help you. http://instagiber.net/smiliesdotcom/kao/otn/pblob6.gif

[GoldenMichelle]

I think that would be great. I've been using PSP, but I've been tryin to self-teach myself photoshop and have had absoloutely no luck at all. So some tutorials for that would be great. Maybe I'll finally learn how to use it. LOL

[Teresa]

ok i'll start the ball rolling..

does anyone know how to make grids appear on your image? something like angelofmine's sig picture.. is it a brush, or just plain line tool?

[angelofmine]

ok i'll start the ball rolling..

does anyone know how to make grids appear on your image? something like angelofmine's sig picture.. is it a brush, or just plain line tool?
Eeeek...let's see if I can explain this clearly without the benefit of having Photoshop open to refer to. These instructions apply to *Photoshop only*...I don't remember how to do it in PSP because I hardly ever use that anymore.

I suppose you could use brushes, but there is a much much easier way. For basic gridlines:

-Create a New 3px by 3px transparent file. By transparent file, I mean select transparent as the background option.
-Select the pencil tool on the toolbar (or the brush tool works fine too) and set the radius to 1px.
-Be sure the foreground color is set to the color you want, as that is the color the grid will be.
-With the pencil/brush tool, color in the first column and top row of pixels in an L sort of shape.
-Go to Edit > Define Pattern. Name your new pattern whatever you want and OK it. It will now be available in a list of pre-selected patterns for future use.
-Go back to your original file and select whatever layer you want to place the grid over by clicking that layer in the layers palette.
-Go to Edit > Fill and find the pattern you just created and saved. Click OK. Now you should have a grid on your graphic. You can then further adjust how it looks by playing around with the blending mode, or you can go to Edit > Fade Fill.

FYI, you're not locked into creating that exact same pattern. Play around with the pencil/brush to create different ones. For instance, if you create a 3px by 3px transparent file and then place a 1px dot in the middle, you'll have a dot pattern instead of a grib.

Hopefully this all made sense. @_@

Edit: OOPS, I forgot the most important part. Zoom in to 1600% before you start working on it so you can actually see what you're doing! D'oh!

[angelofmine]

BTW, if you mean the bigger squares, that's the pixellation tool, which is under the Filter menu, and not a brush/pattern/whatever else.

[balletgirl2]

Making graphics are so hard for me. I just bought some software a couple months ago and I can't do anything except take red eye out.

I have a great appreciation for all of you who have made such beautiful wallpapers and banners.

[LadyM76]

This is such a great idea.
Vocalise,
I have have been using "The Print Shop 15" lately. I also have used Photostudio2000 and "The print Wordshop2003". I have been very pleased with The Print Shop.
Thank You to all of You....for giving me the courage to try new things.
LadyM76 aka Mary

[justsk8]

I I like this idea! I have always wanted to teach myself a graphics program but never really even knew where to start!

[Ashley]

Well, what I would like to know is how you cut pics out so perfectly that there are no hard edges around the pic (Michelle for instance).

I feel like I am limited to backgrounds that match the background of the pic I want to crop until I learn how to do this.

I've tried to use the lasso tool, but whenever I completely select the image I want to cut out, when it's time to connect the two ends together, the lasso tool always expands around the image about an inch. It cuts out the image, but there's still about an inch of background around the image left.

Am I making any sense?

[Heather]

Cool idea Grace :)

Ashley-You make *perfect* sense. The thing I hate the most about graphics is cutting out Michelle. I sometimes con Grace into helping me, but not lately. ;) The first few graphics I made were on white backgrounds, so that the hard edge didn't show up. But I hate white backgrounds, so that couldn't last. I'm still not great at it, but it's a learning process. Sometimes, when I have a *hard* time with it, and nothing works, I make it transparent. That's my cheat. ;) Like my Tosca WP for the challenge (I haven't uploaded it to my site yet, but it's on the WP challenge site.) I had problems with the two pics, and I really didn't have time to play around with it much, so I made them both transparent at various degrees. It gives you a little bit of leeway.

For your lasso problem, which lasso do you use? I know grace always tells me to use the straight one (don't remember what it's called), but I generally use the magnetic one, at least at first. Also try the extract tool. It just depends on the pic (and I am *not* great at it all, not yet, so don't go entirely by me.) Sometimes I'll get close to it, and then I'll use the erase brush that's faded (I cannot think of any words today...do you know what I mean?) and go around the edges. this won't give you a clean line, but it will take away the edges. Sometimes I want that soft look around the pics anyway.

Basically, I have no idea, but those are my tips. I haven't done graphics in ages, I really should sometime.

[angelofmine]

The magnetic lasso is great to use if the image you're cutting has very vivid edges and not a whole lot of tiny detail. The lasso Heather's talking about is the polygonal one.

If you want to fix the edges after you cut a pic, you can always apply a mask and do it in that mode, or you can feather your selection before you copy and paste it elsewhere, or you can do what Heather suggested. :)

[angelofmine]

BTW, here are a few tutorials I hope to post within the next couple days:

-Cropping/resizing images and constraining image proportions
-Using different blending modes
-Scanlines (horizontal, vertical and diagonal)
-Borders (Single and double)
-Background effects (like wind and ice)

Or if anyone has some they'd rather see, just post. :)

[Grace]

I usually just zoom in to 1600% and then do some fixing there (which is what I did for the Clay wp... dang hair!) I must have had to try and remove his hair at least 10 times - fixing it up.

People will be addicted to blending modes :P I know I am. I don't even know much about backgrounds...

you can do the tutorials Hayley. I think I'll just link to existing :)

[angelofmine]

Before I head off to work, here's a quick tutorial on how to make a wind background, like this:

http://www.ziyifilms.com/members/yjl923/windsample.jpg

Once again, these directions are for recent versions of Adobe Photoshop.

-Create a New file with a white background. Any size is fine for the sake of trying the tutorial; mine is 200px by 200px.
-Set the Foreground color to whatever hue you want.
-Select Filter > Render > Clouds. If you're not satisfied with how the clouds look, you can keep selecting that option over and over till it comes up with something you like.
-Select Filter > Render > Difference Clouds. This is how you'll end up with the black/darker parts of the graphic in the end.
-Select Filter > Artistic > Smudge Stick. There are no hard and fast rules here concerning which exact settings to use for Stroke Length, Highlight Area or Intensity. My settings were 2, 0, 10, respectively, but play around to your tastes.
-Select Filter > Stylize > Wind > From the Left.
-Select Filter > Stylize > Wind > From the Right.
-Select Image > Rotate Canvas > 90 degrees CW.
-Once again, select Filter > Stylize > Wind > From the Left, and then Filter > Stylize > Wind > From the Right.
-Select Image > Rotate Canvas > 90 degrees CCW.
-Once again, select Filter > Stylize > Wind > From the Left, and then Filter > Stylize > Wind > From the Right.
-Select Image > Adjustments > Hue/Saturation.
-Check the box that says Colorize.
-Now play around with the Hue, Saturation and Lightness to your tastes.

That should about do it. Let me know if you get stuck or have questions. :hat

[angelofmine]

And while I have a borderless ready-made image, I might as well do a quick border tutorial. ;) The ones I'm going to explain are single border and double border. There are dotted borders, but those are a bit more complicated so I think I'll hold off on those for now.

Anyway, borders aren't necessary so much on bigger graphics, but for banners and sometimes avatars, they add an extra touch of professionalism.

Take the wind tutorial graphic I posted above. It doesn't have a border. It would probably look better with one. So, to do a single border:

-Select > All.
-Edit > Stroke.
-Now you get to select the border color and width, blending mode, opacity, etc. to your taste. For a standard single border, select 1px and leave the blending mode at Normal and the Opacity level at 100%. Be sure the Location is set to Center.
-Click OK and do Select > Deselect.
-Now you should have your border, although it might be difficult to see in Photoshop unless you enlarge your work area.

Here's a finished sample of the wind graphic with a single border:

http://www.ziyifilms.com/members/yjl923/windsamplesingle.jpg

Oops...edit to turn off sig.

[angelofmine]

Double Border

-Select > All.
-Edit > Stroke.
-Set the Width to 3px and choose a dark color.
-Set the Location to Inside. Click OK.
-Leaving the image selected, go to Edit > Stroke again.
-Set the Width to 2px and choose a light color. Be sure to leave the Location to Inside, like above.
-Edit > Stroke again.
-Set the Width to 1px and choose a dark color.
-Select > Deselect.

You should end up with something similar to this:

http://www.ziyifilms.com/members/yjl923/windsampledouble.jpg

[GoldenMichelle]

Okay who wants to give me a quick rundown of PhotoShop basics. I can't figure out how to resize layers or anything... All the things that seem so simple on PSP I can't figure out at all on Photoshop. I'm at a total loss. :(

[uncchristine99]

"Resize" is under the Help menu. Don't ask why... cuz I don't know! But there it is.. you can do it by pixels or inches or whatever. Simple!

[michellejkittie]

Vocalise, great, great idea! And great, great job with this section- it Rachs!