View Full Version : PSD to HTML
ChristianSpring
21-05-2016, 04:56
Is it possible to meet someone where I can work only during weekend? I want to learn how to convert psd to hmtl work first.
PSD is Adobe Photoshop's native format for a raster image file and HTML is a markup language.
Sure you can post images to your web site after converting your images to a gif, jpeg or png. Plus you can build a website using in HTML 5 and CSS.
However, I'm not sure what you are asking. Can you clarify?
JohnBoucher
21-05-2016, 13:56
http://www.webbsy.com Will do the work for you
nighterfighter
21-05-2016, 16:50
PSD to HTML is more of a workflow.
A designer would make a mockup in Photoshop, and that design would be passed to a web developer who would then write the CSS, HTML, and Javascript to the website.
What sort of help do you need, exactly?
HTML is a descriptive language - you use it to say "This text goes here, blue please, and put a box for input other there, for passwords"
There's also CSS & javascript which do other stuff (CSS makes things beautiful, while javascript makes things interactive)
Those are the three main languages used for making (the frontend) of websites.
PSD is a image file with some detail as to what went into the image. There's no way to convert that bunch of pixels into "Blue text here, password box there, logo here, scroll like this."
You can kinda cheat, and export your PSD picture to a png or something, learn HTML and basically say "Put this giant picture here". By putting the picture there, you can view it as if it was a website, but there will be no interactivity, editing it further will be painful and it will be viewed weirdly from phones, making you zoom around a lot (if you are going to do this, find an actual tutorial to do it properly. google on youtube or something.)
A better way would be to learn HTML, use your PSD as a guide for how it should look, and code something to look like your PSD, but using HTML and CSS. You can also download programs that do the hard coding for you, and make desigining really beautiful websites easy - for example adobe Muse - http://www.adobe.com/au/products/muse.html I would definitly recommend doing a program like this, because it is flexible, dosen't restrain you and does actually integrate with photoshop (but it's still not a big button saying 'export to HTML').
The last option is to use a web site like squarespace to make your website. This is similar to Muse or other website programs, but simply - as well as with less flexibility.
To learn HTML you can use nearly any of the 'learn to program websites'. To make you website I would recommend using something like Muse, which after googling for 2mins looks great to me, or you could do something from an online website like wix or squarespace. But, these are all better than just pasting a website. - here's a blog from someone about it, if you need more explaining. http://blog.teamtreehouse.com/psd-to-html-is-dead
Brackets has a tool that allows you to do that easily: https://www.youtube.com/watch?v=xAP8CSMEwZ8
HTML...CSS...javascript...are the three main languages used for making (the frontend) of websites.
PHP?
nickbrickmaster
22-05-2016, 11:59
PHP?
PHP is for backend. JS, CSS, and HTML are for frontend.
PHP is for backend.
There are frameworks which use PHP for the front end. If you want to limit the definition of "front end" to only tasks running on the client side, it might be less ambiguous these days to just say client side.
Michael Hill
29-05-2016, 01:35
There are frameworks which use PHP for the front end.
This frightens me
This frightens me
Except under what circumstance would using PHP for front-end be useful? Bootstrap, Semantic and Foundation, all of which are a combination of HTML and CSS mixed in with some JS/Jquery stuff seem to work just fine.
Aren Siekmeier
29-05-2016, 01:47
This frightens me
Why? He doesn't mean that PHP is running on the client side. That's why he suggested client side as a clarification. Many many websites are not stored on the server as the html css and javascript that ends up being delivered to the browser, but rather this "front end" is generated by scripts written in languages such as PHP, based on http requests and session history.
Michael Hill
29-05-2016, 02:14
Why? He doesn't mean that PHP is running on the client side. That's why he suggested client side as a clarification. Many many websites are not stored on the server as the html css and javascript that ends up being delivered to the browser, but rather this "front end" is generated by scripts written in languages such as PHP, based on http requests and session history.
I've always interpreted front end as client side. I'm moderately okay with it as a server-side language (would never start a new project with it). I'm just trying to imagine someone (somehow) attempting to write some form of compiled client-side kludge instead of using something like LESS.
Alan Anderson
29-05-2016, 16:29
I've always interpreted front end as client side.
Now would be a good time for you to correct that interpretation.
The term "front end" refers to the portion of a computer program or system which is facing the user. In this context, it's the part of the http server which provides the html (and images, and scripts, and stylesheets, etc.) to the web client. This is in contrast to the "back end", which is the part which deals with the file system, databases, security, business rules, intrusion detection, etc.
The client side of a web application communicates with the front end of the server side. They are not the same thing.
Michael Hill
29-05-2016, 21:09
Now would be a good time for you to correct that interpretation.
The term "front end" refers to the portion of a computer program or system which is facing the user. In this context, it's the part of the http server which provides the html (and images, and scripts, and stylesheets, etc.) to the web client. This is in contrast to the "back end", which is the part which deals with the file system, databases, security, business rules, intrusion detection, etc.
The client side of a web application communicates with the front end of the server side. They are not the same thing.
I'd consider that content delivery rather than front end. I see web design as back end, content delivery, and front end. I believe it's a more modern web way of thinking, where AngularJS has gotten so prominent, everything on the server is backend and content-delivery and everything on the client is the front end. Basically, the new way to do things is provide a RESTful API and use JS+CSS+HTML for grabbing the data it needs and presenting it to the user.
Anymore, gone are the days of a script generating an HTML document with the contents filled into it. It's now about creating HTML templates with Handlebars placeholders and letting the client-side take care of everything.
vBulletin® v3.6.4, Copyright ©2000-2017, Jelsoft Enterprises Ltd.