i have this GUI screen shots from the design team which i needs to convert to a web page and what not. i'm thinking of finding some website which resembles the GUI so that i can copy and paste the html so i don't have to start from scratch. the only drawback about this method is i don't know what website actually looks like that so that might means a lot of browsing time. hehe.
So just wondering if there's a tool which can help me do the search? Or even better yet if there's a tool which can convert image into html web page equivalent, that would be even better.
i guess i'm just another lazy uncreative programmer trying to get the gui part done quick and dirty, hehe.
thanks.
You mean you have a PNG, GIF or JPG screen-shot... and you want to feed that into a program and have it spit out a collection of HTML and CCS which when viewed in a browser would look just like that image?
I'm sorry to burst your bubble, but I would be very, very, very surprised if this was the case.
It's basically just impossible. If you see a box on the screen, it could be a text area, or a div, or a td, or a gif, or any one of fifteen different things. There's no way at all a program could every figure out which HTML element to use.
I'm sorry, but you're going to have to write HTML yourself. A tool like Dreamweaver will help speed the process if you're new to HTML. But I'll bet ya two bits to a farthing that there's nothing on the planet which will automate this job.
Not the answer you wanted, sorry. But it's the answer.
I am pretty sure that you can use Adobe Dreamweaver to do this - going from design to HTML.
You mention that they used Fireworks to do the design. Is that Adobe Fireworks? If so, that application has the option of outputting the design into HTML for you.
From the feature list:
Design once, deploy to many platforms
Output Fireworks designs to HTML or the application of your choice: Adobe Flash, Adobe AIR™, or Adobe Flex®. Craft custom skins with exceptional design tools. Now your tools will play well together. Design within Fireworks and then export standards-compliant CSS-based layouts — complete with external style sheets — to Dreamweaver CS4. Create components in Fireworks for use in Adobe Flex Builder™ software. Create HTML-based Adobe AIR prototypes directly from Fireworks.
I'm not aware of any tool that can convert an image of a GUI into the equivalent HTML. I would imagine that would be very dependent on the styling of the GUI anyway. On top of that, it would probably produce some pretty nasty and nightmarish-to-maintain HTML.
It's probably not the answer you want to hear, but I'd start coding.
Did the design team do the design in HTML? Photoshop mockups? Both of those would give you a better shot at avoiding hand-coding time.
From a screenshot?
You probably don't wanna do this. You want probably want, at minimum, the file saved as jpeg or png, or any format, preferably with no compression so you dont lose quality.
Then you can slice it. Google "photoshop slicing tutorial" and tons will appear.
At best, you want the PSD file, which you can then slide it up and hide/show layers of things you dont want, etc.
Related
I am building web site and I've got .psd file of how the site should look like and I can make it manually but it will take time. I was wondering if there is a way to export a Photoshop or InDesign file to HTML without requiring major corrections. There is a way to export from InDesign to Dreamweaver but it messes up pictures and text. Is there some a alternative?
There is nothing that will give you an exact replica of your design in your graphics program converted to good semantic and usable HTML / CSS. i.e. Photoshop does have the slice tool that you can use and then export as HTML, but the resulting file/images wouldn't be considered ideal by any web developer/designer worth their salt.
Hand coding a design for someone experienced shouldn't be too time-consuming. Hand coding will also ensure that you cover all scenarios/intricacies of the design, like responsiveness, SEO, accessibility etc.
There are however some new tools like http://www.csshat.com that are getting good reviews.
And you could always google for PSD to HTML service providers if you're running short of time and don't mind paying to have a good job done.
you can export psd file to html via Site Grinder plugin.
download this plugin via http://www.medialab.com/
PSD to WEB does this job pretty well.
I know that html 5 canvas will allow for paint style image creating and manipulation, but what use does this really have? I just don't really understand all the hype when the practice use seems limited.
Thanks
GAMES! That's what I'm using it for. Diagonal lines, spinning cubes, triangles (all previously very difficult in basic HTML) are now easy. Combine this with Node.js and you've got COMET backed multi-player GAMES!!! All without the user needing to download Flash or Silverlight or whatever...
Here's some sources on the subject:
http://www.canvasdemos.com/type/games/
Creating a live checkers-like web app with PHP, JS, CSS and HTML?
Other than this, I guess you could use it to "Paint" your website. Instead of using images for gradients, buttons, whatever you could use the canvas instead. Could be more performant since it would reduce the amount of files the client needs to download, but do you really want to programmatically draw all your images??? Not sure about that, but for some images, like gradients, I could see it being useful.
Oh! I would daresay that you haven't seen good HTML5 + CSS3 implementations.
Check these wonders on Canvas.
CSS3-Man
Ball Droppings ( Bonus: View Source to see the wonderfully commented source code)
And if that didn't leave you dumbstruck, check out the wonderful website http://www.chromeexperiments.com for pretty nifty canvas works.
Plus, do you know that there is a new library called processing.js for these kind of stuff.
You just don't see it production much because, browsers haven't fully adopted HTML5 yet. But they soon will. That being said, please open all these examples on a Web-Kit Browser (Google Chrome or Apple Safari) for better results.
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.
Well, I know a little HTML, and I'm just interested in playing around with it. I was wondering, though, do people usually write websites from scratch, or do they use templates, or do they use WYSIWYG editors?
To me, it seems like writing from scratch is unnecessary, nowadays, with the editors and templates we have, but maybe I'd be better off to try write something from scratch from learning purposes?
So, if I want to learn HTML better than I do, what is the best way to go about it (I have access to a free server) and how do professional website creators do it? Maybe this is an obvious answer but I'm quite new to it. Thanks!
If from scratch means hand-writing the markup, yes, that's the correct way to do it.
WYSIWYG, fully-bloated editors, are not good alternatives if you are serious about writing a web-site -- as most drag-and-drop-and-run systems out there. They might serve their purposes, but they are not general professional solution.
Hand-written markup (HTML, XHTML) and CSS will always provide better cross-browser compatibility, will be much more optimized and easier to maintain.
I really like Aptana Studio. It is an IDE that enables you to easily write the markup (HTML, XHTML), the formatting (CSS), the client-side code (ie, animations, etc, through JavaScript, and it is really well integrated with common JavaScript frameworks) as well as server-side code in a very professional way (PHP, Ruby, and many others). Oh, and it's free.
Aptana is better than, say, Notepad clones, because it is adapted to Web Development: all the time you have context menus popping up containing hints about compatibility, it displays errors on the markup, etc. It understands your code better than most notepad clones do.
I definitely recommend writing from scratch when you are learning. Using a wysiwyg editor can create a lot of extra code that you have no idea how to deal with when something strange happens and you have to edit the HTML itself. Using something like Notepad++ that supports code highlighting can help a lot.
the secret of html is: not writing it. means: keep it as tiny and semantically as possible and thats where all WYSIWYG editors fail. they let you create 403 nested dom elements whit 2 mouseclicks and if you are a beginner you don't even realize how wrong that is.
I agree with others that learning HTML makes sense. But at the same time, you can use WYSIWYG as a learning tool if necessary. I know that when I first started creating websites, margins and padding always seemed hard to properly format (due in part to inconsistencies across various browsers), and using a visual editor did help me figure out how changing certain values affected the view.
My favorite WYSIWYG editor is probably Nvu just because it is free and less bloated than software like Frontpage. But as others have noted, just practice with HTML. Check out w3schools for a nice intro and reference pieces.
Depends on the budget and software adquisition posibilities (yes, the budget).
Assuming you are talking about research, design, development, scripts, flash and everything you need the best option is Adobe Creative Suite for Web Designers.
There´s no powerfull editor in the world than Dreamweaver and that´s a fact.
You should use Notepad, Notepad++, jEdit and whatever you want but if you want to be productive a serious IDE is the best choice and Adobe win by far.
My opinion!
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.