Example of converting PSD design to HTML slicing

Although I am not well-versed in the art of converting PSD to HTML, I am curious to hear from those who are experts in this area. My concern is that when I encounter these types of designs, I immediately think about the large size images (both in terms of dimensions and disk space) that will be included in the final html code.

For instance, with the third link, I plan to slice a large background image that includes all elements except for text and the blue background. Subsequently, I will add text on top of this image using HTML and declare the body background-color as blue. Is this considered a professional approach? If so, what potential drawbacks could arise from adopting this method for this specific page? What would be the correct way to handle this type of design?

Answer №1

It is definitely possible to create all of these designs under 300kb on disk. Crafting a website from a PSD while keeping bandwidth usage to a minimum is a crucial aspect of being a web developer. Providing exact instructions on how to achieve this is akin to teaching a lawyer how to practice law - it's a specialized craft that requires expertise and attention to detail. Here is a glimpse into the process:

  • The first design is straightforward. The gray gradient can be achieved using a 1 pixel-wide image repeated with CSS. The blue blocks can be created using a .gif image with slight transparency, while the images of the woman and logo can be JPGs. By utilizing CSS and a few strategically placed images, this design can come together seamlessly.

  • The second design features gradients that are mostly unidirectional. Slicing these gradients into 1px wide images and repeating them horizontally is a practical approach. The yellow bar could be composed of three separate images - one for the left part, another for the right part, and a repeating middle section. The illuminated 'Thank you' text could either be a high-quality JPG or PNG file.

  • The third design presents a challenge due to its numerous gradients in various directions. Consulting with the designer to simplify the gradients to a single direction (such as up-down) would be beneficial. Additionally, replacing the unique large font ('Thank you') with webfonts can enhance the design while reducing file size.

In each scenario, collaborating with the designer is essential, especially when dealing with pages rich in glows, gradients, shades, and shadows. Designing web pages requires a specific skill set that differs significantly from print or other media design. A skilled web designer understands how to streamline the development process and make it more efficient for developers.

Best of luck!

[edit] I advise against using CSS3 or browser-specific solutions for rounded corners and gradients, as compatibility with browsers like IE6 or 7 may be necessary. It's also wise to limit reliance on JavaScript for functionality.

Answer №2

Many of the design features can now be achieved using CSS 3. However, it is important to consider that older browser users may not have the same experience.

Check out this link for more information on CSS 3

If opting to convert everything into images, I recommend using a single large image to reduce http requests.

Answer №3

Examining the third example: With just CSS and HTML, you have the capability to achieve everything shown here, excluding the spotlight effect at the bottom. For IE compatibility, tools like can provide gradients, shadows, and rounded corners.

It's evident that the creator of these designs lacks knowledge in web design to create something of this nature.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing XPath in Selenium: Extracting text from elements based on their adjacent elements

I'm facing an issue where I am unable to retrieve the text value from one end. Here is a snippet for better understanding: <div class=""> <span class="address_city">Glenwood</span> <span class="address_state">GA</span> ...

Barba.js Revolutionizes Page Reloading for Initial Links

On my Wordpress site, I am using Barba js v.2 for page transitions. However, I have encountered an issue where I need to click on a link twice in order to successfully change the page and make the transition work. Interestingly, the first time I click on t ...

What is the process for dynamically looping through a table and adding form data to the table?

I am in the process of developing an hour tracking website that utilizes a form and a table. Currently, I have implemented the functionality where the form content gets added to the table upon the first submission. However, I need it to allow users to inp ...

Utilizing HTML templates in Express instead of Jade

Currently in the process of setting up a new MEAN stack project, with Angular as my chosen front-end framework. I am aiming to utilize HTML files for my views in order to incorporate Angular within them. However, I am facing challenges when attempting to s ...

Tips for generating a JSON string with nested structure

