To convert from a good design (PSD files) to a good looking web site, it seems an effective approach is to use a PSD to HTML service.
For a Django site (which mine is), you typically need a bunch of templates to dynamically define many parts of the web pages.
It seems to me that converting PSD to HTML is a different skill to coding up Django templates, which are closely linked to the rest of the Django application. And while there may be developers who are very skilled in both skills, the number is probably small. But there are many quality PSD to HTML services, and a reasonable number of Django contract developers.
My question: For best results, should I split the tasks, and get the PSD to HTML done first, and then pass the HTML files to the Django developer?
Or is that likely to be a waste of time & money? Should I just pass the PSD files to the Django developer and hope he/she has the necessary HTML/CSS skills?
(ps. Have looked thru Django & Django-templates + HTML. Question not found.)
Honestly - get someone to do it manually. Those automatic psd to html generators either works based on tables (create aLOT of code and alot of hard to read code) or based on divs, which means ALOT of absolutely positioned elements. Thats what my experience tells anyway. Neither of those cases really produces quality, fluid, reusable code.
You need someone who does not necessarily know django (cause backend framework is irrelevenat to psd to html/css skills), but rather someone who is (very) good with html(5) and css(3).
Also - converting PSD to HTML/CSS is not a simple task, unless your PSD design features all necessary elements. I mean all - like link in content area may be with one design, link in some other area usually has different design, do links in lists have different design compared to links in (other) content? Does your design feature all possible form elements design? Does your psd feature all necessary/possible elements in most areas? If yes, then converting your design to css/html is pretty easy task. If not, then you probably need to keep tab open and use your html wizards services any time you find out that design for element X is missing because your django form.as_ul or form.as_table prints out form in a way that your html guy did not think of.
Related
I am an intermediate level web designer & web developer. I built 5 official websites for hotels and not only, until now(2 years experience). But I have an uncertainty.
Should I use an already coded template like this for building the next websites? I already did 1 website with that great template and it saved me a good amount of time. My fear is that without that template, I don't have excellent skill for coding components like navbar, footer, making a page element to stay on the page in the position I want, etc.
I'm almost always copying code snippets from the net, let's say not coding from scratch.
My thought is: hey, you're using a template, you're not a real web designer/developer. I was thinking to only use bootstrap + wordpress, but if I use that CANVAS template( it already has lots of bootstrap components coded, css and javascript for almost any situation ) it would save me even more time.
What do you say, guys, what should I do ? Thank you !
Whatever it takes to achieve your objective in the fast manner and have quality output should be your way forward. I would not worry about purism of solutions used as the objective. When you need it, you will know it - as the time will come when you know this template is not enough, then you can go back to custom solutions. Ultimately no one can handle every aspect of the development, using open source, libraries and frameworks is nowadays a skill in itself. Reapplying easy modules will help you to focus on other crucial elements of your app ( move to mobile, speed, additional functionality etc.)
I am pretty new to developing softwares and am intrigued by the huge world out there!! I have working knowledge of C/C++ and Java.. I was thinking of making an application that would convert a webpage to a pdf document.. I know there are many solutions available -- both online and offline..But I want to develop my own.. I googled but couldn't find anything that would help me get started..
I want to know how do we go about a conversion process?? How to get started?? What languages and technologies are pre-requisites for making a converter like this??
Thank You
So at least you need to get to the bottom to following specifications:
HTML specification
CSS specification
JavaScript specification
PDF specification
Moreover here are a lot of minor stuff such as Fonts, Decription/Encription algorithms and many many other minor but still necessary things.
I think you can imagine that this is quite a long way to get all this working. In fact, the complexity of such software is the reason why so many companies make money in this field.
Anyway, I'd suggest you to start from the simple things and grow your software gradually. Start with converting HTML to Image, because it is a bit simpler. Take and parse HTML, its CSS, its JavaScript. Clean HTML. Build DOM of the HTML document. Apply styles. Go thru the DOM and draw elements to the image.
Good luck!
I tried a new web designer for one of my projects. After many tries he build a really nice design for my webpage and sent me the files. Now I wondered a much, because he only slice it in Photoshop - 20 images (very very bad sliced, e.g. borders with content in one image) and all complete 1 table structure HTML file.
When I asked him to do it in CSS, he said he can't, he doesn't know how, he is only a designer. His argument was: In his 4,5 year experience nobody asked for a sliced design, all customers would only have the PSD file and slice and create the HTML on their own.
And - he added - table structures are completly normal in web design.
So, my question: Am I old or is he?
Until now, I have ever build a webpage with DIV and CSS, never used table until you really needed a table structured information to show. That's what I learn.
Please tell me your opinion and how to handle with the actual situation.
His argument was: In his 4,5 year
experience nobody asked for a sliced
design, all customers would only have
the PSD file and slice and create the
HTML on their own.
This I find a valid argument. The creation of a design is one task; the creation a the HTML structure out of the design a entirely different one, and not being able to create the HTML does not make you any less of a designer.
And - he added - table structures are
completly normal in web design.
This was a valid argument in 1999, but is not any more.
If the main job he gets paid for is to design, and he had to create the HTML because you pressured him or because of time constraints or whatever, I'd say cut your losses, pay him, forget about it and have a CSS layout done elsewhere.
If he actually offered to create HTML for you, for money, and delivered a sliced table layout, I'd say that is not good work by the standards of 2009. Personally, I would not accept that if I were the client, and force him to do it again or refund the money.
sounds like a graphic designer, not a web designer
always be specific about the format of deliverables
Tables are very bad and old practice for design. You are correct to use css and divs. A "web designer" should be versed in css in order to produce their designs.
I would look for a different designer.
I'd like to add that in my experience (and this is hardly a rule, I'm sure), Web designers who are not able to code a layout into CSS/XHTML lack a certain understanding of the way Web pages often need to expand and contract based on content. This is especially true when designing for a CMS type system, or for a site that may require variable text sizes. The lack of understanding in these areas leads to issues with the way designs are put together on a fundamental level, and I have often found myself with a design that doesn't "work" in the end.
If he is a real web designer he should know CSS.
In answer to your question - yes, a table based layout is outdated and you need/want a css based one.
However, it sounds like the person you hired is generally just a web designer (Does visual design and layout) as opposed to a web developer (does the coding part of a website).
Many/most people who call themselves web designers do both of these jobs, and he should have explained to you before you hired him if he was only going to do the designing part, however, it does seem that he is a designer, not a developer, which is why his code skills are not so brilliant.
Consider hiring a separate web developer to create the website from the PSD file that your designer gives you.
It seems that your designer is a draftsman, but he can't create HTML layouts. Tables are only for tabular content and will put big restrictions to your layout. My opinion is that you should regard him as somebody that can draw, but don't ask him to do anything else, because he will mess up everything.
Tables functionally will work, and even validate, but they are a terrible practice for layout.
The designer admittedly has little knowledge of HTML & CSS. Perhaps his clients typically use a PSD to XHTML service for code, or something similar. I have not used one of these services personally, but you may want to look into that if you need a quick turnaround, but lack CSS knowledge.
If you're not comfortable turning the PSD file into XHTML, there are a variety of services that can do it for you for a few hundred dollars such as w3-markup.com.
Like most people here, I would concur that tables are not the mainstay of 2009 web layout and I can say that I NEVER used a table for layout - heck I couldn't if I tried. To answer your question - He is old.
A graphic designer created a web page design and I have it in PSD now.
What are the tools or techniques used to easily convert this image into HTML.
to get the best result you need to code up the html yourself integrating the relevant graphics when needed. if you are unable to do this yourself there are quite a number of companies that will take a PSD and code it into HTML for you. One example being www.psd2html.com - do a search on google for more examples.
check http://www.bolducpress.com/tutorials/from-photoshop-to-html/ for a great tutorial about "slicing" which is one technique to "convert" a psd-file to a webpage.
Use the Slice Tool to slice up the psd file into chunks of graphics that can be layed out on a web page. Then choose Save for web... to save these chunks into individual jpeg, gif or png files.
Have it sliced if you must, but better build carefully planned HTML by hand, or have it done for you.
There are slicing tools that others will be able to tell more about. I personally think there is no better way really than creating the basic HTML and CSS by hand. Because what you build now is the foundation for your entire web site, and any future extensions to it, it is really worth the effort.
If you go this route, you would pick a normal HTML editing program or platform and sketch out the basic structure according to the layout you have.
If you have little experience with HTML and need to get the job done, try out a slicer. If you have time and/or money, work it out by hand, use a high quality template as a basis, or have it done professionally.
Whilst I would agree with all of the comments above, if you want to do this yourself or don't have the knowledge/funds, you can do it with the likes of Dreamweaver/Fireworks, but as everyone has said, you won't get good HTML and unless you use it properly you'll have problems if you ever make changes to your page as changing sizes will break your layout.
I'm learning web dev and I am already stucked at some point..
How do I convert a PSD template to a html/css website ?
I've cropped all part of the image and saved them in .gif separately, but then ? Do I have to manually place them in a dreamweaver empty template ? I thought there was an automated way to do so..
Also, I've tried "Save for web and devices.." but when saving, it creates a .html file and a single image which contains every element ?! I expected several images so that I could rearrange them in dreamweaver.
While certain applications advertise/provide automation of the "conversion" process from composite graphic to web layout you want to avoid using those features. They will cause you more trouble than they are worth. Especially if you are going to use CSS for layout (which I strongly encourage). Thats not to say those features dont have some limited valid usages (more on this in point 2) it just that they arent going to magically generate your site from a graphic.
In order to use "Save for Web..." you need to use the Slice tool to slice down the image into the different images you need for layout. Then when you do save for web and deices with html it will export the html/css and the images. Again this isnt magic and chances are youre going to have to completely redo most of what its done for you - making it useless for anything more than slicing a certain area of the layout (say a single menu).
There isnt a fully automated way to do this, generally speaking because depending on what you need the layout to do you have to go about laying things out in different ways and while its theoretcially possible to account for all the possible potential requirements in a nice little export GUI its not really feasible.
The bottom line is to do this you have to learn HTML/CSS. And the more you learn the more you will hate Dreamweaver (at least in "layout view"). Garaunteed.
Yea, web design doesn't work by magic. The proper way to do is to manually write the actual code that positions the elements, not just smack them in place in Dreamweaver. There's plenty of good tutorials out there, check these out for example:
http://net.tutsplus.com/videos/screencasts/how-to-convert-a-psd-to-xhtml/
http://www.devwebpro.com/creating-css-layouts-the-best-tutorials-on-converting-psd-to-xhtml/
Welcome to reality.
You'll have to slice and dice yourself (well, slice and dice the image yourself, but don't slice yourself no matter how much you want to), and then place each individual part in your HTML or template.
There are a number of automated services that convert PSDs for you:
http://converxy.com
http://psd2htmlconverter.com/en/
http://www.psdtoweb.de/
http://csshat.com/
However, you might also want to consider a service-based approach as well. There is a thriving community of professional slicers out there (just google "psd to html" and you'll see what I mean).
You might also try to redesign from a program or framework such as:
http://html.adobe.com/edge/reflow/
https://webflow.com/
http://www.ekomobi.com/en/home.html
http://macaw.co/
http://foundation.zurb.com/
http://getbootstrap.com/
http://www.awwwards.com/what-are-frameworks-22-best-responsive-css-frameworks-for-web-design.html
It really depends on your budget, your timelines and your skillset.
I'm a big proponent of understanding something really well before trying to automate it. So, like the other posters have said, slicing by scratch (handcoding) is very valuable, especially if you don't already understand it well. However, you might just not care to invest the time needed to achieve a good understanding of the subject. And, that's perfectly okay too.
I think that ad the end of the day, there is no "correct" solution. Different people have different requirements which will change the choice.
This may help you, it walks you through the process.