1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Photoshop Question - Sharp-edged Outter Stroke

Discussion in 'Web Design' started by SYAWEDIS, Jul 12, 2012.

  1. SYAWEDIS

    SYAWEDIS Jr. VIP Jr. VIP

    Joined:
    Mar 7, 2012
    Messages:
    320
    Likes Received:
    21
    Location:
    Somewhere
    Home Page:
    Does anyone know how to get a SHARP-edged outter stroke in Photoshop?

    I design with PS and I have tried a number of ways to try and achieve this but have had no luck, always ends up with a rounded edge if it's an outter stroke. A lot of the times it doesn't make much difference, but there are times it would look a lot better to have a crisp edge instead of a rounded edge. I know when I first learned how to use GIMP it was easy, you'd make a selection and grow it by 1 or 2 or however many pixels you wanted the stroke to be, and voila. But PS doesn't have a grow/shrink selection option and I've tried a number of ways with no luck.

    Maybe I'm just missing something, or maybe it really can't be done. But if anyone has a way to achieve this that would be Awesome!
     
  2. B. Friendly

    B. Friendly BANNED BANNED

    Joined:
    Jun 10, 2012
    Messages:
    388
    Likes Received:
    480
    http://www.photoshopforums.com/hard-edge-outer-stroke-vt20609.html

     
  3. SYAWEDIS

    SYAWEDIS Jr. VIP Jr. VIP

    Joined:
    Mar 7, 2012
    Messages:
    320
    Likes Received:
    21
    Location:
    Somewhere
    Home Page:
    Thanks for that.

    I actually didn't know you could grow / shrink selections in photoshop (LOL), but it still doesn't compare to the sharpness of doing it in GIMP, and still doesn't achieve a nice crisp edge. While it's definitely much better than adding a stroke to the outside, it still ends up rounded and not quite 'crisp' looking...

    I don't believe the method you quoted would achieve the identical results to the example he showed, but good attempt for sure. I'm guessing it's a lost cause doing it in PS and I will just do it with GIMP and import it into PS if I reallyy need it.
     
  4. B. Friendly

    B. Friendly BANNED BANNED

    Joined:
    Jun 10, 2012
    Messages:
    388
    Likes Received:
    480
    His suggestion was to use Adobe Illustrator, which I would assume you already have.
     
  5. SYAWEDIS

    SYAWEDIS Jr. VIP Jr. VIP

    Joined:
    Mar 7, 2012
    Messages:
    320
    Likes Received:
    21
    Location:
    Somewhere
    Home Page:
    I don't have AI, although I'm sure it would be helpful to learn one of these days. I figured AI would be the answer to the problem, but I'd rather use GIMP because I already have it.

    I'm kind of surprised you can't do this with PS, and even more shocked that you CAN with GIMP :O
     
  6. B. Friendly

    B. Friendly BANNED BANNED

    Joined:
    Jun 10, 2012
    Messages:
    388
    Likes Received:
    480
    Are you saying that you PAID for PS, and you don't have the freely-available Adobe CS5 (cracked) Suite (which includes PS, AI and everything else) from one of any number of torrent sites? That's even more amazing.
     
  7. SYAWEDIS

    SYAWEDIS Jr. VIP Jr. VIP

    Joined:
    Mar 7, 2012
    Messages:
    320
    Likes Received:
    21
    Location:
    Somewhere
    Home Page:
    Truth is I just don't want to learn AI right now. I've heard it's a much better program for making logos and graphics but PS works just fine right now. I build everything out of shapes or paths so it's always scale-able anyway. I don't want to learn AI just because I want a sharp outter stroke, especially when I can already do it with GIMP in 10 seconds.
     
  8. agente808

    agente808 Regular Member

    Joined:
    Aug 23, 2009
    Messages:
    458
    Likes Received:
    196
    Location:
    on Vacation
    Gimp is combining features of PS and AI which is why it can do some of each, but not as much as either one. This is one of those features they got from AI which isn't part of PS because PS doesn't propose to be a vector program.

    That said, there are actually several methods to do this in photoshop, the best way to do it depends on what version on PS you are using though.

    Try this:
    select your layer, convert selection to path, transform path (expand), fill path (on a new layer), add stroke inside

    you may have to clean up your path a little to get the results you want.

    In the latest version of PS you can actually stroke a path (or shape) the same way you would in AI, so you can select "sharp corners" as an option - but that's not a layer style (which was always a shortcut to results anyway)
     
    Last edited: Jul 12, 2012
  9. SYAWEDIS

    SYAWEDIS Jr. VIP Jr. VIP

    Joined:
    Mar 7, 2012
    Messages:
    320
    Likes Received:
    21
    Location:
    Somewhere
    Home Page:
    I have tried this as well and got very poor results. I would think "sharp corners" would be a standard feature, never did I dream PS would be so incapable of something xD

    The Modify > Enarge worked -okay- but still, nothing crisp or professional looking, and certainly not as good as GIMP does it. I might just dip into AI one of these days. I'm pretty sure I'm working with CS5, btw.
     
  10. agente808

    agente808 Regular Member

    Joined:
    Aug 23, 2009
    Messages:
    458
    Likes Received:
    196
    Location:
    on Vacation
    I think you may have a different problem, the methods posted above give very crisp edges, with square corners.
    Are you creating shapes with anti-aliasing turned off maybe?

    The latest version of PS is CS6, btw.
     
    • Thanks Thanks x 1
  11. mccullum

    mccullum Power Member

    Joined:
    Aug 21, 2009
    Messages:
    509
    Likes Received:
    92
    just change stroke to "center" as opposed to outside
     
  12. SYAWEDIS

    SYAWEDIS Jr. VIP Jr. VIP

    Joined:
    Mar 7, 2012
    Messages:
    320
    Likes Received:
    21
    Location:
    Somewhere
    Home Page:
    Well first I have to say that photoshops "convert selection to path" option is pretty horrendous. It can't even make a circle path from a circle selection, let alone text or intricate shapes.

    If I try to do this with my logo for example, which is a crown shape, scaling the shape / path does not keep an even distance around the original size, the sides will grow quicker than the top/bottom (like a rectangle).

    I haven't tried the Modify > Enlarge without anti-aliasing, but I might try that, because I'm guessing it's the Aliasing causing the slightly rounded edges still.

    I don't mean to doubt you, but have you personally created an outter stroke with a sharp edge before? Can you show me an example of a finish product?
     
  13. SYAWEDIS

    SYAWEDIS Jr. VIP Jr. VIP

    Joined:
    Mar 7, 2012
    Messages:
    320
    Likes Received:
    21
    Location:
    Somewhere
    Home Page:
    Still not the same. If you do center stroke on Text for example, you will lose some of the text body, same for anything else.
     
  14. agente808

    agente808 Regular Member

    Joined:
    Aug 23, 2009
    Messages:
    458
    Likes Received:
    196
    Location:
    on Vacation
    ummm, yeah, lol
    I will upload something for you in a bit...

    then you are definitely doing something wrong, this works like a charm for me.

    @mccullum unfortunately, changing the layer effect stroke to center does not fix the problem - it still gives rounded corners.
     
  15. agente808

    agente808 Regular Member

    Joined:
    Aug 23, 2009
    Messages:
    458
    Likes Received:
    196
    Location:
    on Vacation
    corners-case-study.jpg I fired up an old version of PS, (CS3) to make absolute sure this has to work for you.
    Ok, so you can see the transforms give great crisp edges. The edit -> stroke method is what works correctly in CS6 now - you will get the square corner, but not in previous versions.

    Feel free to send me a sample of what you are working on and I will play with it.
     
  16. SYAWEDIS

    SYAWEDIS Jr. VIP Jr. VIP

    Joined:
    Mar 7, 2012
    Messages:
    320
    Likes Received:
    21
    Location:
    Somewhere
    Home Page:
    See, in your example you are using a Square shape. Try even with a rectangle and you will run into proportion problems, I think anyway.

    I'm not specifically working on anything at the moment,but I have wanted to do this in the past and just wanted to see if it's possible.

    If you want to try it yourself, just type my name into photoshop (obviously not CS6) and try to make a crisp stroke on the outside of the name. I know text was always a toughy.
     
  17. SYAWEDIS

    SYAWEDIS Jr. VIP Jr. VIP

    Joined:
    Mar 7, 2012
    Messages:
    320
    Likes Received:
    21
    Location:
    Somewhere
    Home Page:
    It was early this morning, and I missed most of this post...

    I would love to see an example of you achieving this with CS5 or lower. Maybe I am missing something, but no matter how I try, it doesn't work. I mean, I can 'make' it work, but it doesn't just 'work' without a lot of fudging, and even then the results aren't the best.

    I am very curious to see your results though, especially because you mention converting selection to path (which gives me very bad results).