www.webdeveloper.com
Results 1 to 4 of 4

Thread: How do I put a thin 1px rectangle around an image using Photoshop?

  1. #1
    Join Date
    Apr 2005
    Posts
    493

    How do I put a thin 1px rectangle around an image using Photoshop?

    Can someone tell me how, using Photoshop, I put a thin 1px rectangle around an existing image

    For example, imagine I have an image that 500px wide and 200 px high
    I want a 10px gap all around and then I want the thin rectangle

    What would the proper way of doing this?

    Importantly, the image will be a PNG, so I want the gap around the image to be transparent

    I'm planning to have on a black background, so want my rectangle to be a white line

    + Is Photoshop the best application for doing this?

    Thanks in advance


    OM

  2. #2
    Join Date
    Jan 2012
    Location
    Pennsylvania
    Posts
    4

    Just add simple HTML to image

    Hi OM,

    This is what I'd do. Just add this code to the image
    Code:
    <img style="border:6px double #FFFFFF;"

  3. #3
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,480
    Hi there OM2,

    Your requirements can be met with CSS.

    Here is an example...
    Code:
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    
    <title>image, 10px padding and 1px border</title>
    
    <style type="text/css">
    body {
        background-color:#000;
     }
    img {
        display:block;
        padding:10px;
        border:1px solid #efc7c2;
        margin:50px auto;
     }
    </style>
    
    </head>
    <body>
    
    <div>
     <img src="http://www.coothead.co.uk/images/gaze.gif" alt="">
    </div>
    
    </body>
    </html>
    
    coothead

  4. #4
    Join Date
    Oct 2012
    Posts
    2
    First on the layers panel, make sure the later isn't locked. You can just double click the layer and say OK and the little lock icon will go away.

    Go to Image>Canvas Size. Tell it you want the canvas at 510px by 210px and that will make the transparent gap around your image. Or say 511x211 if you want 10 pixels before the border.

    Add a new layer on top of the first one. Fill it with any paint. In the layer toolbar, make the "Fill:" 0%.
    Right-click on that layer and select "Blending Options". Click "Stroke" and in the stroke section...make the color of the stroke white, change the size to 1px, change the position to "center".

    Now you're done. "Save for web", save as a PNG or GIF and make sure transparency is selected.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles