[TUTORIAL] Making sliders

Discussion in 'iOS Themes and Customization' started by kenney69, Jan 17, 2008.

  1. kenney69

    kenney69 New Member

    Joined:
    Dec 14, 2007
    Messages:
    108
    Likes Received:
    0
    I'm bored once again, and I guess I just like making tutorials. Here you go.

    First off, you're going to need some sort of image editing program. MS Paint won't cut it, I'm talking Photoshop/ImageReady. You can download ImageReady CS2 along with Photoshop CS2 here. ImageReady doesn't have a trial period, and it works pretty good. I have Photoshop CS3 Extended. You can search for a *******, but it has a 30-day trial period.

    Step 1
    Getting your image

    Simple enough: do a quick Google Image Search for an image to use on your slider. Here's what we'll be using for the sake of this tutorial. Right click it at it's full size and click copy.
    http://img141.imageshack.us/img141/9880/chicagobearslogody1.gif
    Step 1 complete.


    Step 2
    Getting the slider templates

    Click on the attachment at the bottom of this page to download a pack of slider templates to use.
    Step 2 complete.


    Step 3
    Making the Slider

    -Time to have some fun. Open up Photoshop/IR. Click File>New, and click OK.

    -Press CTRL+V to paste your image. If it's got a background on it, click the Magic Eraser tool if the background's one color, then click the background. This is the Magic Eraser (the selected one).

    Please Register or Log in to view images



    -If the background has many colors, pick the Quick Select tool (the little magic wand). Click on your image in all the parts until you've got what you want selected, then copy and paste it into a new image. It should have a white background. Since the image we're using has a white background, just click the white part around the logo.

    -Then go to Image>Image Size. Make the height 42 pixels.

    -Then, in the Layers window, CTRL+click the layer with your image on it. This will select only your image. Then copy it.

    -Next, open whichever slider template you want. I'll be using the one called "metal". Since there's no other real colors, just gray mostly, you'll need to go to Image>Mode>RGB Color. Open it up.

    -In the Layers window, click in the layer called Image Here and paste the small version of the logo. You're pretty much done.

    -If you want to move the image around in the slider, CTRL+drag it around the image.

    -If you want to resize the logo further, go back to the window with the logo, press CTRL+ALT+Z enough until you get the big logo with the transparent background. Resize it to whatever you want, but not more than 47 pixels in height. Then, click File>Save As. Make sure the file extension is ".png". Name it whatever you want, and click Save. Done! Step 3 complete.

    Finished product:

    Please Register or Log in to view images



    You'll notice when you open up any colored slider template that half of it is lighter. If you don't like it, delete the layer with the half-transparent thing. You'll need to click the little lock button when the layer is selected. The button is right above the layer panel in the Layers window. They're already in RGB color mode, too. If you want to change the color, click the layer called Apply H & S Here. Go to Image>Adjustments>Hue and Saturation. Click Colorize and adjust it any way you want to.

    And that's just about it. If you have any other questions, post them here and I'll answer them and add them to this post.

    Attached Files:

  2. transam7816

    transam7816 New Member

    Joined:
    Oct 12, 2007
    Messages:
    59
    Likes Received:
    0
    hey thanks man, appreciate it
  3. x6blues

    x6blues New Member

    Joined:
    Dec 13, 2007
    Messages:
    2,879
    Likes Received:
    113
    ty very much. trying this out tomorrow
  4. Boznian

    Boznian New Member

    Joined:
    Jan 13, 2008
    Messages:
    83
    Likes Received:
    0
    Huh, and where do I put this on my iPoT via FTP...
  5. Sol

    Sol New Member

    Joined:
    Jan 8, 2008
    Messages:
    48
    Likes Received:
    0
    In Customize.
    ---

    Thanks for the tutorial. I appreciate it, chief.
  6. fullofquestions

    fullofquestions New Member

    Joined:
    Dec 10, 2007
    Messages:
    81
    Likes Received:
    0
    Device:
    iPhone 3GS (White)

    Where is customize under in ftp??
  7. super51fan

    super51fan Well-Known Member

    Joined:
    Nov 23, 2007
    Messages:
    2,464
    Likes Received:
    54
    Device:
    iPod touch
    how do i open the templates
    i am using gimp
  8. kenney69

    kenney69 New Member

    Joined:
    Dec 14, 2007
    Messages:
    108
    Likes Received:
    0
    You need Photoshop or ImageReady to use those templates.
  9. Sol

    Sol New Member

    Joined:
    Jan 8, 2008
    Messages:
    48
    Likes Received:
    0
    You have to download Customize from Installer.

    After that, just search up the rest.
  10. fullofquestions

    fullofquestions New Member

    Joined:
    Dec 10, 2007
    Messages:
    81
    Likes Received:
    0
    Device:
    iPhone 3GS (White)
    Ok so i drag the slider into the customize folder under "maimslider" and i tryed maskslider and none of them change my slider....whats wrong?

Share This Page