1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Bored of tutorials, i want to convert some psd to html.

Discussion in 'Web Design' started by IKnow12, Aug 21, 2014.

  1. IKnow12

    IKnow12 Newbie

    Joined:
    Dec 8, 2012
    Messages:
    8
    Likes Received:
    2
    Hy guys, a couple of weeks ago i decided to follow the web developer/designer career. I started watching some html/css tutorials and i got bored just of watching and learning. I want to practice what i learn, so if you can help me with some psd files, i will try to convert them for free. Or if a web designer/developer can give me some tips about how can i practice what i learnt, and how can i get better in this. I really don't like just to learn, i want to put in action what i learnt. Thanks !
     
  2. The Watcher

    The Watcher Newbie

    Joined:
    Aug 21, 2014
    Messages:
    4
    Likes Received:
    3
    Just a suggestion, but you could try mimicking various web sites you visit. You could also find pages of website templates and attempt to mimic the template you see.
     
    • Thanks Thanks x 1
  3. srb888

    srb888 Elite Member

    Joined:
    Jul 30, 2008
    Messages:
    3,260
    Likes Received:
    5,067
    Gender:
    Male
    Occupation:
    WebzSurfer
    Location:
    Sun, Mon, Tue, WTF, Sat!!! :)
    1. Use: https://www.google.com/search?q=website+template
    2. Right click on an image,
    3. and then open the page in a different tab.
    4. Then on that tab, click the View Image button.
    5. Copy the image into PS.
    6. Set the image size to 1000px (width) or whatever is suitable for your new site design.
    7. You have a base of the home page now.
    8. Set up new layers and create your new images of the page components on them over the underlying base image. Do necessary fine-tuning to make it unique.
    9. Once it looks great, begin converting it into html.
    10. Done! Btw, don't forget to save the design in and as stages... you don't know when you'd want to get back to an earlier version of the ongoing design!

    Mix different designs. Rinse and repeat until you're an expert in designing them, and converting those PSDs into HTML sites!

    :)
     
    • Thanks Thanks x 1
    Last edited: Aug 22, 2014
  4. IKnow12

    IKnow12 Newbie

    Joined:
    Dec 8, 2012
    Messages:
    8
    Likes Received:
    2
    FirstWebTemplate.jpg
    Here it is my first web template. It's 6:26 am in my country and yeah.. i stayed all night to do this in photoshop. I have a lot of mistakes but it's my first template and first time using photoshop like this( I'm a noob in ps). Tomorrow i will try to convert it from psd to html/css. Ty for advices guys !
     
    • Thanks Thanks x 1
  5. Lasaint

    Lasaint Junior Member

    Joined:
    Aug 16, 2010
    Messages:
    119
    Likes Received:
    17
    Location:
    Bali
    Sign up at Codecademy.com, and follow their AirBNB tutorial. It's not learning by watching but learning by doing.
    With that mock up design in your image, you should be able to convert to html after learning the AirBNB tutorial on codecademy

    I'm not a web developer but as far as I know, they don't literally convert psd to html now. They only use photoshop to create the layout/placement/mockup then write the html code and the css.
     
    • Thanks Thanks x 1
    Last edited: Aug 25, 2014
  6. IKnow12

    IKnow12 Newbie

    Joined:
    Dec 8, 2012
    Messages:
    8
    Likes Received:
    2
    Ok, i will sign up to codeacademy. That's what i like learning by doing not just by watching . Ty for advices !