Username: Password:


Author Topic: Graphics Tutorials  (Read 18904 times)

0 Members and 1 Guest are viewing this topic.

Offline TheNex

  • I punched a lion in the throat
  • Posts: 832
  • Liked: 2
  • Country: 00
    • View Profile
    • Awards
Graphics Tutorials
« on: September 05, 2010, 12:16:46 PM »
[align=center]



TUTORIALS:
Clipping Images | Backgrounds 01 | Basic Animated GIF Creation in Photoshop | Turning a Graphic Gold | Fonts and Text Placement
Scrolling SIG Without Scrollbar | Basic Fade In/Out in GIFs | Movement Using Tween | Controlling Filesize in Fireworks
Creating Text on a Path (PS) | Blending Techniques (PS) | Creating a Texture (PS) |
Killzone Signature (PS)

HELPFUL LINKS:
Adobe Photoshop | Microsoft GIF Animator (free) | GIMP (free) | Sqirlz Reflect (free) | dafont.com | typenow.net | flamingtext.com - Online Logo Creator
Real Life pics of every RDR weapon | SIG Rotator | Abduzeedo Tutorials | PSD+ Tutorials | Vector+ Tutorials | DeviantArt

BRUSHES:
Blood Splatter Brushes | Grunge Brushes | Abstract Grunge Brushes |

[/align]

Use the links above to find the tutorial you want, but don't forget to browse the entire thread for other helpful hints and discussion!  A link will be added to those above when new tutorials are added.

A special thanks to TheNex for getting this tutorial thread started and thanks to ALL the members that have added to this thread!

--DBD

_______________________________________________________________

Note from TheNex:

I saw no thread for this purpose posted here before, so I thought I'd decide to start one.

Put simply, a thread for when people need help using software, i.e. getting certain effects on their images or wanting information on where to get resources, they can ask here.

I personaly would find this useful, as a novice in the software, and I would endevour to help other people who need help. Hopefully other people would also help new comers in learning the ropes. Maybe through this more people will branch into the world of Digital Art.

Let me just Specify that this is NOT a Signature Requesting thread.
« Last Edit: August 02, 2011, 09:10:38 PM by TheNex »

Offline PredawnDwarf

  • AftertwilightMidget
  • Posts: 2133
  • Liked: 3
    • View Profile
    • Awards
RE: Tutorialized
« Reply #1 on: September 05, 2010, 12:58:50 PM »
I use quick mask rather than making the selection in the more old fashioned way. It's the rectangular button with a circle in it (at the bottom of the tool bar). It allows you to paint the selection which gives (IMO) more control.

Offline TheNex

  • I punched a lion in the throat
  • Posts: 832
  • Liked: 2
  • Country: 00
    • View Profile
    • Awards
RE: Tutorialized
« Reply #2 on: September 05, 2010, 01:09:04 PM »
I'll start off with a tutorial in cutting images out in Photoshop.

A lot of new people tend to use the "Magic Wand" quick selection tool to cut images out. There are advantages and disadvantages to using this, Yes it is quick and gets the job done easily, but the quality can be terrible in some cases.

I previously used the quick selection when I was new to the software, but I have quickly found that using the Pen Tool is ideal for cutting the image out without damaging quality.

NOTE: This Tutorial was done in CS3.

Begin by selecting your image then choosing the Pen Tool from the toolbar.


The begin creating a path around the image, I did this quickly so it isn't the greatest quality it could be.


Once you have gone all the way around your image, and joined the shape, you should then Right Click and hit "Make Selection".


This Window should then pop up:

I left it as default, but you can edit it accordingly.

Once selection is made, your image is then ready to be copied to a new image. Hit Ctrl + C to copy it and then create a new image, (it will automaticaly stick the dimensions of what you have copied in the image dimensions).


Once Pasted you can begin erasing what isnt wanted:


Untill eventualy you have just your image left:


Finished Image:

Not my greatest cut-out, but I hope this helps newbies. :]
« Last Edit: October 26, 2010, 01:55:23 PM by DiamondBackDylan »

Offline DiamondBackDylan

  • MOD
  • D WILD BUNCH
  • *
  • Posts: 3958
  • Liked: 25
  • Country: us
  • Gender: Male
  • Bring on V! I am SO ready!!!
  • Awards Awarded to the user voted as the Most missed member
    • View Profile
    • ChristopherConcepts.com
    • Awards
