Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Feb 2012
    Posts
    85
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Photoshop Mockup

    Just about to create a photoshop mockup for a website I want to do, I'm fairly new to photoshop as a whole (using it within web design) but been very familiar with html css and javascript for well over a year.

    However when creating this file, what size should I make it? I mean I'm going to add in guidelines for a 960px width anyway so does it really matter? Or should I not be starting up creating the mockup using a 960px width?

    Cheers
    Don't Click Here!

  • #2
    Regular Coder
    Join Date
    Jul 2008
    Posts
    157
    Thanks
    9
    Thanked 13 Times in 13 Posts

    do NOT "SLICE" !!!!!

    Hope you are not thinking of "SLICING" -- a bad idea by people who do not want to dirty their hands with HTML, CSS. Slicing a Photoshop or Illustrator or any other type of image creates a filled <TABLE>, and we all know <TABLE> layouts are bad. A filled <TABLE> is even worse.

    So-o-o-o-o-o? Cannot figure why the image "mockup" dimensions would matter???

  • #3
    New Coder
    Join Date
    Feb 2012
    Posts
    85
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by waxdoc View Post
    Hope you are not thinking of "SLICING" -- a bad idea by people who do not want to dirty their hands with HTML, CSS. Slicing a Photoshop or Illustrator or any other type of image creates a filled <TABLE>, and we all know <TABLE> layouts are bad. A filled <TABLE> is even worse.

    So-o-o-o-o-o? Cannot figure why the image "mockup" dimensions would matter???
    Oh I was going to create the file to the correct dimensions then use guidelines and create the mockup.

    What do people usually do? Create a huge file say 1200 x 1500 or something then put in guidelines for a 960px website?
    Don't Click Here!

  • #4
    Regular Coder
    Join Date
    Jul 2008
    Posts
    157
    Thanks
    9
    Thanked 13 Times in 13 Posts

    size ?

    Not sure how you are proceeding. Also could not find suitable info about Web monitor sizes (http://www.w3schools.com/browsers/browsers_display.asp or http://www.tastyplacement.com/monito...eb-design-html).

    I am a Photoshop and Illustrator user. Don't use image programs to create Web pages so do not understand your approach. A simple pencil sketch (1 column or 3 columns, etc.) works fine.

    Think "aspect ratio" might be more appropriate than pixels. Seems you are aiming for a "landscape" desktop computer monitor. What about portable devices and phones, some of which can be "portrait" oriented? Viewers (like me) will likely change screen resolutions to suit themselves.

    Seems like you are going for a "fixed" layout instead of fluid and/or responsive

    Cannot, at the moment. imd good reference links for you.

  • #5
    New Coder
    Join Date
    Feb 2012
    Posts
    85
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by waxdoc View Post
    Not sure how you are proceeding. Also could not find suitable info about Web monitor sizes (http://www.w3schools.com/browsers/browsers_display.asp or http://www.tastyplacement.com/monito...eb-design-html).

    I am a Photoshop and Illustrator user. Don't use image programs to create Web pages so do not understand your approach. A simple pencil sketch (1 column or 3 columns, etc.) works fine.

    Think "aspect ratio" might be more appropriate than pixels. Seems you are aiming for a "landscape" desktop computer monitor. What about portable devices and phones, some of which can be "portrait" oriented? Viewers (like me) will likely change screen resolutions to suit themselves.

    Seems like you are going for a "fixed" layout instead of fluid and/or responsive

    Cannot, at the moment. imd good reference links for you.
    Oh okay, I just thought with most designs say you wanted to do one you would create the entire mockup in photoshop first then go from psd to html and code it up? Or would you just code it from scratch and organise it into collums etc with code (css)
    Don't Click Here!

  • #6
    Regular Coder
    Join Date
    Jul 2008
    Posts
    157
    Thanks
    9
    Thanked 13 Times in 13 Posts

    personal preferences

    Don't mean to impose my personal approach on you -- other than do NOT slice. Try to avoid <TABLE> layouts, which is what you get when you slice.

    When searching for links before, saw a couple "Photoshop to html" but did not pursue them. It depends who the mockup is for? Are you presenting the fully rendered image to a client? Or is mockup just for your own guidance?

    The structure of a Web page lies in HTML tags, and its appearance is controlled by CSS applied to the HTML. That's the nut and bolts. A pretty image is useless if the HTML and CSS do not function properly.

    In the past, I have seen and referred to free Web page examples and tutorials, just cannot put my finer on some at the moment.

    Decide what best suits your content and your prospective visitors. I prefer "fluid" and "responsive" Web pages and find that, for display8ing sample images, a single column layout works best. For example see mobile versions of http://www.josephdenaro.com/indexmobile.html or http://www.jacquimorgan.com/other/indexmobile.html
    Last edited by waxdoc; 01-17-2013 at 01:51 AM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •