Not signed in (Sign In)

SkillShare - A place to discuss Web Standards and Web Design topics

Categories

Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.

General Design: Starting designs in Photoshop?

Bottom of Page

1 to 11 of 11

  1.  
    •  
      CommentAuthorisdereks
    • CommentTimeMay 7th 2006
     permalink

    There is one thing I have not yet attempted to grasp as far as web design. I always hear about individuals creating mockups in Photoshop and then converting the image into a CSS based website. I'm curious to hear how others go about doing this. What's your Photoshop setup like? Settings? Tips? Anything that I have done online began its life with pen and paper and ended with the finished results online [albeit wit a lot of trial and error]. I have a feeling that mocking templates up in PS would save some time as far as spacing, measurements, etc. Thoughts?

    •  
      CommentAuthorDarren Hoyt
    • CommentTimeMay 7th 2006 edited
     permalink
    Mocking up design concepts in Photoshop first is an absolute necessity for me in terms of getting the layout elements and images looking just right. I didn't realize pen and paper was an option ;) Maybe for wireframing, but not for actual mockups.

    I'm curious: without Photoshop mockups, how do you show clients what you have in mind for their layouts? Creating the markup/CSS before even showing someone the idea sounds chancy.

    Re: creating previews for clients, do you all usually just forward a link to a giant jpg or pdf?
  3.  permalink
    Sketching mockup by hand on a paper is out of question. The only time it maybe useful is when you sit with a client directly in the office and trying to get some ideas from him. Next step before cutting the design and formatting to CSS is to create mockup in Photoshop and present it to client. The mockup created in Photoshop basically accurate representation of the final product which you can show to client and get approval.
    You don’t have to use Photoshop to create website mockups it’s up to you some people using Adobe Illustrator or InDesign. No matter what you using the point is to spend as less time as possible to create a mockup and make sure visually it represent the final product. Don’t confuse client with any extra stuff and design elements you only will create more work for you. I personally prefer Adobe Photoshop I guess I just used to it.

    Best, DS
    •  
      CommentAuthorisdereks
    • CommentTimeMay 7th 2006
     permalink
    I'm sorry, I don't use pen & paper for mockups. That wouldn't be very professional now would it? I meant to say that designs tend to start out as sketches on a piece of paper, then to the base markup, and then I begin to work in PS for the graphics and what not. What I was getting at was how people utilize PS early on in their routine. I guess I'm just looking on pointers to get the correct setup for PS in order to have a nice workspace to begin everything in PS.

    I'm behind the times as far as PS is for mockups. Someone just pointed out to me that my ruler was set in pt's not px's.
    • CommentAuthorMcJay
    • CommentTimeMay 8th 2006
     permalink
    Rulers ->> px, Dpi ->> 72, Type ->> Points, Grid ->> 100px and subdivisions ->> 10, Color ->> sRGB so that "save for web" doesn't mess up your colours. I mainly work with 1000x800px canvas.

    Always use pen&paper to scetch out your idea. Photoshop ain't really efficient enough for quick sketches.
    • CommentAuthormista3
    • CommentTimeMay 8th 2006
     permalink
  7.  permalink
    Typically I start a design as a wireframe created with Visio or Illustrator. The wireframes help designers create the graphical layer by giving them a better understanding of functionality and content.

    A graphic design is then created based on the wireframes with a program like Photoshop, Illustrator or Fireworks. Once the graphic design is approved, the files are then converted into HTML/CSS by a UI developer who creates a functional web page template.

    Seems inefficient to just start coding away without a fixed design to work from.
    • CommentAuthorjdelsman
    • CommentTimeMay 8th 2006
     permalink

    I usually start with pen and paper, and then after I have a good idea about how I want the site layed out, I use Photoshop to create the mockup with colors, dimensions, and more.

    •  
      CommentAuthorisdereks
    • CommentTimeMay 8th 2006
     permalink
    Adjustafresh, that's one of the reasons why I plan on integrating PS into my workflow. Coding from scratch with an idea in my head has worked for casual projects. I understand that in order to be more efficient, I'll have to work a few more apps into my workflow (outside of Notepad++ and FF).
  10.  permalink
    One thing that's great when desiging for clients in PS is that they'll see exactly how the site will look. The majority of the changes and adjustments can be made by moving a few pixels rather than changing code.
    • CommentAuthoralixe
    • CommentTimeMay 10th 2006
     permalink
    If your project is not complicated (minimalist design) you dont need to create the whole layout in PSD, but certainly only the images and have the layout in your head :)
    Maybe that is why you said : "Coding from scratch with an idea in my head has worked for casual projects"

    ajustafresh said : "Once the graphic design is approved, the files are then converted into HTML/CSS by a UI developer who creates a functional web page template."
    That is what a UI Developer does! WOW I am one then :) Well actually that is what I prefer doing.
    ImageReady is the best to slice the PSD. I dont understand why the slice tool seems to be smarter in ImageReady than in Photoshop. Is it only me?

1 to 11 of 11

  1.  
Add your comments
    Username Password
  • Format comments as (Help)
 
Back to Discussions Top of Page