RE: Tutorialized
« Reply #3 on: September 05, 2010, 01:18:47 PM »
Yeas...would love to see one from Barca or MrBrokenTusk...their BGs are always so friggin cool!

Nice idea for a thread, Nex. :2thumbsup:

Offline HIT_THE_TRAIL

  • idk should say something here tho
  • Posts: 1105
  • Liked: 0
    • View Profile
    • Awards
RE: Tutorialized
« Reply #4 on: September 08, 2010, 04:03:17 AM »
wish i had cs3. i did aquire cs2 and GIMP. actually you helped me out i think. i used the wand and it did an ok job. once i found the perfect setting between 1 and 100(i love guessing games, so much fun). i found 9 worked well and i cut a part then a part then a part. it did it almost super perfect only one tiny flaw i didnt see until much later but in the finished product no one will see it. dude i tried the damn scissors but after i made the full loop couldnt figure out what to do next. the help instructions suck so badly. im mostly just trial and erroring EVERYTHING but i made something cool. i used an image for the background and used the magic eraser healing bandage thing to take out the main focal point person and replaced it with my new image and then with a little magic art work and alot of time i made it look like my inserted image was the real first focal point image. talk about alot of time spent. thank god what i made was so cool to me it was all worth it. just looked at it again and it appears so simple and basic in a way im not sure it will impress anyone but me.

so basically i save the cutout like you show to my computer, i also did the transparency at the same time. not sure how but i got er done and thats all that matters. then loaded the background i had planned then did the quick and dirty bandage erase then placed the saved cutout in it. that took almost a day to figure that all out. i clicked on file then place. no i have no clue how to put a fancy patterned backdrop or whatever yet. they dont really float my boat but if you use the image distort/twirl thing you can make some very pretty patterns out of any image you desire.
just a typed sig...you dig...just words and stuff should be enough...dont need cool graphics at all. i think ill write a wall....of text. what should i say next? idk and idc not really trying to take this rhyme anywhere. i would post in the rap thread but if i do...nah no one cares only me. im the o

Offline Bangs

  • Bang Bang, I shot you down..
  • Posts: 146
  • Liked: 4
    • View Profile
    • Awards
RE: Tutorialized
« Reply #5 on: September 08, 2010, 05:32:02 AM »
Quote from: 'TheNex' pid='163123' dateline='1283706544'

I'm also wondering how people create the awesome effects in the background. I'm always finding myself with a lot of blank space in the background, don't know what to stick in there.

Any Help?


Sometimes just using your render [not sized down] in the background can create an interesting background as long as you choose an interesting part of it that doesn't make it obvious that it is  just the render. Then just use the blur tools to give yourself a sort of depth of field between your main focal and the background. Just make sure the bit you want people to focus on is the clearest and sharpest.

You can also smudge things and use the layer modes to make interesting backgrounds.


^ The background for this one I just moved different copies of my render around and smudges them on different layers and then set the layer modes to different things depending on where I wanted the light to be. For example the areas I wanted to be the brightest I set the layer modes to color dodge or screen.

^ that one was done with smudging too.


^ and the bakcground for this one was just the render itself in it's original size.

Hopefully that helps you out a little >.< lol I suck at explaining things.
Really just experiment and look at different tutorials, but more than anything experiment ! lol

Offline TheNex

  • I punched a lion in the throat
  • Posts: 832
  • Liked: 2
  • Country: 00
    • View Profile
    • Awards
RE: Tutorialized
« Reply #6 on: September 08, 2010, 11:39:11 AM »
Cheers for the advice, I'll try out the techniques you've detailed. Also this thread is free for anyone else who wants advise on their signitures, where to go with them, how to do certain stuff. So people should feel free to ask away and I'm sure the community here would be happy to help.

Offline DiamondBackDylan

  • MOD
  • D WILD BUNCH
  • *
  • Posts: 3958
  • Liked: 25
  • Country: us
  • Gender: Male
  • Bring on V! I am SO ready!!!
  • Awards Awarded to the user voted as the Most missed member
    • View Profile
    • ChristopherConcepts.com
    • Awards
RE: Tutorialized
« Reply #7 on: September 08, 2010, 11:54:39 AM »
When I get a chance, I think i will do one on basic GIF animation creation in PS.  Its WAY easier than you all might think.  The hard part is getting the filesize down.  Its why many animated SIGs end up looking low-res.

Might be a few weeks before i can get to it, tho.

Offline TheNex

  • I punched a lion in the throat
  • Posts: 832
  • Liked: 2
  • Country: 00
    • View Profile
    • Awards
RE: Tutorialized
« Reply #8 on: September 08, 2010, 11:56:16 AM »
Looking forward to it fella'. I've made Gifs in the past, but with some lame Gif maker. It would be nice to do it properly. :]

Offline HIT_THE_TRAIL

  • idk should say something here tho
  • Posts: 1105
  • Liked: 0
    • View Profile
    • Awards
RE: Tutorialized
« Reply #9 on: September 11, 2010, 01:46:47 AM »
im looking for help to animate my sig slightly for the next contest. i for the life of me couldnt figure it out altho i tried. so i made and saved 3 or 4 PSD files with the small tweaks for the animation now im willing to go farther but if i cant figure out how to get each seperate "frame" i made into the animation palette..well..its pointless to work more on it and my last frame is the ultimate frame if i have to enter a static sig, i hope i get a quick reply. i really want to do this and enter it in the next competition, i mean my 3 "frames" are good enough and will get the point across but its not quite enough and a pleasing effect to me. it needs like 3 more at least i think. and how im going to do the last 3 frames and pull of such a sublte...hell i dont know what id call it...something fluttering in the wind..or...whipping in a gale, not sure which way to go. will take me a long while to figure out im sure. but to me it has to be done to really pull the animation of so it appears super realistic and makes every thing really appear the way i wish it to.

i know this can be done if Rebel Raven can take totally different images and put them in an animation....ERASED a long long rant. please help me someone im up against a deadline and feeling the pressure and im so close and yet so far. just helping me find a place on the web that can help me would be nice. anything........ photo shop just wants to talk about CS5 on their site.

EDIT im using CS2, i had a brain storm and ill save each image like a separate sig and see if GIMP can get er done for me.....havent messed with it much yet and maybe its way more user friendly...every one talks about photoshop so i gave it a go and im very unhappy with it to be honest at this point in time. just to damn hard to use and im not stupid its just not first time user friendly whatsoever lots of technical mumbo jumbo.
« Last Edit: September 11, 2010, 02:10:14 AM by HIT_THE_TRAIL »
just a typed sig...you dig...just words and stuff should be enough...dont need cool graphics at all. i think ill write a wall....of text. what should i say next? idk and idc not really trying to take this rhyme anywhere. i would post in the rap thread but if i do...nah no one cares only me. im the o

Offline DiamondBackDylan

  • MOD
  • D WILD BUNCH
  • *
  • Posts: 3958
  • Liked: 25
  • Country: us
  • Gender: Male
  • Bring on V! I am SO ready!!!
  • Awards Awarded to the user voted as the Most missed member
    • View Profile
    • ChristopherConcepts.com
    • Awards
RE: Tutorialized
« Reply #10 on: September 12, 2010, 02:50:02 PM »
You can do it in Photoshop (PS), TRAIL.

The key is to have each of the 'frames' as Layers in a single file.  I know you are new to PS, so not sure you are familiar w/layers.  Here is how to do this (I am 75% sure this will work in CS2):

1. Click 'Windows' in the top menu and click 'Layers'. This will open a layers panel where you can see them. Should look similar to this (I use CS4):


2. Open ALL your seperate 'Frames' files.  Choose the file that is the 1st frame of the animation to use as your Main File.

3. Click and DRAG each of the other frames from the original file to the main file.  This will add them to that file as layers. You should be able to see them in the Layers panel you opened earlier.

4. Once you have all the 'Frames' in one file as Layers, click Windows in the top menu and choose 'Animation'.  This will open the Animation Panel and should look similar to this:


If it looks like THIS:


