Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 4 1 2 3 ... LastLast
Results 1 to 10 of 35
  1. #1
    Senior Member
    Join Date
    Jan 2011
    Posts
    148
    Member #
    26229
    Liked
    1 times
    Hi,

    I am adding Facebook and Twitter images into a website and want them cut out perfectly.

    I have used selection tools within Photoshop and cut them out however come over a slight problem.

    When I load them onto the have a white border round them to make perfect squares, which looks bad against my background.

    Inside Photoshop it looks like they are correctly cut out.

    Can someone help and let me know how I can send perfectly cut out shapes onto my sites?

    Thanks,
    John

  2.  

  3. #2
    WDF Staff AlphaMare's Avatar
    Join Date
    Oct 2009
    Location
    Montreal, Canada
    Posts
    4,570
    Member #
    20277
    Liked
    878 times
    When you are in Photoshop, how are you saving the images?

    If you go to "File" -> "Save for Web and Devices" you should find a drop-down list of presets in the upper right of the window that will open.

    Choose to save the image as a .png file and your background should end up being transparent, thus giving the illusion that the logos are perfectly cut out.
    Good design should never say "Look at me!"
    It should say "Look at this." ~ David Craib


    http://digitalinsite.ca ~ my current site . . info@digitalinsite.ca ~ my email

    If you feel that someone's post helped you fix your problem, answered your question, or just made you feel better, feel free to "Like" their post. The "Like" link is at the bottom right of each post, along side the "reply" link. And if you are being helped here, try to help someone else - pass it on!

  4. #3
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,485
    Member #
    425
    Liked
    2783 times
    Alternatively, if they already are PNGs, you can create the transparent background yourself in their parent element by adding the following CSS to it. Failing that, you can create classes for the images and add the same CSS to the class:
    Code:
    background:  transparent;
    Don't add a background color unless you absolutely have to.

    But why are you taking Facebook/Twitter images? You're potentially looking at copyright infringement issues by doing that. That may be your deeper issue. If you've got a legal, legit reason that's cool. I just wanted to mention it in case it wasn't already considered.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  5. #4
    WDF Staff AlphaMare's Avatar
    Join Date
    Oct 2009
    Location
    Montreal, Canada
    Posts
    4,570
    Member #
    20277
    Liked
    878 times
    But why are you taking Facebook/Twitter images? You're potentially looking at copyright infringement issues by doing that.
    I had just assumed you were making icons to link to FB and Twitter. If you are taking other images, better be sure what the usage rights are.
    Good design should never say "Look at me!"
    It should say "Look at this." ~ David Craib


    http://digitalinsite.ca ~ my current site . . info@digitalinsite.ca ~ my email

    If you feel that someone's post helped you fix your problem, answered your question, or just made you feel better, feel free to "Like" their post. The "Like" link is at the bottom right of each post, along side the "reply" link. And if you are being helped here, try to help someone else - pass it on!

  6. #5
    Junior Member deanographics's Avatar
    Join Date
    Feb 2011
    Posts
    26
    Member #
    26637
    Create an image, remove the background (white layer) and then click on the layer you want to save and then save as a PNG for a higher quality higer color image that is still relatively small

  7. #6
    Member jwind's Avatar
    Join Date
    Nov 2010
    Location
    On a mac
    Posts
    76
    Member #
    24894
    Liked
    4 times
    You need to use the pen tool for better control over your paths. Furthermore, If your image was on a white background and your going to say black, you are going to have aliasing problems. Google it.

  8. #7
    Senior Member
    Join Date
    Mar 2011
    Location
    Nashville, TN
    Posts
    340
    Member #
    27244
    Liked
    26 times
    personally id suggest ALL logos to be created in Illustrator, a line art file can always be transfered to a pixel based platform in any size but a pixel based design usually never looks good transfered for a print.

    just my 2 cents


  9. #8
    Member desktop's Avatar
    Join Date
    Mar 2011
    Location
    Michigan
    Posts
    42
    Member #
    27184
    Liked
    4 times
    I'm with graphicsman - all my artwork is done in Illustrator. I usually start with a RGB doc at 300dpi, which (being a vector program) can then be safely resized to anything I want. It's also good if the client needs something printed or a high resolution version.

    As for the selection issue, create a square or rectangle using the Rectangle Tool, then select it with the Path Selection Tool (black arrow). Right click on it and choose "Fill Path", then uncheck the anti-alias box in the options that pop up and click OK. Your edges will be nice and straight.

  10. #9
    Senior Member
    Join Date
    Mar 2011
    Location
    Nashville, TN
    Posts
    340
    Member #
    27244
    Liked
    26 times
    Quote Originally Posted by desktop, post: 202283
    I'm with graphicsman - all my artwork is done in Illustrator. I usually start with a RGB doc at 300dpi, which (being a vector program) can then be safely resized to anything I want. It's also good if the client needs something printed or a high resolution version.

    As for the selection issue, create a square or rectangle using the Rectangle Tool, then select it with the Path Selection Tool (black arrow). Right click on it and choose "Fill Path", then uncheck the anti-alias box in the options that pop up and click OK. Your edges will be nice and straight.
    why do you design in RGB at 300dpi??? :unsure:


  11. #10
    Member desktop's Avatar
    Join Date
    Mar 2011
    Location
    Michigan
    Posts
    42
    Member #
    27184
    Liked
    4 times
    Quote Originally Posted by graphicsman, post: 202493
    Why do you design in RGB at 300dpi?
    I start all my work in a 300dpi document. Doesn't matter if it's RGB or CMYK, because you can change that at anytime. It's resolution dependent so 300dpi doesn't really mean anything, but since I mainly do web work it's RGB.


Page 1 of 4 1 2 3 ... LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 02:40 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com