Art [GFX] Class time

[Retribution]

[SIZE=1][center][img]http://img.photobucket.com/albums/v219/AzureImi/1nerissa.png[/img]
(by Imi)

[SIZE=2][b]Welcome to GFX Club Class![/b][/SIZE][/center]

I have created this to provide a more apparent means of improving, and voicing your questions to me and everyone else. With that being said, you will have a few rules to follow.

[SIZE=2][b]Guidelines[/b][/SIZE]
[b]You can elaborate on my responses.[/b] I encourage everyone to elaborate on my answers to various questions ? I?m not God, so I don?t get everything right. If you feel there?s something that could be said better, or something I completely omitted, mention it in your post. It will only help.

[b]No one is ?wrong.?[/b] Art is extremely subjective, and as a result, we cannot rule out others opinions as ?wrong? ? they?re contributing their perspective. Please listen to everyones words, and treat them respectfully.

[b]After I move on to another topic, do not answer questions to previous topics.[/b] There?s a reason I move onto another topic, that reason being I feel we have said everything that needs to be said. You can request that I bring up the topic again via PM, but you must provide a reason why ? I don?t want to keep running over the same information.

[b]Go ahead! Post your images if you have a question, so we can analyze it more accurately.[/b] Don?t be shy, no one will flame your work. We?re all still obeying OB?s Rules. By showing your work and asking ?Does this show color unity?? Again, it?ll only help us. However, do not post randomly on a topic we?re not currently discussing. That counts as spam.

[SIZE=2][b]Misc Stuff[/b][/SIZE]
Since I do not have Paint Shop Pro, I cannot answer those types of questions that are exclusively PSP. An example would be "Okay... so how do I add words?" which I could not answer, as I have no idea how to do that in PSP. Therefore, Imi has volunteered to answer those questions for you.

[SIZE=2][b]Lesson: Making an Abstract Signature[/b][/SIZE] ? Requested by Doc

Now, obviously, this is a rather challenging lesson to write, but I?ll do my best. But instead of walking you through one of many different paths, I will arm you with several strategies and how to utilize tools to create an abstract signature.

First off, I?m going to tell you the tools you?ll probably use to make an abstract signature.