Then click the small button in the bottom right corner of the panel () to change the view. (I don't use the timeline...others may)

5. Now go back to your layer panel and make all the layers invisible except the one you want to be the 1st frame of your animation.  To do this, click the eyeball graphic () next to the layers you want to make invisible.

At this point, the 'Layer you still have visible should match the 1st 'Frame' in the animation panel.  You first frame is done.

6. Click the 'new frame' button () on the animation panel. You will now have your second Frame in the animation:


7. Change which frame is visible in your layers panel from the 1st Frame to the layer you want the second frame to be.

8. Repeat steps 6 and 7 until you have all the frames you need for the animation.  Remember to do the frames in the order they will appear.

9.  Below each Frame in the animation has a drop down menu for how long you want that frame to play:


Change each frame to the time you want it to show. You can hit the play button in the animation panel to preview it.

Once that is done, you're basically done.  Click 'File' and choose 'Save for Web and Devices..." and this will bring up a large save panel:


Use this panel to optimize your final GIF file.  This is very important...maybe the most important part of creating Animated GIFs; while THIS site has no requirements about file sizes, most websites where users can use graphics DO give file size limits.  Also, if the file size is too large, the animation may not run correctly or can get corrupted.  The smaller the File Size, the better it will run.

There are also several tricks to get the filesize down, like only animated the parts that actually move instead of seperate, complete frames. Its just a matter of finding a balance between the file size and the quality of the actual animation.

I hope this helps, TRAIL.  Some of it might be slightly different since we are using different versions of PS, but I think this will get you started.  You just gotta play with it for a while.

Good luck and can't wait to see your entry!!! :D
« Last Edit: September 12, 2010, 02:59:53 PM by DiamondBackDylan »

Offline TheNex

  • I punched a lion in the throat
  • Posts: 832
  • Liked: 2
  • Country: 00
    • View Profile
    • Awards
RE: Tutorialized
« Reply #11 on: September 12, 2010, 04:31:16 PM »
Thanks for the tutorial! I'll give it a go when I get some time, maybe I may use animation in the next competition ;]

Offline HIT_THE_TRAIL

  • idk should say something here tho
  • Posts: 1105
  • Liked: 0
    • View Profile
    • Awards
RE: Tutorialized
« Reply #12 on: September 12, 2010, 08:56:03 PM »
thanks alot DBD i will study your tutorial and gleen all i can out of it. i believe i kinda understand but not quite so i will be studying your tutorial in great depth. the help you gave wont go to waste ill get it figured out im sure!

in the mean time i found another way to get er done with help from Rebel_Raven i downloaded a free Microsoft GIF Animator and its really simple imo to use. it requires you to do two things save your seperate frames as a GIF before putting them into the animator, and make them the same overall size. i already had all my "frames" so this was so easy for me to do.(the same size rule im gonna break in the future i bet but for the sig to appear the same size all the time all frames gotta be the same size and i screwed up on one)

i have 9 frames of animation so far 4 are really scene resetters. i was just screwing around with...well you will see...and trying to make a cool to me still sig featuring just...you will see. i made two still sigs that are ultimate cool to me, but didnt try putting my sig part on em. anyhow i just plopped em in the animator and holy smokes they are animated! i mean they appear to move but fluidly! its so wow looking to me. anyhow im not gonna mess with that part altho its not totally logical, it just looks amazing to my eye anyhow. wipes the scene nicely and my animation restarts. YAY ME!

NOW i wanna go in and do it using Photoshop and clean up the flaws that werent apperant to me when it was un animated, animation itself adds flaws itself like ghostly images altho hey what hes doing being kinda ghostly is no biggie. but there are things that i think i represented well but will people see it as what i represent? hell idk and i dont care. what i made is so whoa thats so cool i could enter what i have now in the contest and be super happy and proud of it. FLAWS and all.
just a typed sig...you dig...just words and stuff should be enough...dont need cool graphics at all. i think ill write a wall....of text. what should i say next? idk and idc not really trying to take this rhyme anywhere. i would post in the rap thread but if i do...nah no one cares only me. im the o

Offline HIT_THE_TRAIL

  • idk should say something here tho
  • Posts: 1105
  • Liked: 0
    • View Profile
    • Awards
RE: Tutorialized
« Reply #13 on: September 13, 2010, 06:43:58 AM »
for anyone having trouble using the photoshop animator this is also another way to animate something and i found it real easy to do. but i still will figure out to use the photoshops. i can see many advantages to it that this method lacks. i also posted this in the bi-weekly signature contest thread to help one person. perhaps posted here also it can help more people?

FREE MICROSOFT GIF ANIMATOR

check this toy out. if you can save something in GIF format (im 100% sure you can instead of jpg or whatever you save for web as now) then you can so easily then put it in this Microsoft GIF Animator and heres the cool part...its free. did i mention its so easy??? i have Rebel Raven to thank for letting me know how she created her sigs.

THANKS AGAIN REBEL_RAVEN. btw i asked for her permission to tell others her secret she had no problem with sharing shes so cool.

MICROSOFT GIF ANIMATOR INSTRUCTIONS YOU DONT REALLY HAVE TO READ THIS PART BUT IT WILL HELP WITH THE ONE OR TWO FLAWS IT HAS.
make all your frames the same size and saved as a GIF file. load your frames in backwards order to start(idk y its dumb but its free). select them all with the select all frames button set your delay and choose looping forever. it has one other flaw it wants to rush through the last frame in your animation as fast as it can so.. just drag the last frame to copy it into the next slot. set your duplicate last frame to a low short time is what i did like 10. then view it with the play button next to the help button that will actually help you because the tools so simple. tweak your timing on individual frames if you want and then save your new animated gif. so easy a caveman like me can do it and tell others how to. lmao

i swear on a stack of bibles if you can make two sigs one somehow different you can make an animated sig!

oh i suggest when making frames you make the PSD file name like "joker sig 1" and the gif save "joker sig gif 1" or some kinda easy system that its obvious which is what and what order. Plus you have an editable version of each frame with a PSD file save as well as the gif save for each frame. you might be in trouble if you only save a frame as a gif. cant tweak on the layers like you can on the original photoshop document file.
« Last Edit: October 26, 2010, 12:39:06 PM by DiamondBackDylan »
just a typed sig...you dig...just words and stuff should be enough...dont need cool graphics at all. i think ill write a wall....of text. what should i say next? idk and idc not really trying to take this rhyme anywhere. i would post in the rap thread but if i do...nah no one cares only me. im the o

Offline sF Fizzy

  • Doo doo doo-doo doo-doo doo doooooo doooooo doo-doo-doo-doooooo doo-doo-doodoo-doo-doo...
  • Posts: 1693
  • Liked: 0
  • Country: 00
    • View Profile
    • Awards
RE: Tutorialized
« Reply #14 on: September 14, 2010, 08:49:37 PM »
I will eventually be making a youtube tutorial video explaining some of my sigs as ive been asked how to make em... theyre actually quite simple but ill post when i make it

Offline Kingcgc

  • Loyalty Beyond Death
  • Posts: 1539
  • Liked: 48
  • Country: us
  • Gender: Male
  • Stercus Accidit
    • View Profile
    • TRT Site
    • Awards
RE: Tutorialized
« Reply #15 on: September 15, 2010, 09:33:48 PM »
Quote from: 'HIT_THE_TRAIL' pid='169418' dateline='1284374638'

for anyone having trouble using the photoshop animator this is also another way to animate something and i found it real easy to do. but i still will figure out to use the photoshops. i can see many advantages to it that this method lacks. i also posted this in the bi-weekly signature contest thread to help one person. perhaps posted here also it can help more people?


FREE MICROSOFT GIF ANIMATOR
http://download.cnet.com/Microsoft-GIF-A...12053.html

check this toy out. if you can save something in GIF format (im 100% sure you can instead of jpg or whatever you save for web as now) then you can so easily then put it in this Microsoft GIF Animator and heres the cool part...its free. did i mention its so easy??? i have Rebel Raven to thank for letting me know how she created her sigs.

THANKS AGAIN REBEL_RAVEN. btw i asked for her permission to tell others her secret she had no problem with sharing shes so cool.

MICROSOFT GIF ANIMATOR INSTRUCTIONS YOU DONT REALLY HAVE TO READ THIS PART BUT IT WILL HELP WITH THE ONE OR TWO FLAWS IT HAS.
make all your frames the same size and saved as a GIF file. load your frames in backwards order to start(idk y its dumb but its free). select them all with the select all frames button set your delay and choose looping forever. it has one other flaw it wants to rush through the last frame in your animation as fast as it can so.. just drag the last frame to copy it into the next slot. set your duplicate last frame to a low short time is what i did like 10. then view it with the play button next to the help button that will actually help you because the tools so simple. tweak your timing on individual frames if you want and then save your new animated gif. so easy a caveman like me can do it and tell others how to. lmao

i swear on a stack of bibles if you can make two sigs one somehow different you can make an animated sig!

oh i suggest when making frames you make the PSD file name like "joker sig 1" and the gif save "joker sig gif 1" or some kinda easy system that its obvious which is what and what order. Plus you have an editable version of each frame with a PSD file save as well as the gif save for each frame. you might be in trouble if you only save a frame as a gif. cant tweak on the layers like you can on the original photoshop document file.



-Facepalm-
_______________________________________________________________
35 minutes till the download is finished

Offline HIT_THE_TRAIL

  • idk should say something here tho
  • Posts: 1105
  • Liked: 0
    • View Profile
    • Awards
RE: Tutorialized
« Reply #16 on: September 15, 2010, 09:45:05 PM »
@Kingcgc are you still having troubles? 35 minutes? man it took me not long at all and i think my nets really slow. i just have basic DSL.

anyhow you can PM me if you want or need some help also.
just a typed sig...you dig...just words and stuff should be enough...dont need cool graphics at all. i think ill write a wall....of text. what should i say next? idk and idc not really trying to take this rhyme anywhere. i would post in the rap thread but if i do...nah no one cares only me. im the o

Offline HIT_THE_TRAIL

  • idk should say something here tho
  • Posts: 1105
  • Liked: 0
    • View Profile
    • Awards
RE: Tutorialized
« Reply #17 on: September 17, 2010, 12:49:49 PM »
can anyone tell me why the transparent part to the left of john shows up as white instead? just messing with a supposed image of a wolf soldier i found in the scary stories thread. i find it funny theres a deer laying down looking at john not the wolfman. i just added john and my user id.

saved as JPEG



saved as GIF
« Last Edit: September 18, 2010, 02:43:38 AM by HIT_THE_TRAIL »
just a typed sig...you dig...just words and stuff should be enough...dont need cool graphics at all. i think ill write a wall....of text. what should i say next? idk and idc not really trying to take this rhyme anywhere. i would post in the rap thread but if i do...nah no one cares only me. im the o

Offline PredawnDwarf

  • AftertwilightMidget
  • Posts: 2133
  • Liked: 3
    • View Profile
    • Awards
RE: Tutorialized
« Reply #18 on: September 17, 2010, 01:16:48 PM »
Quote from: 'HIT_THE_TRAIL' pid='172195' dateline='1284742189'

can anyone tell me why the transparent part to the left of john shows up as white instead? just messing with a supposed image of a wolf soldier i found in the scary stories thread. i find it funny theres a deer laying down looking at john not the wolfman. i just added john and my user id.

(Image removed from quote.)


It's because you have saved your image in JPG. JPG does not support transparency. Save it in GIF.

Offline HIT_THE_TRAIL

  • idk should say something here tho
  • Posts: 1105
  • Liked: 0
    • View Profile
    • Awards
RE: Tutorialized
« Reply #19 on: September 17, 2010, 06:14:26 PM »
Quote from: 'PredawnDwarf' pid='172207' dateline='1284743808'

Quote from: 'HIT_THE_TRAIL' pid='172195' dateline='1284742189'

can anyone tell me why the transparent part to the left of john shows up as white instead? just messing with a supposed image of a wolf soldier i found in the scary stories thread. i find it funny theres a deer laying down looking at john not the wolfman. i just added john and my user id.

(Image removed from quote.)


It's because you have saved your image in JPG. JPG does not support transparency. Save it in GIF.


oh.....hey how do you know so much when you only made the one sig that i know of the whole time ive been a member? lol

Thanks for helping me yet again PredawnDwarf!
just a typed sig...you dig...just words and stuff should be enough...dont need cool graphics at all. i think ill write a wall....of text. what should i say next? idk and idc not really trying to take this rhyme anywhere. i would post in the rap thread but if i do...nah no one cares only me. im the o