Category Archives: Graphics and Design

Banksy and His Exit Through the Gift Shop

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.

Here’s an extended peek at his movie, Banksy’s Exit Through the Gift Shop:

960 Grid System Photoshop Actions

960 Grid System Photoshop ActionDesigning 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.

960 Grid System Photoshop Actions

These set of actions by Johnny Nines supports 4, 6, 8, 10 and 12 column grids.

Key Features of the Action:

  • Creates a new Photoshop document from scratch.
  • Creates guides to determine grid columns and gutters with transparent layer to show gutter space
  • Creates Layer Groups for Header, Content, Footer and Backgrounds making it easier to lay your sites out in a orderly manner.
  • Compatible with Photoshop CS3 and higher
  • Works on Mac and PC

Download from here

960 Grid Actions

These set of actions by Ben Shoults supports 12, 16 and 24 column grids.

Key Features of the Action:

  • Creates a new Photoshop document from scratch.
  • Creates guides to determine grid columns and gutters
  • Works on Mac and PC

Download from here

Diving back into Designing, HTML and CSS

HTML codeI 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.

Photoshop Pen Tool Basics

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:

photoshop-pen-tool

The cloud shape is a trace from Tutorial9′s logo.

Follow the Tutorial: Pen Tool Basics – Custom Shapes