Useful web resources for web designers

Useful web resources for web designers

Screen Shot 2016-04-09 at 10.49.15 AM

In this posts are some web resources that I will be adding to for my Art 058 course on Designing for the Web Using Adobe Dreamweaver CC at Los Medanos College in the Fall of 2016. (Search for the course here in the Fall 2016 schedule)

When designing for the web there are many tools that can help speed up that process. I’ve made a collection of some of them below. If you know of any more please feel free to share! Read more

Nifty QR Code

Nifty QR Code

Ever see those ugly black and white things that were all the rage a few years back called QR codes? Well they had the potential of being something great but they were pretty ugly and the technology just wasn’t on everybody’s phone to make it that useful.

I discovered ounchtag.com today and made my own QR code that is melded with an image. I think it looks pretty cool! Give it a try and let me know what you think.

onchtag

If you don’t know what a QR are code is you can read more about it here.

UPDATE:

No sooner did I post about this that I found a place to use one! One of my clients is a writer and here is a bookmark advertising her books page. The site is not yet live but she will be able to use this bookmark at conferences to take her to her website and to links to buy her book.

bookmark

 

Design process for building an interactive map

Design process for building an interactive map

This isn’t really a tutorial of how to create an interactive map as this blog post would be way too long and too complex. It’s more about the process of taking various resources and putting them together to create something. As I write this post this map is a work in progress. View Demo

The first step was to create the map. This was mostly done taking a screen grab from a satellite view of our campus off of Google maps. Then the buildings were traced using the pen too for each panel and curve. Shading was applied to give the buildings a 3D look.

header

For masthead where the text looks like chalkboard type I used the rough texture of paper overlay into white type. I then outlined the type and the arrow that I drew with a rough brush.

The map below is using several different technologies.

  • Image maps to make hot regions using Adobe Dreamweaver to define the coordinates on mouse hover.

map1 Read more

Flag wrapped gun with displace filter

Flag wrapped gun with displace filter

Ok so this is not my usual cute little fluffy kitten or flowers photo. I assure you there are more of those to come!

For now the pressing issue of the day seems to be guns and violence. Not making a stand either way on that issue but as a graphic designer you have to illustrate anything. Here is a little web banner I had to whip out for a college debate on the subject.

My idea was rather typical but often typical gets the point across of what is really at the heart of the issue: the constitution and our rights as US citizens. What better symbols than a gun (duh!), the constitution and the US flag?

I could have just made a collage of all three symbols but just to make it a little more eye catching I decided to merge the two with a very old Photoshop trick.

I still don’t know a better way to do this but if you do please feel free to share. For now though here is how I do it using the displace filter.

Start with good black and white image that you want to wrap that has lots of contrast: Read more