Page 1 of 5 123 ... LastLast
Results 1 to 10 of 42
  1. #1
    Josh's Avatar

    Badge

    Join Date
    Dec 2009
    Location
    Florida .
    Posts
    10,474
    Points
    11,219
         User Info     Contact     Gamer ID
    Join Date
    Dec 2009
    Location
    Florida .
    Posts
    10,474
    Points
    11,219

    Default [TUT]How To Make a Userbar &+ Animate It

    You need Photoshop for this, sorry Gimp users.

    Part 1: Normal Userbar

    This is the userbar I will teach you to make:


    Step 1- Your Userbar:

    If you already know what you want to do your userbar on, you can move on to the next step. If you've come here to also learn what userbar you would like to make, then read on. Pick a userbar that you think will reflect your personal interests, hobbies, favorites, or just to show off your skills. The one I will be showing you to make is a simple but clean userbar. So if you're ready, let's begin!

    New Document:

    Start off by opening a new document with the dimensions 350 x 19 and a transparent background (See Figure Below).


    Gradient Effect:

    Now that you have your 350 x 19 box, let's add a gradient. I added a Black > Dark Grey gradient. (See Figure Below). Very simple so far? Good.


    Glossy Effect:

    In a New Layer we're going to add a glossy effect at the top using the Elliptical Marquee Tool (located as the first tool in the toolbox). Make a selection at the top of the userbar and fill it in with white. Bring down the opacity of that to about 20% for best results. Here is my end result of that step:


    Scanlines Effect:

    Looks good eh? Now lets add those famous scanlines. We have to open a new document with the dimensions of 6 x 6 px. Zoom in all the way (1600 %). Get out the Pencil Tool and make 6 boxes (color of your choice) going down diagonally from the top right > bottom left. You should have something like this:


    Now that you have that all set go to Edit > Define Pattern > OK. This makes it a pattern for later use. Now minimize that box and go back to your userbar. Double-click on the Background Layer (containing the gradient). Make sure the Layer Style box comes up. Now go to Pattern Overlay (on the left) and make sure its check-marked. Make sure you're in Pattern Overlay and go to Pattern and click the little arrow. Find your pattern that you just made and double-click it. Once you've done that lower the opacity of that pattern, for best results. Press OK. You should have something like this now:


    Final Step:

    Now that is the base of our userbar. Lets add some text and a logo or a picture. Here's what I came up with as my result:


    The stars are custom shapes and the font is called Visitor at size 13. Save it as a JPEG so you can put it on the net and save it as a PSD for the next step (Animation).

    Part 2: Animated Userbar

    This is the 2nd part to the Easy Userbar Tutorial where I will show you how to animate the userbar I previously made in part 1. Lets get started

    Begin The Animation:

    Lets get straight to the point, no messing around. First open up the previous PSD of the userbar we made in part 1. Then go to the top of Photoshop and click (Window > Animation). A long and narrow box labeled Animation will come up. Now I?m going to show you how to animate the text so it transitionns from one text to another. In that same PSD file make a new text layer with what you want. Now go to the Animation Window and click the Duplicate Selected Frames button. Now you should have two frames. In the first frame have exactly what you want to show first. In the second frame have what you want the first frame to transition into. Here's a screenshot of what we've done so far


    The image above shows my userbar, Animation Window, and the Layers Palette. Now as you can see I have 2 frames in the Animation Window, and so should you. To transition from the first frame to the next click the Tweens Animation Frames Button (3rd button from right). Now a dialog box will come up so use the settings below:


    Now in your Animation Window you should have a total of 7 frames. You can change the Time Delay for each slice to make it how you want. I used 1 second for the first and last slide and used 0 seconds for the middle frames. To save this for the web go to (File > Save for Web > Save). Now you can upload it to your site! This is the end result of my animated userbar:

    0 Not allowed! Not allowed!
    Last edited by Josh; 07-12-2010 at 02:48 PM.
    Collabo with my boi Artemis :3



  2. #2
    GFX Team Jugom's Avatar
    Join Date
    Feb 2010
    Location
    Utah
    Posts
    176
    Points
    668
         User Info     Contact     Gamer ID
    Join Date
    Feb 2010
    Location
    Utah
    Posts
    176
    Points
    668

    Default

    awesome, ill try this later

    0 Not allowed! Not allowed!
    **-Gfx Guy-**

    JuG[CL]JuG
    Psn
    JuGoM-

  3. #3
    Alexiiz FTW
    Novice Gfxer
    Alexiiz's Avatar
    Join Date
    May 2010
    Location
    Montreal,CA
    Posts
    178
    Points
    740
         User Info     Contact     Gamer ID
    Join Date
    May 2010
    Location
    Montreal,CA
    Posts
    178
    Points
    740

    Default

    ahh man dont have photoshop =(

    0 Not allowed! Not allowed!

    Baack !

  4. #4
    Josh's Avatar

    Badge

    Join Date
    Dec 2009
    Location
    Florida .
    Posts
    10,474
    Points
    11,219
         User Info     Contact     Gamer ID
    Join Date
    Dec 2009
    Location
    Florida .
    Posts
    10,474
    Points
    11,219

    Default

    Quote Originally Posted by TripleJ3131 View Post
    ahh man dont have photoshop =(
    Awwww! Google userbars and a userbar website should come up and pick one from there ;)

    0 Not allowed! Not allowed!
    Collabo with my boi Artemis :3



  5. #5
    Mad Fly
    Webmaster

    Join Date
    Apr 2010
    Posts
    410
    Points
    1,338
         User Info     Contact     Gamer ID
    Join Date
    Apr 2010
    Posts
    410
    Points
    1,338

    Default

    Wow great tutoral. I'll use this. :pwn:

    0 Not allowed! Not allowed!

  6. #6
    Breathe Carolina <3
    Former GFX'er
    TrueCrime's Avatar
    Join Date
    Dec 2009
    Location
    CHIRAQ NIGGA
    Posts
    2,059
    Points
    4,483
         User Info     Contact     Gamer ID
    Join Date
    Dec 2009
    Location
    CHIRAQ NIGGA
    Posts
    2,059
    Points
    4,483

    Default

    Quote Originally Posted by TripleJ3131 View Post
    ahh man dont have photoshop =(
    I'll post a torrent link and the keygen. I have it and it's great!

    (I can do that, can I?)

    0 Not allowed! Not allowed!
    epicly memed

  7. #7
    Josh's Avatar

    Badge

    Join Date
    Dec 2009
    Location
    Florida .
    Posts
    10,474
    Points
    11,219
         User Info     Contact     Gamer ID
    Join Date
    Dec 2009
    Location
    Florida .
    Posts
    10,474
    Points
    11,219

    Default

    Quote Originally Posted by True-Crime View Post
    I'll post a torrent link and the keygen. I have it and it's great!

    (I can do that, can I?)
    If it's a torrent yes you can. Which version of PS do you have?

    0 Not allowed! Not allowed!
    Collabo with my boi Artemis :3



  8. #8
    Elite Sub's Avatar
    Join Date
    Dec 2008
    Location
    AL
    Posts
    707
    Points
    515
         User Info     Contact     Gamer ID
    Join Date
    Dec 2008
    Location
    AL
    Posts
    707
    Points
    515
    Gamer IDs

    Gamertag: Im Barry Bonds PSN ID: xSubliminal

    Default

    just pm her a cracked version download?

    0 Not allowed! Not allowed!

    >meme arrows

  9. #9
    Nooblet X-Black-Hell-X's Avatar
    Join Date
    Feb 2010
    Location
    Belgium
    Posts
    3
    Points
    27
         User Info     Contact     Gamer ID
    Join Date
    Feb 2010
    Location
    Belgium
    Posts
    3
    Points
    27

    Default

    Hum I think that's a very good tutorial,but if I had Photoshop I could to be sure.Then someone could send me a link for downloading itI already searched but I dont find a good link they are all deleted...

    0 Not allowed! Not allowed!
    Elite Hacker



    SWRS - SWES ID's

    X-BlacK*[LKE]*Hell-X
    BlacK-Hell
    ___

    Xx*BlacK[LKE]Hell*xX
    .BlacK[>SK<]Hell.

  10. #10
    Breathe Carolina <3
    Former GFX'er
    TrueCrime's Avatar
    Join Date
    Dec 2009
    Location
    CHIRAQ NIGGA
    Posts
    2,059
    Points
    4,483
         User Info     Contact     Gamer ID
    Join Date
    Dec 2009
    Location
    CHIRAQ NIGGA
    Posts
    2,059
    Points
    4,483

    Default

    Quote Originally Posted by Josh View Post
    If it's a torrent yes you can. Which version of PS do you have?
    It's a torrent but the keygen I'll upload on RS. I do have some serials although.

    It's for CS5 Extended.

    Anyways look at the userbar below.

    0 Not allowed! Not allowed!
    epicly memed

Bookmarks

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -10. The time now is 09:18 PM.
Powered by vBulletin®
Copyright © 2018 vBulletin Solutions, Inc. All rights reserved.