Tell me more ×
Graphic Design Stack Exchange is a question and answer site for professional graphic designers and non-designers trying to do their own graphic design. It's 100% free, no registration required.
up vote -1 down vote favorite

I have a PNG image which contains the header, footer, and content from an existing web site.

My client wants to make a new page using the existing design. I've got PNG files from them which I need to use to make a mockup which reflects the changes they've shown to me.

When I create an HTML mock up page, referencing their supplied PNG, without first creating a PSD file, the client tells me that is not the professional way. They tell me I should first alter the PSD, then convert that to HTML.

I haven't used Photoshop in a long time. I need to know what exactly needs to be done to complete this work. I've already spent a lot of time on it and I'm running late.

Does anyone have any idea how I may be able to do this faster and more efficiently?

Please tell me how to start working with Photoshop. How can I finish this work and make it perfect?

  1. When I work on the PSD files and compare it to their existing work, my work is not as good as theirs.
  2. I have no graphic design experience or sense. In past I just write html, css, and JavaScript from the PSD. I am not very experience with Photoshop.

Can someone teach me how to get better hand with Photoshop for web-layout design.

[I thing After rewrite my post I am better able to show what I am looking for. @Ryan, their is nothing like permission need here. I check myself that all-pages come from a site's different section and that's their official site.]

Thanks

share|improve this question
Before I answer I feel it important to ask - do you have permission from the owner of the site to use their design in a different site? – Ryan Apr 4 '12 at 19:59
Sorry, they are owner of all site they have used in png. They want to just make a new page for their site from custom page they have already made in past on their site. – user1252580 Apr 4 '12 at 20:20
I REALLY can't make heads or tails of what you are trying to do. Guessing -- you have a PSD which you need to convert to html/css? Are you using PSD to HTML? Are you trying to export a photoshop file to html? are you trying to edit html to match a photoshop mock up?? – Scott Apr 4 '12 at 20:28
@Scott,Sorry but I have rewrite my question. Can you please read it again. Actually I got some PNG who I need to make them first in PSD layout then I need to make them in Html,css,javascript. – user1252580 Apr 4 '12 at 20:30
1  
I think you are asking "How can I use PhotoShop to make a nice looking web site based on the existing one?". That's an incredibly broad question. A broad answer would be: 1) Learn Graphic Design. 2) learn PhotoShop 3) Learn that creating web sites based on large single PhotoShop mock-ups are really a bad way to build web sites. (In the end, I'd suggest you're best just hiring this out) – DA01 Apr 4 '12 at 20:36
show 6 more comments

3 Answers

up vote 3 down vote

Creating web sites by first creating fully designed Photoshop files is most often a complete waste of time on either the part of the designer or the developer. (I just went over this with a client of mine.)

An initial Photoshop mockup in order to solidify basic site framework and design is generally required. However, once a design has been established it is far more efficient and professional to build HTML pages directly then it is to waste time altering a PSD file to show every possible page on a web site.

My general workflow is - PSD to nail down design. Then HTML/CSS once design is approved. I only go back to the PSD if there's a new element (image/icon) which may be needed. And even then, I don't mock up an entire page to show a single new element.

There is no way anyone here can simply give you a set of steps to make your Photoshop mockups appear more professional or "better." You need to study design and the tools. High quality mockups are a direct reflection of your design sense and, at times, proficiency with the tools.

share|improve this answer
Assuming he's not copying someone else's work I was going to tell him to take a screenshot and then trace each element in its own layer then delete the screenshot. Your answer is probably better lol – Ryan Apr 4 '12 at 22:04
Sounds like he's looking for a PSD -> HTML solution... just bad practice anymore. (And there are no good solutions) Doesn't sound to me like he's copying anyone else's work, but rather working on client-supplied PNG files. – Scott Apr 4 '12 at 22:13
up vote 1 down vote

Okay if I understood this right :

When I create an HTML mock up page, referencing their supplied PNG, without first creating a PSD file, the client tells me that is not the professional way. They tell me I should first alter the PSD,then convert that to HTML.

What your client want is, he need the same PNG designed in PSD so he can keep this for future use. he is using you for his sake in the name of professional way of working.

I haven't used Photoshop in a long time. I need to know what exactly needs to be done to complete this work. I've already spent a lot of time on it and I'm running late.

I would suggest you here to complete the html and css work first coz you are not the guy who deal with photoshop, and let them know this thing as well.

Does anyone have any idea how I may be able to do this faster and more efficiently?

There are two way either you design this by your self, but this is can not be done. another way is completely your luck, if the PNG is designed (Editable) in fireworks you can save this in .psd format this will solve your issue. and if the png does not contain editable data you can ask them to provide the same.(Fireworks has a special format for saving several source images in layers in the png file.)

Please tell me how to start working with Photoshop. How can I finish this work and make it perfect?

This will take a good amount of time and you are running late already so it will be your luck if the png is designed in fireworks and having editable data you may try this. else find a tutorial on google and follow the same you can do this just ask any of us if you get into any trouble.

share|improve this answer
up vote 0 down vote

What is your deal with your client. Did you obligate to deliver the PSD also or HTML design only. If HTML design only, there no need for you to do that in Photoshop or any other software.

Only deliver what you agree for, that's what i call professional way to work!

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.