Today I learned about Banksy through a comment on the status of a friend on Facebook. So, who is Banksy? He’s a renowned graffiti artist. Intro line intro from Wikipedia:
Banksy is the pseudonym of a prolific British graffiti artist, political activist and painter, whose identity is unconfirmed.
Designing websites with a grid system like 960.gs has been made easier with the availability of two sets of Photoshop actions, which come in really handy to create a new Photoshop document based on the 960 grid system.
These actions will create a Photoshop document ideal for laying websites out in 24, 16, 12, 10, 8, 6 and 4 columns.
These set of actions by Johnny Nines supports 4, 6, 8, 10 and 12 column grids.
These set of actions by Ben Shoults supports 12, 16 and 24 column grids.
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.
I have never been able to grasp how the Pen Tool in Photoshop (and other softwares like Illustrator and Flash) works.
But now I do.
I followed this excellent and simple tutorial by David Legett at Tutorial9 website.
After learning the basics of handling the pen, I was able to create the following two shapes with the pen tool:
The cloud shape is a trace from Tutorial9’s logo.
Follow the Tutorial: Pen Tool Basics – Custom Shapes