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 :

    <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">

PSD Logo

Logo Broken

  • Welcome to GD.SE!
    – Mensch
    Commented 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. Commented Nov 10, 2021 at 14:56

1 Answer 1


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.

Your Answer

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

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