9 {{ upvoteCount | shortNum }}
9 {{ upvoteCount | shortNum }}

Photoshop to Html/CSS

by lirikh
8 replies
  • WEB DESIGN
    • |
I want to learn to design custom templates for my mobile websites with photoshop. So I was wondering if there's any guide or tutorials that you recommend and that are helpful? I usually code with html + css.

Thanks.
#html or css #photoshop
  • Profile picture of the author Nickels
    Try this tutorial - webdesignfan.com/design-a-clean-mobile-app-website-in-photoshop ( add http:// to the front ) .... Its a quick little tutorial that may help you on the basics. It is a written tut, which I prefer over video. If you are looking for video tutorials...just search youtube..im sure you will find alot of info there.
    Signature
    If you don't build your dream
    someone else will hire you to help
    build theirs.
    {{ DiscussionBoard.errors[5153895].message }}
    • Profile picture of the author GioSec
      The main component to going from photoshop to HTML will be slices. All you have to do is slice up your image into the components you need, with the slice tool. And then edit the properties for each slice and then save as HTML. Just play around with it, I never looked at a tutorial it's pretty intuitive.
      {{ DiscussionBoard.errors[5153909].message }}
      • Profile picture of the author siyaji
        Originally Posted by GioSec View Post

        The main component to going from photoshop to HTML will be slices. All you have to do is slice up your image into the components you need, with the slice tool. And then edit the properties for each slice and then save as HTML. Just play around with it, I never looked at a tutorial it's pretty intuitive.


        this is much better and nice as you can add mix the html and photoshop i mean can make a well designed image in your static page also for a better look of the website
        {{ DiscussionBoard.errors[5154085].message }}
  • Profile picture of the author Nickels
    I didnt think it about it that way lol.. Ive never designed a site like that (sliced image) but I used to do myspace overlay designs and thats how I did it, so I guess that would be the best option lol.
    Signature
    If you don't build your dream
    someone else will hire you to help
    build theirs.
    {{ DiscussionBoard.errors[5153949].message }}
  • Profile picture of the author Jay Moreno
    @op stick to HTML/CSS for styling your layouts...

    By all means use photoshop to develop the look of your site but instead of slicing the image look how you can use CSS to replicate the aesthetic look using minimal images.

    Slicing up a design and including into your design a heavy amount of images will kill the performance of your mobile site and give a bad user experience...

    Hope that helps

    Jay
    Signature
    Sorry, I am too busy helping people to think of a cool signature!
    {{ DiscussionBoard.errors[5154642].message }}
  • Profile picture of the author CSS Architect
    To start out I use the slices as background images, but only to use them as a guide. I try to put all text and image elements directly on top of the background just to ensure all spacing and placement matches the PSD, but of course as Jay had suggested, I will always use CSS over images when possible.

    Also, I just want to note that if you're new to slicing, try and work on something simple before you try your advance designs. It will require some planning, but this is something you have to experience on your own to understand.

    Just give it a try and if you have any issues, come back here for answers if needed.
    {{ DiscussionBoard.errors[5158907].message }}
    • Profile picture of the author worldonpalm
      There is lots of on line tutorials are available with good study material. Photoshop and Html/CSS are both are used in web designing and very growing and top demand now a day's.
      {{ DiscussionBoard.errors[5307960].message }}
  • Profile picture of the author blogfreakz
    you need to be familiar in html and css, those are the main things that you need to learn,, so i guess you can start learning these in w3c school... Starting with HTML + CSS hope this helps...
    Signature
    Listen to your favorite podcast here
    {{ DiscussionBoard.errors[5308631].message }}

Trending Topics