[b]Rectangular/Circular Marquee:[/b] This is a very versatile tool. You can add a border with the rectangular marquee, or use it to slice up a background and re-lay it to make interesting patterns. The circular marquee has similar uses, be it cutting up shapes, [url=http://img161.echo.cx/img161/1696/flowertech1cq.jpg]filling in areas for a certain effect[/url], or any other interesting variation you can come up with.

[b]Move Tool:[/b] This is primarily used to move around your brushing, or adding a stock onto the background.

[b]Crop Tool:[/b] Use this at the end, or towards the end of your project. Crop the interesting part, so that you cut off the fat, so to speak, of the banner.

[b]Lasso Tool:[/b] You will use this to extract textures from other pictures for use. By dragging it in a circle around the desired, area, you can select the brush you will use. (see next tool for further information).

[b]Brush Tool:[/b] Nearly indispensable for this project. If you wish, you can download brush packs to make your life A LOT easier. If you do that, you really don?t have to read anything here ? you?ve got it covered. However, you can make your own brushes. Take a picture with a lot going on in it (not your main picture), and go to Image > Adjustments > Levels. Drag the black or white tabs on the outermost extremes, until the picture gets grainy, where you can extract good textures from it. Once you do that, use the [b]Lasso[/b] tool to select the area. Then, go to Edit > Define Brush. Save it under a name that vaguely describes it, and under the brush tab (upper menu), at the bottom, your new brush should be there.

[b]Smudge Tool:[/b] This works in a similar fashion as the brush tool, but you use the brush to smear the existing designs. This is very useful in abstract signatures, [url=http://img.photobucket.com/albums/v294/mechinfinity/abstract1tag.jpg]smearing a brushed pattern[/url].

[b]Text:[/b] Pixel art is very popular with abstract work, but I prefer Arial. It is usually used in league [url=http://img.photobucket.com/albums/v294/mechinfinity/science.jpg]with an outer glow effect[/url] to stress its presence, lest it be lost within all the motion and detail of the banner.

As for [b]filters[/b], they are easier to use, but harder to get a desired effect. I usually duplicate my main layer, and use motion blur at a very high distance to obscure the picture. Then, I blend my unmodified image, which gives things a nice motion effect. Different pixelation effects give the image a tech like feel, but a [url=http://img.photobucket.com/albums/v294/mechinfinity/blueav.jpg]properly placed lighting effect[/url] can change things from bland to dynamic. But don?t overuse this ? it gets tiresome, and repetitive.

Most importantly, however, is that you add appropriate [b]color[/b] to your brushing, to emit a certain emotion. In Photoshop, hitting ctrl + b will bring up a color balance. Play with that until you get something you?re pleased with. Blending different layers with harmonious and contrasting colors will have many different, and sometimes, unexpected results.

Now, feel free to ask questions, add your personal strategies, or present some work for critique. Make sure those images are coherent, and that you are asking something specific -- not "how do I make this better." Thanks.[/SIZE]

[Ellerby]

[color=#333333]Wow, Retri.

I'd like to start off by saying that already this has helped me progress in skill with Photoshop and is a great idea. I'm working on a new piece thanks to you and it is turning out much better than all of my others.

I wouldn't think many people could possibly have any questions seeing as you explained all of this oh-so-well, but may I make a suggestion?

I think it'd be good if you were to conduct a lesson on blending multiple pictures on a single banner, as it is a popular effect. I would really look forward to a post about that.[/COLOR]

[Hittokiri Zero]

Mmmm you failed to mention anything about the importance of using the color dodge and color burn tools to add more depth to the image :rolleyes:. No one likes a "nooby" looking abstract image that comes off as flat and boring :animestun !

I guess the only other thing that comes to mind in regards to text, is that while arial is a nice font any "basic" blockish font generally works well with simple abstract signature franklin gothic, is one font I personally use a lot.

[SunfallE]

[COLOR=DarkOliveGreen]Great lesson. ^_^

I have two questions. First you mentioned that you can download brush packs. Where would you go to get them? I?ve been playing with the various brushes to get different effects but I would love to add more brushes to my current set.

Second could you elaborate on what you mean by properly placed lighting effects? I?ve only done simple things like change the level of how dark or light my pictures are. [/COLOR]

[Retribution]

[size=1]SunfallE, I?d recommend searching on Google for ?photoshop brush downloads? or something of the sort. There are plenty of websites that have them, and you don?t have to look too hard for them, however, I think that they severely cripple your skill when you become reliant upon them. Instead of actually knowing how to achieve the pre-made technique, you?ll need your brushes.

The lighting effects I was talking about can be found in Filters > Render > Lighting Effects. It?s also quite fun to liquefy the light that you placed down to give you an easily made abstraction. Good luck with all that.[/size]

[b]Lesson: Blending Stock[/b] ? [size=1]Requested by White

I?ve been working on this lesson for some time now (about a week, on and off), so I hope that it helps everyone.

[b]Common Mistakes:[/b] These mistakes are most seen by beginner banner makers ? a two layer banner, with one layer at a low opacity.

[IMG]http://i5.photobucket.com/albums/y170/retri_trib/sasukebad.jpg[/IMG]

The problem with this is that there?s nothing really going on in the banner. The two layers are both somewhat pale and the entire piece is undynamic and rather boring. This lesson will try to remedy these common mistakes, and arm everyone with a new technique or two for making a new banner with multiple images.

[b]Overlaying Layers:[/b] This trick is rather easy ? you take the two layers you?d like to blend, place them accordingly, and turn the upper layer?s blending mode to whatever strikes your fancy (overlay, soft light, linear light, pin light, color dodge, etc). However, be sure the main focus? don?t overlap, or else you?ll get a very jumbled image. Here?s an example of using this technique:

[IMG]http://i5.photobucket.com/albums/y170/retri_trib/phobia.jpg[/IMG]

[b]Extraction:[/b] To extract an image from its background to add into your banner, use the [I]magic eraser[/I]. To vary the range of colors it erases, change the [I]tolerance[/I] accordingly (found somewhere at the top). Be sure to maintain the color harmony in these two images. This can be done by using [I]color balance[/I] (ctrl + b). Pick a good layout for these images ? be sure they?re interesting, or else your banner will be boring.

[b]Brushing:[/b] This is the hardest of all to do to blend two images with. It is also I cannot (unfortunately) describe, due to its complexity and subjective nature. A good tip to begin with, though, is to modify the brush settings (in the upper right corner, I believe), as well as brush on multiple layers, and blend those together to achieve different effects.[/size]

[Riku]

[FONT=Comic Sans MS][SIZE=1][COLOR=DeepSkyBlue]Finally, I know how to that double image overlaying technique now. I've always wanted to learn how, but now I can now. Thanks, Retri-san. n.n

Another question: How do you make a banner without a background?? Like that picture Imi made for you in this thread with the girl's hand out of the background?? And like Imi's cool new blood-splatter sig. I was always wondering how you could do that.

Anyways, great idea for this thread, Retri-san. I can always ask questions dealing with these kinds of things. XD

Oh and yes, another question: How do you make that dashed border with two different colors instead of a single line border with one color?? I've seen it done many times and I was also wondering how to do that. n.n[/COLOR][/SIZE][/FONT]

[Retribution]

[QUOTE=Keyblade Wielder][FONT=Comic Sans MS][SIZE=1][COLOR=DeepSkyBlue]Finally, I know how to that double image overlaying technique now. I've always wanted to learn how, but now I can now. Thanks, Retri-san. n.n

Another question: How do you make a banner without a background?? Like that picture Imi made for you in this thread with the girl's hand out of the background?? And like Imi's cool new blood-splatter sig. I was always wondering how you could do that.

Anyways, great idea for this thread, Retri-san. I can always ask questions dealing with these kinds of things. XD

Oh and yes, another question: How do you make that dashed border with two different colors instead of a single line border with one color?? I've seen it done many times and I was also wondering how to do that. n.n[/COLOR][/SIZE][/FONT][/QUOTE]
[size=1]To make a banner without "the background," so to speak, just follow these steps.

[b][1][/b] Open up a new canvas. Be sure that the "Background Contents" are set to "Transparent." Without this, it's impossible to do.

[b][2][/b] You should see a canvas with checkered tiles. Those tiles signify that that area of the canvas is transparent, so currently, it should all be transparent. For example, if you were to put a black brush stroke through it, the brush stroke would be there, but the checkered tiles would also be there to show that the rest is still transparent.

[b][3][/b] Put your image on top (you'll have to extract your image out of the background so that it looks like it's 'popping out') of the canvas.

[b][4][/b] Save it as a .gif with transparency enabled. The rest of the settings don't matter, I don't think. If done correctly, you should have the 'pop out' effect.

As for the border, I'm not entirely certain, as I've never really done it myself. Perhaps asking her yourself (she's currently [url=http://www.otakuboards.com/member.php?u=10831][b]Ezekiel[/b][/url] <- link) would be the best solution to your problems.[/size]

[Horendithas]

[QUOTE=Retribution][size=1]To make a banner without "the background," so to speak, just follow these steps.

[b][1][/b] Open up a new canvas. Be sure that the "Background Contents" are set to "Transparent." Without this, it's impossible to do.

[b][2][/b] You should see a canvas with checkered tiles. Those tiles signify that that area of the canvas is transparent, so currently, it should all be transparent. For example, if you were to put a black brush stroke through it, the brush stroke would be there, but the checkered tiles would also be there to show that the rest is still transparent.

[b][3][/b] Put your image on top (you'll have to extract your image out of the background so that it looks like it's 'popping out') of the canvas.

[b][4][/b] Save it as a .gif with transparency enabled. The rest of the settings don't matter, I don't think. If done correctly, you should have the 'pop out' effect.

As for the border, I'm not entirely certain, as I've never really done it myself. Perhaps asking her yourself (she's currently [url=http://www.otakuboards.com/member.php?u=10831][b]Ezekiel[/b][/url] <- link) would be the best solution to your problems.[/size][/QUOTE][COLOR=Indigo]
Great thread Retribution. I am not a member of the graphics club but I?ve learned a lot from what you have posted. Take the tip to save it as a .gif with transparency enabled. I?ve been trying to figure out how to do that for a while, so thank you.[/COLOR]

[Annie]

[size=1]I wasn't sure if I should post in the Class Time thread, so if you feel this needs to be merged or something, please do so Retri. (congrats by the way, lol)

Anyway, I've never toyed with ImageReady in Photoshop, and was wondering if for those artists who use this could sort of teach others. Firstly, I'd like to learn simple things like putting text/phrases in banners.[/size]

[Hittokiri Zero]

(Note: Everything below might not be explained to the best of my ability as I decided to take a "take with it and run" type of approach while writing this "tutorial". If you need further explanation feel free to ask, but there are some things I decided against explaining just because as you use the program you'll figure them out for yourself)

Here?s a quick little Adobe Image Ready tutorial that will teach you how to make a simple (yet effective) text transition.

Since Image Ready is a stand alone program you can actually create a graphic from scratch in Image Ready. I do not recommend you do this however as Image Ready has less tools and effects than Photoshop does (I believe this is because Image Ready and Photoshop were designed to work with one another).

So first things first! Open up Photoshop and create a blank canvas, size is irrelevant but keep in mind that large .gifs tend to lag (the graphic in this tutorial is 400x100 pixels large)

Grab a hold of the text tool and type to your heart?s content, you can make things look pretty but as this tutorial is just meant as a quick walkthrough on how to make a simple Image Ready effect I wouldn?t bother with making anything too fancy.

[img]http://img386.imageshack.us/img386/7670/18ht.jpg[/img]

Not to hard right? Well prepare to hold your head in horror because? Oh who am I kidding, just scroll up to the upper left corner of Photoshop and under the file menu go to ?Jump To? and select Image Ready.

[img]http://img386.imageshack.us/img386/3860/untitled2copy7za.jpg[/img]

For those of you who haven?t experimented in Image Ready you should notice that the program looks and operates very similar to Photoshop. Once in Image Ready close optimize your canvas so it looks like mine (you don?t have to do this step but as the only ?boxes? that we need are the Animation-Image Map-Slice box and the Layers box, doing this will just clear up your workspace. If you ever need any of the boxes you closed just scroll up, roll over ?window?, and just click on the boxes you want to bring back up).

[img]http://img386.imageshack.us/img386/8484/21ae.jpg[/img]

Next click on the new layer button twice, and right click on the first frame. The drop down menu that appears is basically asking you for how long you want to display that one frame of the animation. As this is the first frame of the animation let?s set the time to four seconds.

[IMG]http://img377.imageshack.us/img377/3750/r4zn.jpg[/IMG]

Now click on frame three in the animation box; since frame three is now the active frame change the opacity for your text layer from ?100%? to ?0%?. Click on frame two and then frame three again; you will notice that your text layer is still visible on the second frame but not the third frame.

With frame three selected click on the ?tween? button in the animation box. Tweening is a fast and simple way to create an animation. The ?tween? feature saves you the hassle from having to create each frame of the animation individually (note the Tween feature is only good for moving objects across the screen and/or changing the opacity of objects. You obviously can?t take a ?wicked cool? picture of the Power Rangers click the tween feature and expect your wicked-awesome Power Ranger to jump out and kick someone).

Set the ?Frame to add? to seven, and make sure ?Tween With? is set to previous frame. This means that your animation is seven frames long and creates the seven added frames between frame two and three.

[IMG]http://img386.imageshack.us/img386/8765/36oc.jpg[/IMG]

Before we go on you can preview your animation by clicking the ?play animation? button on the Animation box, or you can do as I prefer to do and save your file as an actual .gif file and then preview it in internet explorer. To save your image in Image Ready under the file menu go to ?save optimized as? and save the file as a .gif.

[img]http://img377.imageshack.us/img377/4960/save1ff.jpg[/img]

Notice anything about your animation? It doesn?t loop! Well of course it doesn?t loop, because we aren?t done yet!

Create two new frames in Image Ready (frames 11 and 12). Next right click on frame ten and change the frame delay to two (this will make your animation pause for two seconds before it fades back in). Click on frame 12 and change the opacity of your text layer back to 100%. Now using the tween feature with the same settings as before click tween and there you have it, you?ve just completed your first Image Ready animation!

Example:

[img]http://img386.imageshack.us/img386/8488/user1if.gif[/img]