I have a psd files of my website design, So can i convert it into html template.
Template should contain html,css code.
Basically i am beginner in photoshop so i don't know, it will possible or not.
Please help.
Well the good part is that you have the static design, what means that there is no interaction with a user, of your website ready.
I would suggest you to start with one or another interactive prototyping tool like Marvel. Then you can prototype the functionalities of the website and start working on code writing part. This step will also help you and people, who are going to help you, to get the idea what you want to achieve as a final result.
There are also Adobe solutions like Dreamweaver what gives you an option to migrate the Photoshop layers to webpage. But this solution is not free.
After you finish working with prototyping you can take a really good free course on Udacity about developing solutions with HTML5 and CSS3. Codecademy also has good set of courses on this topic.
Hope this helps to start your journey in learning PSD to HTML techniques and web development in general.
Related
I'm new to the cloud IDE setup and can't get my head around deployment and "workspaces". I tried making a basic site with html (to use javascript/css once I can figure out how to call the code into the html) as testing before running it on another website.
At the moment I'm using a basic text editor to tweak the html (for a custom Google Map), but cloud9 and the like highlight code in colour and complete functions etc. so it's easier to use (also I can't use an offline editor due to hardware).
I'm keen to learn more javascript but really only have basic web html/css skills so all the node.js files lose me a bit. Where can I find a really simple introduction to just writing, say, a html page and seeing it previewed? Or does it not work like that?
The tutorials I've found so far are going into scripting (e.g. "Cloud 9 IDE Basics" > http://vimeo.com/16273901)
Thanks, and sorry for asking such a beginner's question!
Does the Cloud9 documentation site (https://docs.c9.io/) help?. It has articles ranging from the basics to more advanced topics, including some video tutorials.
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'm very new to flash and as3 design patterns. But I can read and write as3 quite ok, i've created small widgets with that. I've developed several web sites using php and also python.
Now for a educational cd-rom project i'm working on, i've basically designed all templates (A home page, a generic page with navigation and a sidebar - kind of like a wordpress blog). I have all the data for the cdrom on word files, which i intend to place on xml files.
My question is what is the best way to start a project like this? Can anyone guide me to a template or something that can be used for kickstarting this? kind of like a wordpress (without the admin)? Or am i on this all wrong? Can someone please help
The Gaia Framework may be useful to you for this project.
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 have general question how to start developing my skills in web designing.
What is best place to start and what technique to use.
I have some knowledge of html and css, so far I have been building sites with already done all html and css. I would just use it and maybe do a smaller changes.
I want to be able to make html and css out of image that artistic guy produces.
http://w3schools.com/ has some great tutorials and you can play around with stuff right their on their pages.
A lot of the really "artsy" sites are produced in another program first, usually Adobe Photoshop or Adobe Illustrator, and then 'sliced' into HTML div's. NetTuts has a handful of tutorial on how these that show the complete start-to-finish. Here's a few I found real quick:
Design and Code a Slick Website from Scratch – Part I
How to Design and Code a Flexible Website
New Plus Tutorial: Convert a Beautiful PSD to HTML and CSS
Coding a Beautiful Website From Scratch: Plus Tutorial
(the last 2 I think you have to be a paying member for)
Here's a great web resource to check out for HTML/CSS: http://htmldog.com/
Also, do a Google search for "psd slicing." This is the process of taking an image of a website layout (a.k.a. mockup) and turning into valid HTML/CSS. You'll find a lot of screen casts and tutorials that will walk you through the entire process.
Start by getting a book and look at some tutorials. Google will help you there. Once you've got a decent idea of what's going on, look at a site, and try to duplicate what it looks like. If you're curious as to how something works or can't figure it out, look at the source (preferably with firebug) :D
Good luck
As others have said, getting a good book on HTML/CSS will certainly help.
Also read up on Web Standards - I think its really important to start learning these principles from the beginning as it will help you write valid HTML/CSS... and avoid writing invalid code.
I highly suggest the book "CSS Mastery". It's got a green cover with a pink binding...I think they've recently released a new version actually. Amazing book for beginning and advanced. I consider it my CSS bible.
I highly recommend w3schools.com and the Head First HTML with CSS & XHTML. I like most of the book in the head first series, in fact. They take a fun very visual approach to learning & I am a visual learner. Lots of things to practice & hints to help remember things.
If you don't feel totally confident then definitely pick up Head First HTML. Aside from that there are a few websites I would recommend:
A List Apart,
Stop Design
and as others mentioned the W3 website.
Working with a designer often means that they will produce mockups using Photoshop and you will in tern work off those. As that is the case having a working knowledge of Photoshop will be very useful for you. You don't have to be a wizard but some basic knowledge will enable you to do things like create image sprites from the mockup and get information relating to the width, height, color, etc of the different components in the design. As far as getting up to speed quickly there are many books on the subject, the Photoshop One on One books are a pretty good series and there are video tutorials available at Lynda.com.
I started on just looking at youtube. A really simple book for learning to code css and html is get coding. It's for kids, but it's a great start. I started there about a year ago, and now I've developed multiple websites for a couple of businesses. And I'm only twelve!