digg

Join DiggAbout

Discover the best of the web!
Learn more about Digg by taking the tour.

Design a Complete Web Page Plus Code In Photoshop

kromefx.com — This is a Photoshop tutorial that will take you through the basic concepts behind designing a web page in Photoshop like a pro. It includes the original file for download, plus standards compliant code that you can substitute your own images into for a complete working web site.

Bury
show profanity settings
expand all
  • BugMeNot2, on 10/12/2007, -0/+1Nice tutorial.

    It'll be very useful in the future.

    +digg
    +bookmarked
  • sqthreer, on 10/12/2007, -0/+1Not bad but I still prefer Dreamweaver and EditPlus :P
  • LR2_, on 10/12/2007, -0/+1Sweet, anyone else know of a tut that shows how to design in photoshop and code in dreamweaver?
  • coolcoolglasses, on 10/12/2007, -3/+1good to know

    ---------------------
    http://plueballs.com my favorite podcast
  • floam, on 10/12/2007, -3/+0"Like a pro"? Sorry. Most people in this industry do not use tools that write code for them. Unless by professional you meant not-professional 16 year olds.
  • TyGuy, on 10/12/2007, -0/+1Really awesome. +Digg
  • Wuss, on 10/12/2007, -1/+1Useful for the uber beginner. Photoshop generated code very very messy. If you want to make web pages the right and efficient way, don't use PS to generate html. Learn to hand code or a real editor, i.e. Dreamweaver.
  • vipsta, on 10/12/2007, -1/+0Whats with all these tutorials being posted on Digg? If you want to know how to make X in Photoshop, go over to pixel2life.com or good-tutorials.com.
  • TheOneGreatX, on 10/12/2007, -1/+1Anyone who designs web pages should know how to hand-code.
  • kderby2000, on 10/12/2007, -0/+2Give the Adobe+Macromedia merger some time, and they'll be tools for working between and integrating Photoshop and Dreamweaver.
  • Chaos12, on 10/12/2007, -1/+0@Floam -

    Actually they all do, high productivity > low productivity
  • thecoolestcow, on 10/12/2007, -0/+1Why not use GoLive? It integrates nicely with Photoshop.
  • UGM2099, on 10/12/2007, -0/+3grrr

    web snobs...


    I code by hand too (and im a graphic designer!) but I find it completely useless to harp on others who would rather do something more automated.


    to each his own.



    isn't the thrill of hand-coding reward enough??
  • EtherGnat, on 10/12/2007, -1/+0There is a product called Photowebber 2 (http://www.photowebber.com/) that makes it easy to go from Photoshop to a complete web site in one click. Reviews were good for it but I don't think it's in development anymore. I'm not sure if there's anything similar still being developed.
  • UGM2099, on 10/12/2007, -0/+0"@Floam -

    Actually they all do, high productivity > low productivity"


    quite true. time is money.
  • apotropaic, on 10/12/2007, -0/+1The only reason Adobe bought macromedia was because their web developement tools/applications SUCK!! GoLive produces some of the UGLIEST code and is some of the BUGGIEST software known to man! Photoshop's built in webpage for professionals... that is design professionals. People in marketing, peolpe who dont want to or don't know how to use dreamweaver and such tools.
    EVERY professional web designer uses their choice of editors & a program like Adobe Photoshop for imaging, but NEVER for web design. Adobe now has a way to get the WHOLE market there. And FLASH market too. So they will have a HUGE market there now. Scary stuff!
  • lo0ol, on 10/12/2007, -0/+1"Whats with all these tutorials being posted on Digg? If you want to know how to make X in Photoshop, go over to pixel2life.com or good-tutorials.com."
    No doubt. I would not be ideologically opposed if the only diggs were of sites like good-tutorials.com. ;)

    This particular tutorial actually did fairly well the first day it was up on Good-Tutorials (yesterday), getting about 4k clicks. Decent. Actually I'm guessing that the digger found it from Good-Tutorials, though perhaps I'm just overestimating the reach of it a bit.
  • eastcoastweb, on 10/12/2007, -1/+1Learn the language and hand-code! You don't drive a car without knowing how to drive a car.

    Developing With Web Standards. WYSIWYG is the corruptor of web design.

    Read and learn:
    http://www.456bereastreet.com/lab/developing_with_web_standards/
  • heinousjay, on 10/12/2007, -0/+3I'll make this short.

    Pros don't do web development in photoshop.
  • eastcoastweb, on 10/12/2007, -1/+1Pros don't do web development in photoshop.

    So true....
  • eastcoastweb, on 10/12/2007, -1/+1Quality is always better than quantity!

    When you code your web site it should function and look the same in every browser on every platform. If it doesn't than your coding wrong or doing something that isn't supported by every browser... which is also wrong.

    Web code and design is not a word processor. These companies are working against professionals who know their code and work hard to maintain it's standards. Why? To make more so mom and pop who can barely send an email can create a web site and pollute the web with garbage code.
  • seven5, on 10/12/2007, -0/+1Yes, time is money, and most of that time is spent in maintaining your code. XHTML + CSS allows maintenance to be much faster and easier.

    Standards compliant code is 10 times easier to read and code than table based layouts. CSS allows for a much more rapid and aesthetically pleasing site overall.

    I suggest the Os X users out there to download TextMate and google for a nice XHTML tutorial, and pick up Zeldman's book, 'Designing with Web Standards'. You'll be much happier and on a straiter path to an actual job rather than just hacking up a site to be hosted by godaddy.com for free.
  • battybattybatt, on 10/12/2007, -2/+0Sweet, anyone else know of a tut that shows how to design in photoshop and code in dreamweaver?
    posted by LR2_ (8)

    Yes, there are decent tuts inside each.
  • battybattybatt, on 10/12/2007, -3/+0" "Like a pro"? Sorry. Most people in this industry do not use tools that write code for them. Unless by professional you meant not-professional 16 year olds.
    posted by floam (0) at "

    And, yes they do, moron. Any Pro uses any and every known, agreed-upon, tool out there to make their job easier - you only have to look at the history of Maya. Some (very few) actually do code, and those that do make it easier for all the other Pros out there my friend.

    You need to freshen the pot!
  • floam, on 10/12/2007, -0/+1"Actually they all do ..."

    Really. I've been payed to this for a few years now, and I'm pretty sure I would not be getting payed what I get if I were to begin writing poor code in WYSIWYG editors. I'm also fairly certain, working in this industry, that this is true of most other professionals. Generally the only people that do it this way are not web developers, but merely graphic artists that do no understand how things work. They give us art, and occasionally some generated HTML thinking they are doing us a favor. It gets thrown away.
  • floam, on 10/12/2007, -1/+0"And, yes they do, moron. Any Pro uses any and every known, agreed-upon, tool out there to make their job easier - you only have to look at the history of Maya."

    What does the 3D modeling industry have to do with with the web development industry? Have you worked in both? Since when is photoshop an agreed upon tool? Semantic coders and those that hire them do not agree on any such things.
  • battybattybatt, on 10/12/2007, -4/+0"Learn the language and hand-code! You don't drive a car without knowing how to drive a car."

    Right. You don't go drivein a car around unless you learn FIRST how to take it apart and then put it all back together again, but this time with a better paint job!

    Schmuck.

    "Developing With Web Standards. WYSIWYG is the corruptor of web design."

    Moron.

    "Read and learn:
    http://www.456bereastreet.com/lab/developing_with_web_standards/"

    Read your own advice, jerk.

    posted by eastcoastweb (0)
  • floam, on 10/12/2007, -1/+0s/semantic/pedantic/g
  • battybattybatt, on 10/12/2007, -3/+0"Yes, time is money, and most of that time is spent in maintaining your code. XHTML + CSS allows maintenance to be much faster and easier.

    Standards compliant code is 10 times easier to read and code than table based layouts. CSS allows for a much more rapid and aesthetically pleasing site overall.

    I suggest the Os X users out there to download TextMate and google for a nice XHTML tutorial, and pick up Zeldman's book, 'Designing with Web Standards'. You'll be much happier and on a straiter path to an actual job rather than just hacking up a site to be hosted by godaddy.com for free."

    Where is the end quote? Jesus!
    XHTML + CSS were designed to MAKE THE CODERS JOB EASIER.
    posted by seven5 (8)
  • seven5, on 10/12/2007, -3/+0huh?
  • jorgevargas, on 10/12/2007, -1/+03 things
    a web page shouldn't have code.
    html is not a programming language.
    you should trust the output of code generators

  • pavelich, on 10/12/2007, -6/+0http://digg.com/technology/Get_Hi-Res_Wallpapers_from_The_Gigapxl_Project

    Cool Wallpapers, ahah trying to make the frontpage
  • battybattybatt, on 10/12/2007, -4/+0"What does the 3D modeling industry have to do with with the web development industry? Have you worked in both? Since when is photoshop an agreed upon tool? Semantic coders and those that hire them do not agree on any such things.
    posted by floam (0) "

    Your kind of new at this "English" thing, aren't you?

    OBVIOUSLY, the point being made by BOTH the article and my re-quoted comment is that coders make other coder's jobns eaiser. There are things called MODULES, that everyone uses. Modules abound in XHTML and CSS - you use them every time they are compiled to make the page appear as a web page.

    Yes I work in both. Yes I make 3D Flash animations using Swish, Mac and Maya.

    And as far as whether or not Photshop is an agreed upon tool for web designers, then you have got to be kidding all of us!

    I work with 5 web desginers who use Photoshop just to make freshly desgined fonts appear correctly on a page. Or do you just re-design an old font - ooh! Or better yet, do you just embed the fonts into your coded documents? Does that work?
  • eastcoastweb, on 10/12/2007, -0/+0We use PhotoShop to design the look, then we take the look and hand-code the code. We don't use PhotoShop to write the code unless we don't care about the code that is put out.
  • battybattybatt, on 10/12/2007, -4/+0"huh?
    posted by seven5 (8) "

    Would that be considered Flame or SPAM or Off Topic?

    We need to add one more in the Plus and one more in the Minus.

    For instance, "huh", with no other help or cirt or comment should be voted as a negative like -4 for Unhelpful.
  • battybattybatt, on 10/12/2007, -3/+0"3 things
    a web page shouldn't have code."

    OK, but I think seven5 might disagree a bit with that.

    "html is not a programming language."

    Opps, sorry, but that is complete BS. HTML is based on XML - which is in itself a programming language dating back to 1982.

    "you should trust the output of code generators" -

    That is like trusting the Output of sound to Bose speakers! Some say "Good", others know a little about Physics, and consequently say "Bad" or at least, "Should be better".


    posted by jorgevargas (0)
  • BluParadox, on 10/12/2007, -0/+0"Actually they all do, high productivity > low productivity"

    Yes, but most of the time you have to consider the cost of not only initial development but also maintanence. That is why real developers would never code with photoshop. Try migrating your content from one design to another when everything was done in photoshop. You need to start over from scratch. Hell, try adding or slightly tweeking the elements on a page. You need to re-cutt the entire page. At this point you have multiple different images for the same areas on the page, naming conflicts and problems for your images, etc. Not to mention the huge file sizes of pages generated by photoshop. They arent even close to what you can do by hand in that respect.
  • vermin, on 10/12/2007, -0/+0lol, like a pro? This guy must be joking.
  • heinousjay, on 10/12/2007, -0/+1@battybattybatt

    What the hell are you talking about? HTML is not based on XML. Neither one is a programming language - they are markup languages. There are programming languages expressed in XML, most notably XSLT, but it's not really an ideal setup since everything must be hierarchical.

    XML doesn't date to 1982. SGML goes back much farther, and is the basis of XML, but XML came out of the 90s.
  • battybattybatt, on 10/12/2007, -2/+0If the tut wanted to put its money where its mouth was, then we wouldn't see an IMAGE of the page, we would see the ACTUAL PAGE in the article.

    Oooo, what a proof-of-concept!
  • seven5, on 10/12/2007, -0/+0ok, wow. Battybattybatt is just trolling now.

    My "huh?" was in response to you quoting me. You never made a point in that post.

    XML is in no way a programming language. Does is have control structures? I'm not even going to waste my time listing other elements that constitute a programming languge. XML is a document type, as is HTML. Its markup. You really aren't going to find anyone that aggrees with you that its a programming langugage.

    You really aren't even making an argument anymore, you're just attacking everyone on this post, and really desecrating Digg.

    I guess she/he expects everyone's sites to look as good has hers/his: http://clcradio.org/
  • BluParadox, on 10/12/2007, -0/+0"There are programming languages expressed in XML"

    I'd mostly call them scripting languages, not programming languages. Cold Fusion is another example I suppose though, although it's not exactly xml it could be said to be based on it..
  • battybattybatt, on 10/12/2007, -3/+0I always get that one wrong...

    http://www.sgmlsource.com/

    I know, but I was trying to make a point in "knowing the history" and I was really digging for the "right" answer, which you, no doubt, have presented us with, in effervescent majesty!

    "SGML is the International Standard (ISO 8879) language for structured data and document representation, the basis of HTML and XML and many others, invented in 1974".

    Go Goldfarb!
  • floam, on 10/12/2007, -1/+0Yes, I screwed up my English there. I then, two comments later, fixed the screw-up. "s/semantic/pedantic/g".
  • affnfp, on 10/12/2007, -3/+0im the one who posted his phone number on the internet.
    show some love.
    http://bogey.geek2us.net
    -bogey
  • battybattybatt, on 10/12/2007, -3/+0"I guess she/he expects everyone's sites to look as good has hers/his: http://clcradio.org/"

    You are merely making assumptions at this point.

    Dude, what point that I made wasn't clear?
    I said, after qouting you, "XHTML + CSS were designed to MAKE THE CODERS JOB EASIER.". True, no?

    And since when is pointing out semantics a desecration?

    If one programs or "codes" using a programming language, then how can we sit here and say that Mark-up languages are also "coded". Aren't we really just , "Marking"?

    If you must respond to this, I may have a definitive definition of "Trolling" next.

    Remember my words will end this discussion!
  • Milo_Hoffman, on 10/12/2007, -2/+0
    Best web "design" tool EVER === vi

    game over.



  • battybattybatt, on 10/12/2007, -3/+0In addition, I want to make it clear my intentions. They are cruel, unusal, and only aimed at seven5.

    Sorry for the inconvenience.

    "im the one who posted his phone number on the internet.
    show some love.
    http://bogey.geek2us.net
    -bogey
    posted by affnfp (1) "

    Whose phone number? Did I miss that one while was away?
  • battybattybatt, on 10/12/2007, -4/+0BTW, thanks VERY much for plugging our site, let's get the bandwidth up and see if we cant give the old "digg affect" !!!
  • battybattybatt, on 10/12/2007, -4/+0Come ladies and gents, the site is still up and going strong. I dont see any digg affects yet.
  • Fetching more discussions...
    Show 51 - 76 of 76 discussions
  •  

    Login or register to add a comment

    Create a new account or login to join in the conversation on Digg. You'll also be able to Digg stories to help promote things you like.


© Digg Inc. 2008 — Content posted by Digg users is dedicated to the public domain.
DIGG, DIGG IT, DUGG, DIGG THIS, Digg graphics, logos, designs, page headers, button icons, scripts, and other service names are the trademarks of Digg Inc.