SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Evangelist
    Join Date
    Jun 2010
    Location
    Israel
    Posts
    523
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Need help with a small image

    Hey guys, does any1 know how can i achieve this image, but without all the orange part? (i want only the white part for an hover effect)

    item-primary-bg.jpg

    thanks,
    ulthane

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,217
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    Do you have Photoshop? It's quite easy to do something like that in that program.

  3. #3
    SitePoint Evangelist
    Join Date
    Jun 2010
    Location
    Israel
    Posts
    523
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I have it, don't have any clue on how to do it, any guide?

  4. #4
    SitePoint Enthusiast NuttySkunk's Avatar
    Join Date
    Jan 2012
    Location
    United Kingdom
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Looks fairly simple.

    There is a semi-transparent box over the top half and a radial gradient/glow in the centre.

    Use either a brush or gradient to produce the while glow in the middle then use the marquee tool to draw a rectangle over the top half of the image, fill it with white and then set the opacity to something like 15%. MAke sure your canvas is transparent and save the resulting image as a transparent PNG, or change the background colour to whatever you need it to be and save as a high quality JPG (80 quality), so that the gradient retains its smoothness. Make sure you "File - > Export for web and devices" to optimise the file size.

  5. #5
    SitePoint Enthusiast NuttySkunk's Avatar
    Join Date
    Jan 2012
    Location
    United Kingdom
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is a 3 min re-make:

    glow.jpg

    Here is the PSD for you to play with glow.psd, use this to learn with, dont just use it!

  6. #6
    SitePoint Evangelist
    Join Date
    Jun 2010
    Location
    Israel
    Posts
    523
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    why is it taking so long to approve a few attachments ? >.<
    Thanks for the guide nutty, specially that tip with save for web and device, didnt knew of it.

    I'll make sure to learn using the PSD as soon as ill be able to download it...

  7. #7
    SitePoint Guru bronze trophy TheRaptor's Avatar
    Join Date
    Jul 2011
    Location
    New York
    Posts
    710
    Mentioned
    40 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ulthane View Post
    why is it taking so long to approve a few attachments ?
    Off Topic:

    Due to malicious content, attachments must be manually approved by a moderator. I've sent a signal up, they'll be approved shortly.
    TheRaptor - Joe

  8. #8
    SitePoint Enthusiast NuttySkunk's Avatar
    Join Date
    Jan 2012
    Location
    United Kingdom
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Your welcome.

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,217
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    Another option would be to create a new layer and draw an elipse with the ellipse tool, filling it with white (or set your foreground color to white first, so that this will happen by default). Then go to Layer > Rasterize > layer. Then go to Filter > Blur > Gaussian Blur and choose a large radius (say 40px) which will blur the object and create something like what you want. (I'm sure I've done this other ways, too, but I'm very much as Ps noob. You can just about type any how-to question in Google and find a tutorial on it, though. It's amazing how much is out there.)

  10. #10
    SitePoint Enthusiast NuttySkunk's Avatar
    Join Date
    Jan 2012
    Location
    United Kingdom
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Another option would be to create a new layer and draw an elipse with the ellipse tool, filling it with white (or set your foreground color to white first, so that this will happen by default). Then go to Layer > Rasterize > layer. Then go to Filter > Blur > Gaussian Blur and choose a large radius (say 40px) which will blur the object and create something like what you want. (I'm sure I've done this other ways, too, but I'm very much as Ps noob. You can just about type any how-to question in Google and find a tutorial on it, though. It's amazing how much is out there.)
    That is actually the process I went through when creating the above except I used the elliptical marquee tool rather than rasterising a shape layer.

  11. #11
    Non-Member rususorinvick's Avatar
    Join Date
    Feb 2012
    Location
    Iasi
    Posts
    24
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    hi, I'm not a photoshop user, but to achieve that in Corel, and I guess Illustrator, you just have to create a rectangle and add a radial fill to the rectangle....orange on the outside, white in the middle, you can play around with the colors, but when you are happy with the result, just export the image as a PNG/GIF/JPG.


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
  •