How to fix Compass app lock file SCSS problem in Dreamweaver

Leave a reply

If anyone out there uses the Compass app to write SASS with Dreamweaver, may notice that the SCSS files gets locked out and the only way to fix this is to reboot your PC.  Quite a big pain in the arse.

There is a way to to unlock the file using a oommand line prompt, I found this out  thanks to this post on Github.  It can be a laborious process to go through every time you want to unlock the file however so I have remixed this technique slightly to make the process easier to execute by turning it into a batch file.

Continue reading →

How to remove an image background using Adobe Fireworks

Leave a reply

A very common task for any web designer (and I’m guessing for a graphic designer as well) working on designing a website mockup or comp is to place imagery within the design, and more often than not (in my experience anyway), you need to cut out the main image and make the background transparent. There are several ways to do this, some cruder than others, but the best method by far is to use masks to remove the background/make it transparent and maintain the original image. This is known as ‘non-destructive’ image removal technique which means you can play around with editing vector points to fine tune the image until you are happy with with it, whilst not destroying the original JPG.

[powerpress]

Continue reading →

Letterpress tutorial in Fireworks

Leave a reply
letterpress effect fireworks tutorial

Letterpress effect created in Adobe Fireworks

The letterpress is an effect taken from the printing world where text is machine-stamped onto the paper or card so the words are physically pressed into the surface so you can actually see and feel the indentations.

To help you visualise the effect, imagine the printing press machine letters  being stamped down hard on a thick piece of paper of card, and then imagine the indentation that would be left behind.  That would be a ‘letterpress’ effect.

Continue reading →

Pinking shears, zig zig, teeth effect tutorial in Fireworks

Leave a reply

A nice little web design effect which seems to be doing the rounds at the moment  is to vertically ‘cut up’  web site regions (header, content, footer, etc) into differently coloured sections with decorative ‘teeth/zig zag/pinking’ pattern as top and/or bottom borders.  The effect appears to be a digital abstraction from the craft of dressmaking, as the sections of the web site look like that have been cut up with a pair of pinking shears.

To illustrate this effect here are a few samples of screenshots I have taken from three web sites I have seen which utilse this effect:

Continue reading →

A style tile for Adobe Fireworks

2 Replies

The dawning and explosion of the mobile web over the last year brings with it fresh challenges in the architecture side of building websites and applications.  Creating compositions/mockups for clients was always a bit of a challenge i.e. having to design and present three or more pixel perfect variations on how a web site will look.  Now we have responsive design in our midst, one has to multiply each of the these individual mockups by X amount of times to cater for all the new devices – aaargh!

Thankfully, style tiles have been invented by Samantha Warren and they are, in my opinion, a fantastic solution to the big website mockup problem in the responsive age.  Read the following articles below to get style tiled up.  I have also re-created the Photoshop template into a fully editable and layered style tile template for Adobe Fireworks which you can download here.

Continue reading →

Steve Jobs’ commencement speech at Stanford University

Leave a reply

A truly visionary and inspirational man left planet earth today, Steve Jobs, founder of Apple.  I have been reading a few of his obituaries and speeches today and this snippet from his commencement speech at Stanford University in 2005 really resonated with me and I felt these words of wisdom should be republished on my blog.

RIP Steve Jobs.

Continue reading →

Guide to website wireframes and examples

Leave a reply

Desktop Wireframe for a website

A website wireframe is an essential resource you should create as one of the first ports of call during the information architecture stage of building a website.  A wireframe is a document one would utilise to layout the content and functional screen elements of a website and is also an essential resource to be used when designing the mockup(s) for the look and feel.  You can also use a wireframe to create a rapid prototype, which can be created in my favourite graphics and UI design tool, Adobe Fireworks.

I am currently working on a project to redesign a company website and also to create a mobile and tablet version of the said site.  I plan to code this up using the responsive web design methodology, but before you pick up your favourite design tool or HTML text editor, in the authors humble opinion, you MUST create wireframe(s) before jumping in to the design or coding steps.

Continue reading →

Download free web 2.0 style badges designed in Fireworks CS5

Leave a reply
Web 2.0 style badges

Web 2.0 style badges

I have just designed a range of ‘web 2.0′ style (yes I’m aware that term is both cliched and very generalist!) badges using Adobe Fireworks CS5.  These badges are for use on an ecommerce site I am currently working on, hence the ‘look at me’ in your face style to try and draw the users eye to the products we are trying to push.

I will go through a tutorial of how to make these when I get the time, but for the moment I thought I would share the source PNG versions of these badges so anyone can use them in their projects.

Continue reading →