Hello and welcome to our community! Is this your first visit?
Register
Page 1 of 2 12 LastLast
Results 1 to 10 of 11
  1. #1
    Insanity Skype's Avatar



    Join Date
    Apr 2007
    Location
    England
    Posts
    27,397

    Skype's Userbar Tutorial [Pictures lol]

    Skype's Userbar Tutorial - Photoshop only (I use CS3, CS2 and below shouldnt be too different but i dont know)

    I'll go through the basics and explain everything you need to do to start making your own userbars.

    Step 1: - Scanlines are important
    Userbars dont look complete without some black scanlines going over it, and for that, you need to make a pattern.
    Go to File>new and make the canvas 5 px by 5 px with a transparent background.
    [img]http://**********.com/img/1220081130.png[/img]
    Then, with the pencil tool at size 1 colour black, make a diagnol line from one corner to the other. (zoomed in 3200%)
    [img]http://**********.com/img/1220081164.png[/img]

    With that done, go to Edit>Define Pattern and save it by whatever name you want.

    Step 2: - Sizes? Colours?
    With your scanline pattern complete, we now need to get to work making the actual userbar. Make a new canvas with size 350 px by 19 px, transparent background. Then, with your Gradient tool (under the fill tool, click and hold then select gradient fill) fill it in with a nice gradient.
    [img]http://**********.com/img/1220081236.png[/img]
    [img]http://**********.com/img/1220081261.png[/img]


    Step 3: - Scanlines
    Now you're going to want to add your scanlines. Make a new layer, and select the whole canvas (shift+a). Then go to your paint bucket, and at the top where it says foreground, click the dropdown and select pattern.
    [img]http://**********.com/img/1220081332.png[/img]
    Then, in the box next to the dropdown, click the arrow and find your scanline pattern we prepared earlier.
    [img]http://**********.com/img/1220081374.png[/img]
    Then simply click the canvas and your scanlines should appear.


    Step 4: - Render and Text
    Get yourself a nice render (picture, basically) and paste it onto your userbar ON A NEW LAYER (so if you screw up, you can change it easily). I am (of course) going to choose a pokemon. Oddish will do just fine.
    Cut it out and place it in a suitable place on your userbar, adjusting as you see fit.
    Now for text. Download this font CLICK and using it at size 10, white, type what you want and position it.
    [img]http://**********.com/img/1220081423.png[/img]
    Now, with the text layer selected, click the FX button, then click "stroke".
    [img]http://**********.com/img/1220081524.png[/img]
    Change the colour to black, and the size to 1 px. Then make sure the position is outside.
    [img]http://**********.com/img/1220081554.png[/img]

    Step 5: - Shiny and a clean finish
    Now everthing is done, its time to add a "shine". Select the elliptical marquee tool (same way as the gradient fill, click and hold then select it)
    [img]http://**********.com/img/1220081605.png[/img]
    and drag it over the top of your userbar.
    [img]http://**********.com/img/1220081663.png[/img]
    Now create a new layer (make sure this layer is above everything) and with the fill tool, fill it in white.
    [img]http://**********.com/img/1220081695.png[/img]
    Now with the layer selected, lower the opacity to about 38% - 44% for a good shiney look.
    [img]http://**********.com/img/1220081728.png[/img]
    Now, the last think to do is to add a border around the whole thing, to round it off and give it a clean finish. Make a new layer above everything and select the whole canvas (shift+a) and with the selection tool selected, right click anywhere in the canvas and select "stroke".
    [img]http://**********.com/img/1220081777.png[/img]
    Set the colour to black, size to 1 px and make sure the position is "inside".
    [img]http://**********.com/img/1220081811.png[/img]
    Now save as a .png and you're done!

    Here is my result.
    [img]http://**********.com/img/1220081841.png[/img]

    [center:3coftcr3]---------------------[/center:3coftcr3]

    Feel free to ask or PM me questions, and point out anything that is wrong. Yes, i know that when i add the text and render there are no scanlines, because i muffed up the order. Anyway, hope this helps, all the other ones have a load of text and no pictures >:C

  2. #2
    Fanatic Enthusiast Fuddermuffin's Avatar

    Join Date
    Sep 2005
    Location
    chinatown
    Posts
    2,527

    Re: Skype's Userbar Tutorial [Pictures lol]

    Oh so that's how you make that shine thing...
    Anyways, very nice tutorial and full of pics.
    But why do userbars always use those scanlines?
    [img]http://**********.com/img/1221454788.gif[/img] - Click Clack
    Steam ID: Fuddermuffin (Team Fortress 2)

  3. #3
    Insanity Skype's Avatar



    Join Date
    Apr 2007
    Location
    England
    Posts
    27,397

    Re: Skype's Userbar Tutorial [Pictures lol]

    Quote Originally Posted by Fuddermuffin
    Oh so that's how you make that shine thing...
    Anyways, very nice tutorial and full of pics.
    But why do userbars always use those scanlines?
    I have no idea, but i think they look off without them.

    Also, by using different sizes and patterns, you can change the look of your userbar. Just thought id mention. try experimenting.

  4. #4
    Veteran Enthusiast Picto's Avatar


    Join Date
    Oct 2006
    Location
    All hail the Animal King!? ???
    Posts
    8,037

    Re: Skype's Userbar Tutorial [Pictures lol]

    Very nice, and precise. The pictures will help people alot, and the result simply looks brilliant :P.
    [center:13w2rfcr]My Thread (updated 26/1/11!)[/center:13w2rfcr][center:13w2rfcr][/center:13w2rfcr] [center:13w2rfcr]Skype: lucienpicto[/center:13w2rfcr][center:13w2rfcr]Steam: _picto[/center:13w2rfcr]
    Quote Originally Posted by StargateSG
    But tell me, what is homo love?

  5. #5
    Veteran Enthusiast Nour's Avatar

    Join Date
    Mar 2008
    Location
    Orlando, FL
    Posts
    7,761

    Re: Skype's Userbar Tutorial [Pictures lol]

    Great tutorial man, I've been aching for one of these.

    [center:akkfv4h7][/center:akkfv4h7]

    [center:akkfv4h7]"Fuck off bitch, I've got legos to construct."[/center:akkfv4h7]

  6. #6
    Devoted Veteran Darren's Avatar

    Join Date
    Aug 2005
    Location
    Ireland
    Posts
    12,260

    Re: Skype's Userbar Tutorial [Pictures lol]

    some1 @ gr said u suck sry

    x
    [center:3qmfvtqh][/center:3qmfvtqh]

  7. #7
    Insanity Skype's Avatar



    Join Date
    Apr 2007
    Location
    England
    Posts
    27,397

    Re: Skype's Userbar Tutorial [Pictures lol]

    Quote Originally Posted by Darren
    some1 @ gr said u suck sry

    x
    Lmao, gtfo.

    Thanks for the comments guys. I might make another tutorial soooooooooon.

  8. #8
    Ben
    Ben is offline
    Senior Member
    Join Date
    Nov 2007
    Location
    PSN: middy4991
    Posts
    418

    Re: Skype's Userbar Tutorial [Pictures lol]

    Outcome

    [img]http://**********.com/img/1220139325.png[/img]

    Me: I like turtles
    Random Person at school: So do you!

  9. #9
    Fanatic Enthusiast Rapesauce's Avatar
    Join Date
    May 2008
    Location
    Melbourne
    Posts
    3,388

    Re: Skype's Userbar Tutorial [Pictures lol]

    Adjust the opacity of the scanlines Ben.
    And Skype aren't scanlines supposed to be white not black?
    [center:2ip4lcj2][tn=300:2ip4lcj2]http://i.imgur.com/ZlNjl.gif[/tn:2ip4lcj2][/center:2ip4lcj2]

  10. #10
    Insanity Skype's Avatar



    Join Date
    Apr 2007
    Location
    England
    Posts
    27,397

    Re: Skype's Userbar Tutorial [Pictures lol]

    Quote Originally Posted by Louis
    Adjust the opacity of the scanlines Ben.
    And Skype aren't scanlines supposed to be white not black?
    No.....
    go to the "official" userbar site (google it im not feeding you links) and they are all black. Or the majority are, from what ive seen.


 
Page 1 of 2 12 LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •