The Curator
Elite Member
- Dec 27, 2013
- 1,512
- 761
Does anyone know any good tutorials/guides on how to convert a psd landing page file to html file?
Appreciate any insight!
Appreciate any insight!
Anyone here ever convert psd files to html?
- Thread starter The Curator
- Start date
lockheadsr71b
Junior Member
- Mar 7, 2018
- 123
- 27
The short answer you cant .PSD to .html directly like you would .PNG to .JPEG for example.
Are you asking because you are good with photoshop and want to create website ? If it is so just dont, you will find that it is way easier to learn HTML/CSS. I have heard there are some possible ways but it requires multiple software packages and so on.
The other reason for the question I assume is if you know HTML/CSS but you need a large number of website in a short timespan. If so why not try an IDE ? I personally use Bootstrap Studio. Or if you are working with WordPress why not create your own templates ?
Are you asking because you are good with photoshop and want to create website ? If it is so just dont, you will find that it is way easier to learn HTML/CSS. I have heard there are some possible ways but it requires multiple software packages and so on.
The other reason for the question I assume is if you know HTML/CSS but you need a large number of website in a short timespan. If so why not try an IDE ? I personally use Bootstrap Studio. Or if you are working with WordPress why not create your own templates ?
Jobin John
Registered Member
- Aug 10, 2017
- 68
- 74
I would say it can be done because my team has been doing it. In general, “PSD to HTML” is a workflow. First, a web page is designed in a Photoshop Document (PSD) and then converted to code (using HTML, CSS, and JavaScript). You could swap Photoshop with any other image editor (like Pixelmator, GIMP, and so on), but the principle is the same.
We do our best to fully automate the PSD to CSS conversion process, but it is not feasible to entirely automate such a creative activity as PSD to HTML slicing. You will significantly improve the quality of generated HTML/CSS markup if follow these simple rules.
Do not prevent generation of CSS3 styles for layers. When creating the PSD file use ‘Shapes’, 'Layer masks' and 'Clipping masks' extensively. At the same time, use only those layer styles which can be converted into CSS3 (all the styles, except: ‘Satin’, ‘Bevel & Emboss’, ‘Pattern Overlay’). Do not rasterize layers!
Mark certain layers with tags (hints) according to the PSD to HTML documentation. To convert Photoshop layer into a link, input form, list, table, etc you should mark it with a specific PSD to HTML tag.
Group layers logically. Some inexperienced web designers do not maintain good layers structure in PSD template. Professional web designers always unite layers logically into Photoshop layer groups and thus maintain strict structure in a PSD template. We recommend uniting all layers into logical groups (like header, content, footer, columns, etc.). It will help the service to create correct HTML document structure from your PSD design.
Merge layers of one image into one layer. Usually, designers use several layers to represent one image (for example, logo or background may easily consist of 5-10 layers). Remember, that each visible Photoshop layer will be converted into a distinct HTML element. Usually, you don’t want to have 5-10 CSS layers to represent one image in your HTML markup. Put these layers into a distinct group and mark that group with a merge tag. Another way to achieve the same result is to convert these layers into a single Smart Object.
We do our best to fully automate the PSD to CSS conversion process, but it is not feasible to entirely automate such a creative activity as PSD to HTML slicing. You will significantly improve the quality of generated HTML/CSS markup if follow these simple rules.
Do not prevent generation of CSS3 styles for layers. When creating the PSD file use ‘Shapes’, 'Layer masks' and 'Clipping masks' extensively. At the same time, use only those layer styles which can be converted into CSS3 (all the styles, except: ‘Satin’, ‘Bevel & Emboss’, ‘Pattern Overlay’). Do not rasterize layers!
Mark certain layers with tags (hints) according to the PSD to HTML documentation. To convert Photoshop layer into a link, input form, list, table, etc you should mark it with a specific PSD to HTML tag.
Group layers logically. Some inexperienced web designers do not maintain good layers structure in PSD template. Professional web designers always unite layers logically into Photoshop layer groups and thus maintain strict structure in a PSD template. We recommend uniting all layers into logical groups (like header, content, footer, columns, etc.). It will help the service to create correct HTML document structure from your PSD design.
Merge layers of one image into one layer. Usually, designers use several layers to represent one image (for example, logo or background may easily consist of 5-10 layers). Remember, that each visible Photoshop layer will be converted into a distinct HTML element. Usually, you don’t want to have 5-10 CSS layers to represent one image in your HTML markup. Put these layers into a distinct group and mark that group with a merge tag. Another way to achieve the same result is to convert these layers into a single Smart Object.