Jump to content
Psyancy

PSD to HTML

Recommended Posts

Hello guys.

Since i made a lot of designs for some friends/customers i decided to learn how to code them as well.

I lost my interest on web design cause i couldn't code them so i stopped at the 50% of the design due to lack of interest or deleted them cause i couldn't code them so i decided to learn how to code.

My question here is, does anyone know any "easy" tutorial for me to learn how to code them from psd to html?

I tried to search for tutorials around the net but the ones i found were only on specific designs and it just wasn't the style of the websites i love to design. I want to learn how to build any kind of website and not only with a header, a main content and a footer.

Thanks in advance

Share this post


Link to post
Share on other sites

As @OMGhixD said you need to save the image to a PNG/JPG file by opening it up in Photoshop (or GIMP). To insert an image in HTML you use the <img> tag. Say your image is named mycoolimage.png which is located in the root directory of your html file, then you would do

<img src="mycoolimage.png">

See W3Schools for more details regarding the <img> tag.  

Share this post


Link to post
Share on other sites

I tried coding a PSD to HTML myself and looked pretty good but didn't work properly.

I searched Google for a bit and came up with this video, didn't watch it entirely. I hope this is what you were looking for.

It's a pretty old video, but I think not much has changed.

You will not find a tutorial entirely based on your design. Most videos show how you can do it and then you have to figure out yourself how to it at which part.

Share this post


Link to post
Share on other sites

Thank you very much buddy, i'll check it :)
I know i won't find any tutorial entirely based on my designs but at least i want something more "complete" the most of tutorials i've read was mostly on how to build a basic website and only that cause the designs i make are designed for Lineage 2 websites mostly and it's not just a header, a main content and a footer, i know some HTML editing, i can take a ready template and totally change it to something else, now i want to learn how to build this and not only change colors,images and some other things which are already done by someone else. 

Share this post


Link to post
Share on other sites
1 hour ago, Psyancy said:

Thank you very much buddy, i'll check it :)
I know i won't find any tutorial entirely based on my designs but at least i want something more "complete" the most of tutorials i've read was mostly on how to build a basic website and only that cause the designs i make are designed for Lineage 2 websites mostly and it's not just a header, a main content and a footer, i know some HTML editing, i can take a ready template and totally change it to something else, now i want to learn how to build this and not only change colors,images and some other things which are already done by someone else. 

I've been inactive with this subject for far to long..  I want to go back to coding PSD's once again. Refreshing my mind on how to do such things. I see more and more people who are wanting to code a PSD, so it would be good to help people out more as soon as I get it done correctly.

Sorry for my English today, I'm sick and can't really think straight.

Share this post


Link to post
Share on other sites
1 hour ago, Unrecognized said:

I've been inactive with this subject for far to long..  I want to go back to coding PSD's once again. Refreshing my mind on how to do such things. I see more and more people who are wanting to code a PSD, so it would be good to help people out more as soon as I get it done correctly.

Sorry for my English today, I'm sick and can't really think straight.

It's ok buddy, well the bad thing on the whole thing is i love to design not to code and i started a lot of times to learn how to code from psd to html but always got bored and stop due to lack of interest, but from the other side i cannot make designs just to make them for no reason it's like you paint something and when you finish it you just drop it somewhere in your warehouse ;p 

Share this post


Link to post
Share on other sites
22 hours ago, Psyancy said:

It's ok buddy, well the bad thing on the whole thing is i love to design not to code and i started a lot of times to learn how to code from psd to html but always got bored and stop due to lack of interest, but from the other side i cannot make designs just to make them for no reason it's like you paint something and when you finish it you just drop it somewhere in your warehouse ;p 

I love to code websites, design website is nice too but I've more interest in code things than design things.

Share this post


Link to post
Share on other sites
1 hour ago, Unrecognized said:

I love to code websites, design website is nice too but I've more interest in code things than design things.

Yeah you got what i miss and i got what you miss ;p

I'll share soon some websites i'm gonna design, if you like any you can code it and share it as well if you want 

Share this post


Link to post
Share on other sites
1 hour ago, Psyancy said:

Yeah you got what i miss and i got what you miss ;p

I'll share soon some websites i'm gonna design, if you like any you can code it and share it as well if you want 

Would be nice and I would try my best to make something what functions quite good.

Share this post


Link to post
Share on other sites
On 9/23/2016 at 4:24 PM, Unrecognized said:

Would be nice and I would try my best to make something what functions quite good.

Nice to hear, i'll share some templates soon :)

Share this post


Link to post
Share on other sites

So i was wrong. you can code a PSD file into HTML. But i dont see the point. Whynot just render the file as an JPG or PNG and get the most quality out of it. But also spare space on your Computer / Host.

Share this post


Link to post
Share on other sites
20 hours ago, OMGhixD said:

So i was wrong. you can code a PSD file into HTML. But i dont see the point. Whynot just render the file as an JPG or PNG and get the most quality out of it. But also spare space on your Computer / Host.

I mostly make designs for private servers and i need them to be in html so they can manage their content and add/edit/remove texts, by making this with images it won't be easy for them to edit/change/remove something

Share this post


Link to post
Share on other sites
On 26/09/2016 at 2:01 AM, Psyancy said:

I mostly make designs for private servers and i need them to be in html so they can manage their content and add/edit/remove texts, by making this with images it won't be easy for them to edit/change/remove something

If you want them to have great quality and be able to change the text from it without changing the PNG/JPG I will suggest doing all the background images with PSD and exporting it as JPG or PNG and then just use CSS to add font style and drop shadow. I know that there is a plugin for Photoshop that converts your font style into CSS and then it js just matter of applying that css to html.

 

Update:

I am sorry there is a function under layer which you can convert to css

https://thesiteslinger.com/blog/photoshop-to-css-conversion-3-methods-compared

Edited by Dawnbrightsu
Added link and corrected statement

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

About us

MMO-Society is the Forum former known as Lordcraft, MMO-Society offers various of Resources to help you evolve your knowledge within Emulation, In the process we make sure to form a strong community bond in-between each other and thus we are proud to can admit that MMO-Society is possibly the friendliest Community Forum to currently exist.

Useful Quick-Links

×
×
  • Create New...