-
Filed under:
- #tips and tricks
- #tutorial
- #flash
FLASH TIP NO ONE ASKED FOR OF THE DAY:
If anyone’s ever tried to draw something in Flash before, you know that the brush tool can be really, really annoying. A way to make it less annoying is to play with its Smoothing!
With the Brush tool selected, go to the Properties window. At the bottom should be Smoothing with a numerical value next to it. You can set a value (by typing it in or dragging it) from 0 - 100, with 0 being no Smoothing. I like keeping mine in the 40-50 range so Flash smooths my lines, but not excessively so. Any errant vector points, I just delete.
Speaking of vector points, here are those Teddie doodles with all their points showing to give you a better idea of what Smoothing does:
FLASH TIP NO ONE ASKED FOR OF THE DAY:
If anyone’s ever tried to draw something in Flash before, you know that the brush tool can be really, really annoying. A way to make it less annoying is to play with its Smoothing!
With the Brush tool selected, go to the Properties window. At the bottom should be Smoothing with a numerical value next to it. You can set a value (by typing it in or dragging it) from 0 - 100, with 0 being no Smoothing. I like keeping mine in the 40-50 range so Flash smooths my lines, but not excessively so. Any errant vector points, I just delete.
Speaking of vector points, here are those Teddie doodles with all their points showing to give you a better idea of what Smoothing does:
-
Filed under:
- #photoshop
- #tips and tricks
- #tutorial
(Photoshop is a pretty daunting program, so I’m going to start posting a few of the tips I’ve picked up over the years. If there’s anything you really want to see, let me know!)
Have you ever resized a file in Photoshop in order to save out an image? Only to then save over the original file with the resized, itty bitty version? Or maybe you just want to make sure your image is optimized so your website/game/etc. runs as smoothly as possible (and still looks good).
This is where the Save for Web & Devices tool comes in!
First, open up the file you want to save out. Next, go to File > Save for Web & Devices.
A window like this should pop up!
.
.
.
.
It might look complicated at first, but it’s easy peasy, I promise. Let’s break it down!
.
.
.
.
A) What file type do you want to save out your image as? If you’re doing a PNG-24 (my favorite), make sure you check (or uncheck) “Transparency.” You don’t get that option with JPEG.
B) Quality! A JPEG option. If you are trying to reduce the file size, you can slide this down and check how it looks in the preview box.
C) Image Size! You can reduce the size by typing in either a pixel measurement or percentage. I switched the width to 600 px in this example (or 55.5%).
D) File Size! This lets you know how big the file is ultimately going to be. Really helpful if you are trying to keep everything user friendly. If a file is still too big, play with the quality and image size options until you’re happy.
One other cool thing you can also do is compare different file types/qualities next to each other by clicking the 4-Up (or 2-Up) tab.
.
.
.
.
You can’t really see the differences in this tiny thumbnail, but it is a neat feature, TRUST ME.
And that’s it! When you’re done, just click that glowing Save button and presto! I only covered PNG/JPEG pictures here, but you can do GIFs this way, too, and play with the amount of colors/diffusion/dithering/etc (but that is more complicated).
*Just a note: as the name implies, this is only meant for low resolution, web friendly images. If you’re saving out a ginormous, 300 dpi image intended for print, just do it the old fashioned way.
(Photoshop is a pretty daunting program, so I’m going to start posting a few of the tips I’ve picked up over the years. If there’s anything you really want to see, let me know!)
Have you ever resized a file in Photoshop in order to save out an image? Only to then save over the original file with the resized, itty bitty version? Or maybe you just want to make sure your image is optimized so your website/game/etc. runs as smoothly as possible (and still looks good).
This is where the Save for Web & Devices tool comes in!
First, open up the file you want to save out. Next, go to File > Save for Web & Devices.
A window like this should pop up!
.
.
.
.
It might look complicated at first, but it’s easy peasy, I promise. Let’s break it down!
.
.
.
.
A) What file type do you want to save out your image as? If you’re doing a PNG-24 (my favorite), make sure you check (or uncheck) “Transparency.” You don’t get that option with JPEG.
B) Quality! A JPEG option. If you are trying to reduce the file size, you can slide this down and check how it looks in the preview box.
C) Image Size! You can reduce the size by typing in either a pixel measurement or percentage. I switched the width to 600 px in this example (or 55.5%).
D) File Size! This lets you know how big the file is ultimately going to be. Really helpful if you are trying to keep everything user friendly. If a file is still too big, play with the quality and image size options until you’re happy.
One other cool thing you can also do is compare different file types/qualities next to each other by clicking the 4-Up (or 2-Up) tab.
.
.
.
.
You can’t really see the differences in this tiny thumbnail, but it is a neat feature, TRUST ME.
And that’s it! When you’re done, just click that glowing Save button and presto! I only covered PNG/JPEG pictures here, but you can do GIFs this way, too, and play with the amount of colors/diffusion/dithering/etc (but that is more complicated).
*Just a note: as the name implies, this is only meant for low resolution, web friendly images. If you’re saving out a ginormous, 300 dpi image intended for print, just do it the old fashioned way.
I’ve gotten a few requests for more tutorials, so here ya go! This one is kinda massive. It covers my basic coloring process and showcases my love for clipping masks. Onward!
(OK, I cannot get the “Read More” thing to work, but I TRIED I AM SORRY.)
Photoshop Tip #2
OK! Now that we’ve got the basics down, let’s do some more basics!! Sketching, inking, and a nifty selection trick for laying down flats, mainly. (I keep trying to put a cut here, but Tumblr won’t let me, so I apologize to your Dash).
Alright, so you have a new document in Photoshop ready to go - now what? You can import a scanned sketch (I uh don’t do that, so I can’t really help you there), OR just start sketching straight in the program (this is what I do).
Make sure you aren’t on your background layer when you start sketching! Make a new one. Lock those other ones up if you gotta (with the little lock icon in the layer panel - I will get to the other buttons in another post). I have drawn on the wrong layer far too many times. And still do. It is infuriating. Naming your layers is also a good practice to be in and can help avoid this problem (sorta).
Anyway!
I like to use blue when I sketch - anything different than the inking color, really. Once you’re done with a rough sketch, make a new layer.
I set my sketch layer to roughly 50% opacity, make sure I’m on the inking layer, and just… go at it. I included my brush settings in this picture, but I only now realized you can’t read that for shit, so my bad. I will cover brushes later, haha. I am the best teacher ever!
OK, so you are done inking. Time to lay down some base colors!
This next tip comes courtesy of my friend Krista - who is practically Deviantart royalty, so she knows what she’s talking about, kids.
Make a new layer. Whip out the Magic Wand tool - make sure “Sample All Layers” is checked up at the top. Click the part you want to color (like the body, shirt, hair, whatever). If your lineart is solid, marching ants will appear in the correct area - you can play with the tolerance/fiddle with the lines some more if it isn’t.
OK, this is the cool part. Once you’ve selected something, go to Select > Modify > Expand Selection. A popup will… popup. Expand your selection by 2 pixels (that’s my standard anyway - use your own digression depending on how thick your lines are).
Now throw some color down with the Paint Bucket!
If you hadn’t expanded the selection, you’d have had a weird line appear when you tried to use the paint bucket (not pretty). There are still some spots I have to fill in myself/refine, but much easier than coloring in the whole thing by hand, huh? To get rid of the selection, press Ctrl + D (Cmd + D).
Alright, that’s the gist of it. You’ll want to use this same process for each color you do (you can do everything on one layer, but I am a fan of using AS MANY LAYERS AS POSSIBLE).
Let me show you one more cool trick, though.
Holy shit, dino on dino action! Let’s say you want 2 windows up of the same document. Maybe I want to see how the whole picture will look while I work up close and personal on dino nostril. Maybe I want to see how a picture looks on 2 different monitors (this is what I primarily do).
To bring up another window, go to Window > Arrange > New Window for blahblah.psd. Any changes you make to one window will immediately affect the other. Pretty neat!
OK, that’s the end of this post. I’ll probably cover clipping masks in the next one. Questions/comments go! (?)
Photoshop Tip #1
Before I can get to the fun stuff, I should probably go over the basics. This post will cover how I set my files up - resolution, background color… the trivial, boring stuff, if you will.
Alright! Let’s open up a new Photoshop file. Now, what does this stuff all mean?
1) How big you want the image. You can go with a Preset (I saved my own since I work on this size a lot), or choose whatever numbers you fancy. You can always crop the image or increase the canvas size, so don’t fret about this too much.
2) Resolution - probably the most important part of this popup. If you are planning on creating something for print (or if you like to work big), choose 300 DPI. If you are creating dinky little tutorial images that will only be viewed via the web, 72 DPI is fine. If you’re not sure, just go for 300 - you can always scale it down later. Scaling up? Never works well. A huge 300 DPI canvas might make your computer chug a bit, though, so keep that in mind. I could get into the RGB vs. CMYK issue, too, but I will keep this simple for now.
3) This determines the color of the background layer. By default it’s set to white, but you can make it transparent or a custom color if you wish. Not too important since we can always change that later.
Speaking of - this is more of a personal preference, but I haaaate drawing when the background layer is pure white. I generally create a new layer and fill it with a light, desaturated brown. The white tends to hurt my eyes, and I find myself relying on the white too much when I start coloring (using another color forces you to fill in every bit and piece). When I finish coloring and decide that, hey, I want a white background when I post this after all - just delete the brown layer and you’re all set.
OK, I will start getting into the juicy stuff next time, I promise. If you have anything to add/want to elaborate on, replies are on, dawg. (?)
