0

I am not much of a designer. I have been given a PSD file and want to code that using HTML/ CSS. The PSD can be found here (https://www.mediafire.com/file/t6i8jy6kx2fwat5/restaurant.psd/file). I am trying to take the logo from the PSD and use it in my HTML. I generally use the slice tool but since the logo's background is transparent I used the below process.

  1. Select the logo layer and press ALT in the eye icon for that layer to deselect all other layers.
  2. Image > Trim
  3. Save as web, the file format is PNG 8.

The actual logo appears to be pretty crisp in the PSD. When I use it in my code however the logo appears to be broken along its edges . Could any one tell me if I am following the right process to do this ? And why does the logo appear so ugly in my code ?

This is the code to insert the logo . I am using bootsrap :

<body>
    <div class = "header-area" style = "background-color:black">
        <div class = "container">
            <div class = "row" >
                <div class = "col-md-2">
                    <img src="assets/img/logo.png">
                </div>

PSD Logo

Logo Broken

Improve this question
2
  • Welcome to GD.SE!
    – Mensch
    Nov 10, 2021 at 14:36
  • While you can probably get a much better export than that, I highly recommend just asking for the original source for that logo or an SVG version.
    – Zach Saucier
    Nov 10, 2021 at 14:56

1 Answer 1

Reset to default
2

PNG-8 only supports single-bit transparency, meaning you can't have 50% transparency and therefore edges can become pixelated. Use PNG-24 or even better a vector SVG. Image dimensions likely are too small too.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.