{"id":9114,"date":"2012-10-25T13:10:37","date_gmt":"2012-10-25T07:40:37","guid":{"rendered":"http:\/\/www.tothenew.com\/blog\/?p=9114"},"modified":"2016-12-19T17:43:45","modified_gmt":"2016-12-19T12:13:45","slug":"using-pixel-perfect","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/using-pixel-perfect\/","title":{"rendered":"Using Pixel Perfect"},"content":{"rendered":"<p>Hello everybody,<br \/>\nFor the last couple of years, I have been working with HTML and CSS and lot of times we need to match our HTML page with the client sent PSDs. Firefox provides an add-on called <strong>Pixel Perfect<\/strong> for this. It helps us to overlay jpg files (extracted from the PSDs) on the HTML page created by the UI developer.<br \/>\n<br \/>\nThis is how you can use this feature:<\/p>\n<p>1. First of all, you have to install the Pixel Perfect add-on in Firefox.<br \/>\n2. <strong>Adding jpg file to the add-on<\/strong> &#8211; In latest version of Firefox the add overlay button (which used to be on the top-left corner) is missing. So in the new version, to make your file available to add-on you have to copy jpg file and paste it into <strong>user_overlays<\/strong> folder present in content directory of your Pixel Perfect installation folder.<\/p>\n<p>3.Now your jpg will overlay on the web page. You can set the opacity and position of the overlay with the help of Options section as shown in the above screenshot.<br \/>\n<br \/>\nHope it helps.:)<br \/>\n<a href=\"http:\/\/www.tothenew.com\/blog\/author\/rajan\/\">Rajan Shergill<\/a><br \/>\n<a href=\"mailto:rajan@intelligrape.com\">rajan@intelligrape.com<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Hello everybody, For the last couple of years, I have been working with HTML and CSS and lot of times we need to match our HTML page with the client sent PSDs. Firefox provides an add-on called Pixel Perfect for this. It helps us to overlay jpg files (extracted from the PSDs) on the HTML [&hellip;]<\/p>\n","protected":false},"author":50,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":0,"footnotes":""},"categories":[1],"tags":[4842,1106,65],"class_list":["post-9114","post","type-post","status-publish","format-standard","hentry","category-technology","tag-html","tag-pixel-perfect","tag-plugins"],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 5.0.0.1 - aioseo.com -->\n\t<meta name=\"description\" content=\"Hello everybody, For the last couple of years, I have been working with HTML and CSS and lot of times we need to match our HTML page with the client sent PSDs. Firefox provides an add-on called Pixel Perfect for this. It helps us to overlay jpg files (extracted from the PSDs) on the HTML\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<meta name=\"author\" content=\"Rajan Shergill\"\/>\n\t<link rel=\"canonical\" href=\"https:\/\/www.tothenew.com\/blog\/using-pixel-perfect\/\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 5.0.0.1\" \/>\n\t\t<meta property=\"og:locale\" content=\"en_US\" \/>\n\t\t<meta property=\"og:site_name\" content=\"TO THE NEW BLOG\" \/>\n\t\t<meta property=\"og:type\" content=\"blog\" \/>\n\t\t<meta property=\"og:title\" content=\"Using Pixel Perfect | TO THE NEW Blog\" \/>\n\t\t<meta property=\"og:description\" content=\"Hello everybody, For the last couple of years, I have been working with HTML and CSS and lot of times we need to match our HTML page with the client sent PSDs. Firefox provides an add-on called Pixel Perfect for this. It helps us to overlay jpg files (extracted from the PSDs) on the HTML\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/www.tothenew.com\/blog\/using-pixel-perfect\/\" \/>\n\t\t<meta property=\"og:image\" content=\"https:\/\/www.tothenew.com\/blog\/wp-content\/themes\/ttn\/images\/social-logo.png\" \/>\n\t\t<meta property=\"og:image:secure_url\" content=\"https:\/\/www.tothenew.com\/blog\/wp-content\/themes\/ttn\/images\/social-logo.png\" \/>\n\t\t<meta name=\"twitter:card\" content=\"summary\" \/>\n\t\t<meta name=\"twitter:site\" content=\"@tothenew\" \/>\n\t\t<meta name=\"twitter:title\" content=\"Using Pixel Perfect | TO THE NEW Blog\" \/>\n\t\t<meta name=\"twitter:description\" content=\"Hello everybody, For the last couple of years, I have been working with HTML and CSS and lot of times we need to match our HTML page with the client sent PSDs. Firefox provides an add-on called Pixel Perfect for this. It helps us to overlay jpg files (extracted from the PSDs) on the HTML\" \/>\n\t\t<meta name=\"twitter:image\" content=\"https:\/\/www.tothenew.com\/blog\/wp-content\/themes\/ttn\/images\/social-logo.png\" \/>\n\t\t<script type=\"application\/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/using-pixel-perfect\\\/#article\",\"name\":\"Using Pixel Perfect | TO THE NEW Blog\",\"headline\":\"Using Pixel Perfect\",\"author\":{\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/author\\\/rajan\\\/#author\"},\"publisher\":{\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/#organization\"},\"datePublished\":\"2012-10-25T13:10:37+05:30\",\"dateModified\":\"2016-12-19T17:43:45+05:30\",\"inLanguage\":\"en-US\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/using-pixel-perfect\\\/#webpage\"},\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/using-pixel-perfect\\\/#webpage\"},\"articleSection\":\"Technology, HTML\\\/UI\\\/CSS, pixel perfect, plugins\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/using-pixel-perfect\\\/#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog#listItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.tothenew.com\\\/blog\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/category\\\/technology\\\/#listItem\",\"name\":\"Technology\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/category\\\/technology\\\/#listItem\",\"position\":2,\"name\":\"Technology\",\"item\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/category\\\/technology\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/using-pixel-perfect\\\/#listItem\",\"name\":\"Using Pixel Perfect\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog#listItem\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/using-pixel-perfect\\\/#listItem\",\"position\":3,\"name\":\"Using Pixel Perfect\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/category\\\/technology\\\/#listItem\",\"name\":\"Technology\"}}]},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/#organization\",\"name\":\"TO THE NEW Blog\",\"url\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/author\\\/rajan\\\/#author\",\"url\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/author\\\/rajan\\\/\",\"name\":\"Rajan Shergill\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/using-pixel-perfect\\\/#authorImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/eb5d445c6d373510aede382494d12659d23728d95f26b7cef5d075dc66529ded?s=96&d=mm&r=g\",\"width\":96,\"height\":96,\"caption\":\"Rajan Shergill\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/using-pixel-perfect\\\/#webpage\",\"url\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/using-pixel-perfect\\\/\",\"name\":\"Using Pixel Perfect | TO THE NEW Blog\",\"description\":\"Hello everybody, For the last couple of years, I have been working with HTML and CSS and lot of times we need to match our HTML page with the client sent PSDs. Firefox provides an add-on called Pixel Perfect for this. It helps us to overlay jpg files (extracted from the PSDs) on the HTML\",\"inLanguage\":\"en-US\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/using-pixel-perfect\\\/#breadcrumblist\"},\"author\":{\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/author\\\/rajan\\\/#author\"},\"creator\":{\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/author\\\/rajan\\\/#author\"},\"datePublished\":\"2012-10-25T13:10:37+05:30\",\"dateModified\":\"2016-12-19T17:43:45+05:30\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/\",\"name\":\"TO THE NEW Blog\",\"inLanguage\":\"en-US\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.tothenew.com\\\/blog\\\/#organization\"}}]}\n\t\t<\/script>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"Using Pixel Perfect | TO THE NEW Blog","description":"Hello everybody, For the last couple of years, I have been working with HTML and CSS and lot of times we need to match our HTML page with the client sent PSDs. Firefox provides an add-on called Pixel Perfect for this. It helps us to overlay jpg files (extracted from the PSDs) on the HTML","canonical_url":"https:\/\/www.tothenew.com\/blog\/using-pixel-perfect\/","robots":"max-image-preview:large","keywords":"","webmasterTools":{"miscellaneous":""},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.tothenew.com\/blog\/using-pixel-perfect\/#article","name":"Using Pixel Perfect | TO THE NEW Blog","headline":"Using Pixel Perfect","author":{"@id":"https:\/\/www.tothenew.com\/blog\/author\/rajan\/#author"},"publisher":{"@id":"https:\/\/www.tothenew.com\/blog\/#organization"},"datePublished":"2012-10-25T13:10:37+05:30","dateModified":"2016-12-19T17:43:45+05:30","inLanguage":"en-US","mainEntityOfPage":{"@id":"https:\/\/www.tothenew.com\/blog\/using-pixel-perfect\/#webpage"},"isPartOf":{"@id":"https:\/\/www.tothenew.com\/blog\/using-pixel-perfect\/#webpage"},"articleSection":"Technology, HTML\/UI\/CSS, pixel perfect, plugins"},{"@type":"BreadcrumbList","@id":"https:\/\/www.tothenew.com\/blog\/using-pixel-perfect\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/www.tothenew.com\/blog#listItem","position":1,"name":"Home","item":"https:\/\/www.tothenew.com\/blog","nextItem":{"@type":"ListItem","@id":"https:\/\/www.tothenew.com\/blog\/category\/technology\/#listItem","name":"Technology"}},{"@type":"ListItem","@id":"https:\/\/www.tothenew.com\/blog\/category\/technology\/#listItem","position":2,"name":"Technology","item":"https:\/\/www.tothenew.com\/blog\/category\/technology\/","nextItem":{"@type":"ListItem","@id":"https:\/\/www.tothenew.com\/blog\/using-pixel-perfect\/#listItem","name":"Using Pixel Perfect"},"previousItem":{"@type":"ListItem","@id":"https:\/\/www.tothenew.com\/blog#listItem","name":"Home"}},{"@type":"ListItem","@id":"https:\/\/www.tothenew.com\/blog\/using-pixel-perfect\/#listItem","position":3,"name":"Using Pixel Perfect","previousItem":{"@type":"ListItem","@id":"https:\/\/www.tothenew.com\/blog\/category\/technology\/#listItem","name":"Technology"}}]},{"@type":"Organization","@id":"https:\/\/www.tothenew.com\/blog\/#organization","name":"TO THE NEW Blog","url":"https:\/\/www.tothenew.com\/blog\/"},{"@type":"Person","@id":"https:\/\/www.tothenew.com\/blog\/author\/rajan\/#author","url":"https:\/\/www.tothenew.com\/blog\/author\/rajan\/","name":"Rajan Shergill","image":{"@type":"ImageObject","@id":"https:\/\/www.tothenew.com\/blog\/using-pixel-perfect\/#authorImage","url":"https:\/\/secure.gravatar.com\/avatar\/eb5d445c6d373510aede382494d12659d23728d95f26b7cef5d075dc66529ded?s=96&d=mm&r=g","width":96,"height":96,"caption":"Rajan Shergill"}},{"@type":"WebPage","@id":"https:\/\/www.tothenew.com\/blog\/using-pixel-perfect\/#webpage","url":"https:\/\/www.tothenew.com\/blog\/using-pixel-perfect\/","name":"Using Pixel Perfect | TO THE NEW Blog","description":"Hello everybody, For the last couple of years, I have been working with HTML and CSS and lot of times we need to match our HTML page with the client sent PSDs. Firefox provides an add-on called Pixel Perfect for this. It helps us to overlay jpg files (extracted from the PSDs) on the HTML","inLanguage":"en-US","isPartOf":{"@id":"https:\/\/www.tothenew.com\/blog\/#website"},"breadcrumb":{"@id":"https:\/\/www.tothenew.com\/blog\/using-pixel-perfect\/#breadcrumblist"},"author":{"@id":"https:\/\/www.tothenew.com\/blog\/author\/rajan\/#author"},"creator":{"@id":"https:\/\/www.tothenew.com\/blog\/author\/rajan\/#author"},"datePublished":"2012-10-25T13:10:37+05:30","dateModified":"2016-12-19T17:43:45+05:30"},{"@type":"WebSite","@id":"https:\/\/www.tothenew.com\/blog\/#website","url":"https:\/\/www.tothenew.com\/blog\/","name":"TO THE NEW Blog","inLanguage":"en-US","publisher":{"@id":"https:\/\/www.tothenew.com\/blog\/#organization"}}]},"og:locale":"en_US","og:site_name":"TO THE NEW BLOG","og:type":"blog","og:title":"Using Pixel Perfect | TO THE NEW Blog","og:description":"Hello everybody, For the last couple of years, I have been working with HTML and CSS and lot of times we need to match our HTML page with the client sent PSDs. Firefox provides an add-on called Pixel Perfect for this. It helps us to overlay jpg files (extracted from the PSDs) on the HTML","og:url":"https:\/\/www.tothenew.com\/blog\/using-pixel-perfect\/","og:image":"https:\/\/www.tothenew.com\/blog\/wp-content\/themes\/ttn\/images\/social-logo.png","og:image:secure_url":"https:\/\/www.tothenew.com\/blog\/wp-content\/themes\/ttn\/images\/social-logo.png","twitter:card":"summary","twitter:site":"@tothenew","twitter:title":"Using Pixel Perfect | TO THE NEW Blog","twitter:description":"Hello everybody, For the last couple of years, I have been working with HTML and CSS and lot of times we need to match our HTML page with the client sent PSDs. Firefox provides an add-on called Pixel Perfect for this. It helps us to overlay jpg files (extracted from the PSDs) on the HTML","twitter:image":"https:\/\/www.tothenew.com\/blog\/wp-content\/themes\/ttn\/images\/social-logo.png"},"aioseo_meta_data":{"post_id":"9114","title":null,"description":null,"keywords":null,"keyphrases":null,"primary_term":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_url":null,"og_image_width":null,"og_image_height":null,"og_image_custom_url":null,"og_image_custom_fields":null,"og_video":null,"og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_url":null,"twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"Article","isEnabled":true},"graphs":[]},"schema_type":null,"schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":null,"robots_max_videopreview":null,"robots_max_imagepreview":"large","priority":null,"frequency":null,"local_seo":null,"limit_modified_date":false,"created":"2021-04-30 03:38:11","updated":"2024-02-29 09:36:21","focus_keyword":null,"additional_keywords":null,"truseo_locale":null,"ai":null,"breadcrumb_settings":null,"seo_analyzer_scan_date":null},"aioseo_breadcrumb":"<div class=\"aioseo-breadcrumbs\"><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/www.tothenew.com\/blog\" title=\"Home\">Home<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/www.tothenew.com\/blog\/category\/technology\/\" title=\"Technology\">Technology<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\tUsing Pixel Perfect\n\t\t<\/span><\/div>","aioseo_breadcrumb_json":[{"label":"Home","link":"https:\/\/www.tothenew.com\/blog"},{"label":"Technology","link":"https:\/\/www.tothenew.com\/blog\/category\/technology\/"},{"label":"Using Pixel Perfect","link":"https:\/\/www.tothenew.com\/blog\/using-pixel-perfect\/"}],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/9114","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/50"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=9114"}],"version-history":[{"count":0,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/9114\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=9114"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=9114"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=9114"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}