I have been more of a programmer in the past couple of years with my focus on open source languages (PHP, Ruby). I have been writing code and leading programming teams. In fact, my very first job after graduation was as a Software Engineer in Visual Basic.
But there’s a creative side to me as well, which I haven’t let gather dust in all these years that I have been a programmer. I kept my creative side active – be it with photography or be it by studying music, or be it by practicing and improving upon Photoshop skills; creativity never left me. In fact, even in programming I make sure that the code I write is ‘beautiful’ (which doesn’t mean that one has to do anything extra – just proper indentation, meaningful variables, proper white-spaces, following conventions, etc, makes the code beautiful).
Although I have always been able to design in Photoshop, but I have never been able to make an HTML out of that design! This has remained a challenge for me since I’m very much of a hand coder (I loved Allaire’s HomeSite – R.I.P. – more than I would ever love the bloatware called Dreamweaver)!
I always thought that slicing a design and generating HTML/CSS out of it would be easy (or should be). I have tried Photoshop’s slicing and exporting tools to generate HTML, but it leaves a lot to be desired. For example, when saving as DIV-based HTML, Photoshop makes everything absolute positioned (is it bad? I just feel that it’s bad, but I’m not sure)!
But finally, I have learned and applied the skill of creating HTML out of a Photoshop design, and that too a DIV-and-CSS-based-design. All hand-coded, mind you.
So now I’m having fun all over again with designing, as now I can bring my designs out of Photoshop and into the real world, for everyone to see. I already loved playing with HTML and CSS (and soon JavaScript/Jquery too hopefully), and with my new favorite text editor, E – TextEditor (with Notepad++ as a reliable side-kick), I’m writing code that is beautiful; as WordPress’ dictum goes: “Code is Poetry”!
The first of my designs, which I have successfully exported out of Photoshop and on to the web, will be revealed in my next post. So stay tuned.
congratulation for your success as a coder at the same time a designer.
i want to learn code, i did not have any experience i HTML or CSS, where from I will start and how much time it will take?