Themes and graphics - tips and things to remember

Discussion in 'iOS Themes and Customization' started by berky93, Apr 29, 2008.

  1. berky93

    berky93 New Member

    Joined:
    Oct 28, 2007
    Messages:
    4,116
    Likes Received:
    40
    I always see threads on these forums simply giving out advice about themes and photoshop and graphics in general. I always like to tell the good people here about things to remember to make their image/graphic making more efficient and better quality. instead of making a new thread for everything and then just losing it after a few days within the bowels of these forums, I figured I'd make just one big "tips and tricks" thread. I only have a few now, but I'll constantly update the thread with others as I get them. also, leave a comment if you want something added to the list!

    Please Register or Log in to view images


    ===========================================================
    -Remember to tone down your gradients. instead of a red-black gradient for a 3d object, use a red-darker red one to tone down the image and help the object seem more plausible (have you ever seen an object that has on e side in complete darkness? not even the earth does that!)

    -ALWAYS save backups of your project in .psd format, to make sure you can make changes if you need to

    - save as you go - don't wait until you are dont with your project to save. save after every major change you make, to ensure if a problem occurs you don't have to start over.

    - use different effects in conjunction to achieve the best effect - just because theres a specific tool for a certain job doesnt mean thats all you need to do to achieve a good look - for instance, if you want to make a realistic 3d object, you would probably go for the bevel and emboss effect. but if you want it to be really realistic, you could also apply gradients, adjust the perspective, and drop shadow.

    -(This is for Photoshoppers) When you're saving off your files, instead of just saying "Save as...", make sure you choose "Save for Web and Devices". That'll keep your file sizes to a minimum, while still preserving the quality of the graphic. Even if you're saving as PNG-24, you can generally halve the size of your icons and such... which is especially necessary for themes with tons o' icons - TheAppleTree

    -Don't resize up - crypt

    -anti-alias words - crypt

    -Layer Effects: Drop Shadow

    If you're not familiar with layer effects already... well then welcome to candyland. 80-90% of what I do is accomplished just through manipulating layer effects in various ways. Play with this and explore a lot because it's truly the key to any success that I've had.
    In my example, I've created a simple blue dot on its own layer, and the background is transparent.

    Go to Layer > Layer Style > Drop Shadow (1st thumbnail) (You can also get there by double clicking your layer, btw)
    You'll see a box with a ton of different options, and you'll notice that the shadow has already appeared behind your icon. Normally, Drop Shadow has a default opacity setting of 75% and I generally use between 40 and 75 or so. Check out the second thumbnail.
    You'll also notice that there are a ton of options here:


    Angle determines where the simulated light source is coming from.
    Distance modifies the distance the shadow is from the source. I generally use a 2 or 3 pixel distance b/c ipod icons are really tiny. If you want the shadow to be uniform all the way around the icon (not offset at all), then of course use a distance of 0... sometimes that's just the effect that you need.

    Spread is basically how much the darkest opacity spreads out to the edges of the size confine. I know that's not terribly clear... play with it for a moment, and you'll see what I mean. If you want a really sharp shadow, turn up the spread really high.
    Size is how many pixels the shadow gradient will span. I generally use a size between 1 and 5.


    Remember that the distance the shadow effectively extends is the distance+size. If you create a 50x50 square in the middle of a 60x60 canvas, for example, make sure that the distance+size does not exceed 5 (because you'll only have 5 pixels clearance on each side). If so, you'll notice when you save it off that the shadow seems chopped off at the edges (a very common mistake). So you could have a distance of 0 and a size of 5... distance of 1, size of 4... etc. - TheAppleTree (had to resize because it is a really big post)

    -if you use the magic wand tool to remove the background from an image, try to make sure that the image is larger than you need it to be. that way you can resize down the image after removing the background to help remove the slight border left after removal (or fix edge problems if you took off too much)

    -gradients are a good way to fix black-bar problems - lets say you want to make an ipod touch wallpaper, but your image is the wrong ration of height-width. but you still want to keep the image size or cant resize withou t messing up the image. a good way to make it look better is to apply a transparent-to-black gradient on the top/bottom of the image so it fades into black instead of just ending. plus a gradient can be sed to add the necessary height/width to the image in a more natural color [beach would have sand color on bottom and sky on top, then you could put your name or a design there to help distract from the problem areas

    -places with repetition can be copied to hide things - lets say you have a picture of a huge filed but theres a weed in the middle. just take a strange shape of grass (squares are noticeable to the hman eye-try just using the lasso tool and making sorta the right shape) and copy it to the problem area. it doesnt always work, but on grass,sand,starts, etc. it works really well.
  2. deleted account 92

    deleted account 92 Active Member

    Joined:
    Jan 1, 2008
    Messages:
    2,797
    Likes Received:
    20
    im gonna love this thread, im sick of self-learning photoshop.

    Please Register or Log in to view images

  3. TheAppleTree

    TheAppleTree Active Member

    Joined:
    Dec 28, 2007
    Messages:
    774
    Likes Received:
    83
    Device:
    iPhone
    All good advice

    Please Register or Log in to view images


    Here's a tiny tidbit:
    (This is for Photoshoppers)
    When you're saving off your files, instead of just saying "Save as...", make sure you choose "Save for Web and Devices". That'll keep your file sizes to a minimum, while still preserving the quality of the graphic. Even if you're saving as PNG-24, you can generally halve the size of your icons and such... which is especially necessary for themes with tons o' icons.
  4. Crypt

    Crypt Well-Known Member

    Joined:
    Nov 29, 2007
    Messages:
    4,033
    Likes Received:
    71
    Device:
    iPhone 4S (White)
    i'll go ahead and add the most important thing you can ever do,

    ANTI-ALIAS YOUR EFFING WORDS

    also.. don't overbevel things

    and make sure your stuff isn't pixelly/grainy/etc

    and uh, the earth is too completely black on one half, sometimes

    Please Register or Log in to view images



    i'll add more things as they come to me

    edit: oh oh, yeah, RESIZING THINGS UP (to make them bigger) IS NEVER OKAY (most of the time)

    edit again: whoa i just realized that pic was taken from the moon

    neato!
  5. TheAppleTree

    TheAppleTree Active Member

    Joined:
    Dec 28, 2007
    Messages:
    774
    Likes Received:
    83
    Device:
    iPhone
    Drop Shadow

    Here's one more little bit that I posted a while back (also for Photoshoppers):

    Layer Effects: Drop Shadow

    If you're not familiar with layer effects already... well then welcome to candyland. 80-90% of what I do is accomplished just through manipulating layer effects in various ways. Play with this and explore a lot because it's truly the key to any success that I've had.
    In my example, I've created a simple blue dot on its own layer, and the background is transparent.
    Go to Layer > Layer Style > Drop Shadow (1st thumbnail) (You can also get there by double clicking your layer, btw)
    You'll see a box with a ton of different options, and you'll notice that the shadow has already appeared behind your icon. Normally, Drop Shadow has a default opacity setting of 75% and I generally use between 40 and 75 or so. Check out the second thumbnail.
    You'll also notice that there are a ton of options here:

    Angle determines where the simulated light source is coming from.
    Distance modifies the distance the shadow is from the source. I generally use a 2 or 3 pixel distance b/c ipod icons are really tiny. If you want the shadow to be uniform all the way around the icon (not offset at all), then of course use a distance of 0... sometimes that's just the effect that you need.
    Spread is basically how much the darkest opacity spreads out to the edges of the size confine. I know that's not terribly clear... play with it for a moment, and you'll see what I mean. If you want a really sharp shadow, turn up the spread really high.
    Size is how many pixels the shadow gradient will span. I generally use a size between 1 and 5.

    Remember that the distance the shadow effectively extends is the distance+size. If you create a 50x50 square in the middle of a 60x60 canvas, for example, make sure that the distance+size does not exceed 5 (because you'll only have 5 pixels clearance on each side). If so, you'll notice when you save it off that the shadow seems chopped off at the edges (a very common mistake). So you could have a distance of 0 and a size of 5... distance of 1, size of 4... etc.

    I hope that helped! The "Quality' chioces, such as Contour are a little bit more complex to describe... I can if you need me to, but honestly I don't really use them that much.

    Attached Files:

  6. deleted account 92

    deleted account 92 Active Member

    Joined:
    Jan 1, 2008
    Messages:
    2,797
    Likes Received:
    20
    how did you get your photoshop to be blue? is it part of vista or something?
  7. Crypt

    Crypt Well-Known Member

    Joined:
    Nov 29, 2007
    Messages:
    4,033
    Likes Received:
    71
    Device:
    iPhone 4S (White)
    ^windowblinds

    ./pmed her asking about that after i saw that pic
  8. TheAppleTree

    TheAppleTree Active Member

    Joined:
    Dec 28, 2007
    Messages:
    774
    Likes Received:
    83
    Device:
    iPhone
    That's a program called Windowblinds

    Please Register or Log in to view images

    It skins my all of my windows.
    I actually just went back to XP from vista on my primary machine.
    edit: lol... too slow...

    Attached Files:

  9. berky93

    berky93 New Member

    Joined:
    Oct 28, 2007
    Messages:
    4,116
    Likes Received:
    40
    ok I'll add that
  10. Crypt

    Crypt Well-Known Member

    Joined:
    Nov 29, 2007
    Messages:
    4,033
    Likes Received:
    71
    Device:
    iPhone 4S (White)
    whoa man

    i mean DO anti-alias words

    non-anti-aliased words are the worst thing since sliced bread

    (hence the ANTI-ALIAS YOUR EFFING WORDS in huge letters)

Share This Page