Can someone assist me in generating a JSON based on the HTML elements provided below? { "AppName": "ERP", "ModuleDesc": [ { "Name": "Payroll", "AcCESSRIGHTS": [ { "Create": "Y", "Retrive": "Y", "U ...

Troubleshooting Bootstrap 4 Content Alignment Issue: Centering Horizontally and Vertically

Having trouble centering my content both vertically and horizontally within the body of the webpage using Bootstrap 4. Despite trying various solutions from the documentation and StackOverflow, I can't seem to get it to work. Would greatly appreciate ...

Disable blur effect on child element with relative positioning

Is there a way to create a background blur effect using material cards without affecting a specific div? <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <link rel="stylesheet" href="https://code.getmdl.io/ ...

PHP code for sending email with attachment file

I have created an HTML form with the option to upload a file and send it to me via email. Additionally, I already have a PHP script that sends textbox values and text area values via email. Now, I would like the uploaded file from the form to be sent to m ...

"Exploring the process of integrating a controller into an external HTML file using AngularJS

I'm relatively new to AngularJS. In my web app, I have a set of buttons: index.html <button class="aButton">a</button> <button class="bButton">b</button> <script> $(document).ready(function(){ $(".aButton"). ...

What is the best way to showcase this information within my columns?

I'm facing an issue with VueJS. I have a large dataset that I want to display in columns in a specific order. How can I properly insert the code for this? Thank you for any assistance. [ { "sort": 0, "title": "My title", "description": ...

Looking for PHP templating solutions for creating stylish headers and footers on your

I am in the process of creating a website with various pages dedicated to About information, Projects, Events, and more. One issue I am facing is how to seamlessly include my navigation bar, header, and footer across all HTML files without duplicating the ...

Fixing alignment and responsiveness problems with a hovering circle div

I have 3 circular divs that resize slightly when you hover over them, but this resizing also occurs if you hover near them. Additionally, I want them to be centered with some responsive spacing. Here is a live demo: demo Below is my code: <div id ...

Having difficulty altering the font in the WordPress tinymce editor

I've been attempting to update the font in the WordPress tinymce editor, but I'm running into issues. First, I created a tinymce-custom-editor.css file with the following code: @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,7 ...

Stripping away all HTML elements, including their contents, from the text

Can anyone help me figure out how to remove all HTML tags and their contents using the BeautifulSoup library? Here is an example input: ... text <strong>ha</strong> ... text And this is the desired output: ... text ... text ...

When applying the `display:block` and `width:100%` attributes to an HTML table cell, it may

My issue lies in the usage of DISPLAY:BLOCK for the td cells with a class of column. Despite applying it appropriately, the logo and CALL US td cells do not stack vertically when resized to mobile size. While they are supposed to take up 100% width, they ...

Troubles with adding a semicolon when configuring cookies in Javascript with Angular

While attempting to implement cookies with TypeScript in Angular, I ran into an unexpected issue. My intention was to save some data in a cookie for future testing purposes. The line of code that caused the problem was: document.cookie = "token=" + value ...

How can I arrange the ng-class based on the clicked item's order?

http://plnkr.co/edit/pUtuZy?p=preview In this scenario, there are three different border classes available: .border1 { border: 1px solid #66FFFF; } .border2 { border: 1px solid #33CCFF; } .border3 { border: 1px solid #0099FF; } The goal is to as ...

Column content merging in BS layout

Currently, I am exploring how to implement a two-column layout with the left column serving as a scrollable navbar. At this early stage of development, please excuse any imperfections in the code! One issue that arose involved using the .sidebar class wit ...

How do I center align 2 td's in HTML?

I have a code snippet below for Submit and Cancel buttons. When I had 3 buttons, I aligned the middle one in the center which looked good. But now with only 2 buttons, they appear slightly to the left. How can I align them in the center of tr tag? Any su ...

What is the process for integrating SAP BO objects into HTML containers?

Has anyone successfully integrated a SAP BO object into an HTML container? I'm looking to embed a dashboard directly onto my webpage instead of redirecting users to a new tab for the Business Objects platform. ...