Here is version 0.1 of my wallpaper.  I’ve tried to make it look like the work is using a bamboo screen as a canvas.  I spent a lot of time in the past trying to figure out just how to make it look like the sun and sun ray and the brown “ground” look like it was painted on the bamboo.  The first several attempts I tried to use a displacement map, but I could never get it to work with the bamboo screen image so I back-burnered the effect.  In the interim, I just grabbed the black-level of the image and pasted it above the sun and ground layers.

Last week I learned a bit how to use Illustrator, and I’ve utilised that a bit already.  Getting the silhouette of the city was frustrating.  I started with photos of Tokyo that had a good skyline (It wasn’t easy finding those either…), removed the sky and filled it in with black.  I originally started that way and and tried several filters and tricks that I knew to help clean things up.  This time I just opened Illustrator and and traced the outline, which worked much better.

I think this is a good start; I have tried to get in some of the back-bone pieces in so that I can see some of the layout.  While I did start out with a sketch, my vision has change and been refined as I have worked on it.  I’m really interested in finding out what techniques I’m going to employ in merging all of this together in a final piece.

The interview that sticks in my mind the most is the one with Michael Roberts with JPMorgan Chase.  I don’t view the world as dollars and cents (sometimes I’m forced to), and most of the interview made me think “Yup, I don’t really want to be in a corporate environment”.  I haven’t figured out exactly what I am wanting to do, but at least the interviews give me a little peek as to what is out there.

I plan to convert some of these to vector images in Illustrator.  The first one that I’ll do will be the torii (Shinto gate) as it’s the most simple and will show immediate results.  I would like to do the Maneki Neko (Lucky Cat), but it will be difficult.

The first image that I’m showing was actually done last week, but I thought that I’d throw it up here any way as a start.  One of the prevailent themes in the wallpaper is manga/drawn art, so I tried to take a photo of Fuji-Sama and apply some filters to it to flatten out some of the details so that

OK, so the Maneki neko is a bit big… I resized all of the images to 300px wide, I failed to think about the height of the images also.  This is probably my least favourite, I don’t think it turned out well.  The lines have too much detail, and the component shapes are too complex.  I’m not sure if I could use Photoshop to fix this, but I know that I could trace it in Illustrator and use that to make it how I want.

Basic map of Japan.  This was grabbed from wikimedia and the features and colors flattened.  I used a layer style to add the black border to enhance the drawn look.

This turned out to be my favourite out of this bunch.  I really like the comic style look of it, the light/dark values are broad and simple with high-contrast borders.  The illustrated look really fits in with the theme of the wallpaper as it can really pull of the manga look.

So far, I have only a general idea of what I want on it, basic layout, etc.  I’ve done a quick sketch of what I’m thinking of, but at the moment I lack both the digital and paper skills to accomplish what I envision.  I’ve spent a lot of time finding out how some of the techniques I’ve seen are done, and also work on some of the more basic photoshop skills.  I know I’m behind on the blog entries, but I’ll have to post more detials of what I’ve done so far, and talk more about my peice later.  I’m still trying to figure out this whole balancing school and homework thing…it’s been quite a while since I’ve had to do this .

It seems like there was a lot of reinforcement of the idea of being a good designer first throughout the interviews.  Interviews were the only content this time.  While I do like reading about the people that have been working in the web/print design arena and hearing their stories 1st (or is this 2nd?) hand, it feels a bit much at times almost like the book doesn’t have any substance.  That is, if I think about it like all of the other tech books I’ve read, where it’s main purpose is to convey the author’s expertise in a given subject.  Instead, I get the read the stories of other industry players, and I get to learn a bit of history too.

I used to be a big fan of They Might Be Giants and I was delighted when I came across the interview with Mike Essl.  I probably browsed the site he designed.  There has been a few instances like that, were I’ll see a site or a technology/product referenced that the interviewee was involved with and I think, “Wow, I’ve been there…”.  It’s also been interesting to compare what I was doing at the time and remember the emerging technologies that they are talking about.

I’d have to say that the main theme of this part of the reading was “Use the latest technology and standards, but don’t get too entrenched.”  There was a lot of talk of history, how standards kinda came to be, what it was like in the early days, etc.  There were some cursory introduction to the concept of being flexible in your design, as just something as subtle as screen size can change things.

I found the interview with Hugh Dubberly to be a bit overwhelming.  Good, and insightful, but overwhelming.  It became obvious that he had been involved with things for a while and that his own personal skill set consisded of a very wide range of things, from Application Design and Development to an amateur historian to Graphic Design.  While I did like his “ideal curriculum” list, it encompassed quite a bit.

Two of the tutorials were written by N3UR0N and are available at Base at Signature Stop with the art done by N3UR0N.  The other tutorial that I used was pretty basic in comparison to the ones at Signature Stop, but it still had some good stuff in it.

The overall idea of my piece was originally was going to be an old sailing vessel crashing through waves and have that in deep space, kinda juxtaposing sea spray and nebula gases.  Later on, I felt that it seemed a bit simple in meaning and instantly the idea of also having a rocket or shuttle launching would add a meaningful effect.  Just now as I’m writing this, I thought that it may be kinda neat to have the water ship shown in the ocean ploughing through waves and have the space ship directly overhead in space…but I’m not too sure about that.

Since these things take time to create, and I’m not a design nor photoshop wiz (yet , I had to leave the ship out and just show the space composition.  Since I’m not at my computer with photoshop installed I’ll have to give rough numbers and tell what I did from memory.  There is about 6 layers composing the image.  I used two images of star-fields (one considerably brighter than the other), two images of planets, one nebula brush, one galaxy brush, and an image for the nebula.  The planets are placed fairly simply, but the one in the “background” has a mask on it to give it that “setting” look so that the bottom part isn’t visible.  That worked out well as it already had a dark shadow on it.  The nebula and the galaxy are using a similar technique were the image I’m using for their background and coloring is being hidden by a mask, and the brush was used to “cut” the nebula and galaxy shaped holes.  The galaxy, however, is complex and not enough light came through, so I made a selection from the mask and filled it in with white and changed the opacity and the blending with the other layer.

That is, in a nut-shell, how I made the above image.  Most of that was gleaned from the tutorials and I am looking forward to trying another composition piece.  I’m also going to keep looking for some other Photoshop tutorials, or I may try my hand at Illustrator.  The places where I got the images to work with were ones that I had already been familiar with, but never really used them in the past.  One is purely a stock-art site, the other is much, much more.  The stock xchng site was not working correctly, so I couldn’t log in or even get my password (I thought that maybe that was it since I hadn’t been there in quite a while) so I did a search for some others.  There were others, but none that had the depth as stock xchng.  Then I discovered that deviantART had stock art categories too.  I had been familiar with the site in the past, some good open source artist have profiles there, but I never really paid much attention to it.  Now I have a profile there too

In this reading the focus was mostly on the end product of the digital design process and glimpses on what it took to get there.  There was a lot of talk about the cross-disciplinary collaboration that was required to get the project off the ground.  Each type of project had it’s own technical requirements.  With the Reuters sign, near live feeds needed to be incorpoated let alone the fact that it was a giant LED display that also would have it’s technical and design requirements.  With “An Inconvienient Truth”, data had to be gathered, verified, and transformed into something that could be consumable to a wide audience.

One over-arching theme that was embedded in the use cases, and then later focused on was the organic nature of digital based projects, especially when it comes to web-based material.  It was said that the average web site has an average lifespan of about a hundred days, which is not very long.  Since things are always changing. you need to keep that in mind or even incorporate that into the design itself.  Reuters and daylife.com utilize the latter because thier business model also requires that: reporting the news.  Although for some projects that may not be an option.  Being nimble and the concept of Good Enough (one co-worker of mine had put it as the “The Best vs. The Good”) can be a real asset.  Sometimes you don’t need the best thing out right away but you need at least something.  As long as you have some forethought in your design, you can plan for change and improvements later.  That’s the way that Google, and most of the Open Source community works.

My last thoughts on the reading is the group dynamic discussion: large group vs. small, specialized skills vs. cross-discipline, working alone vs. collaboration.  I really agree with what Jason Fried of 37Signals said about being cross-discipline, mostly because that is kinda like the way I work naturally.  I like to know as much information about as many things possible because it helps me understand things better.  By understanding how the templating library of what-ever framwork is being used works, how the scripting language behaves, how things should be organized in an information architecture way, and knowing graphic design principles, it gives me a clearer picture of how things behave and how they should work together.

However, I have always been drawn to the art and design side of the web, which is way I decided to go to an art school instead of a technical one (again), amongst other reasons.  So, what does all of this have to do with the assignment?  When I was asked what I’d like to do, what would I spend my time on, I really didn’t know.  When I was asked what about the art of the web that I liked, I could only respond with that I like the sites that make you go “wow”.

So, in addition to working on some of my art skills (exploring sketching really) I have looked at several website that I thought were visually appealing, took some screen shots, and thought about what specifically I liked about the site.  I tried to find a variety of examples, and I found a couple of good sites to start with.  I found a good article at CSS Juice that has 15 showcase sites that I started with.  I’ve only looked at a couple of the showcase sites so far as each site has hundreds.  I’ve also thrown in a few that I’ve encountered in the past.

For the below evaluations, I’ve included screenshots, some have markings to show specific areas.  In all of the screenshots, you should be able to click on the image to view the larger version.

COLOURLovers

I came across COLOURLovers a while back ago and fell in love with it immediately.  In a small twist of fate, my previous employer had been evaluated by them as a hosting provider.  There are a few things I really like about the site, most of which is that the site’s colors are all grey scale which doesn’t detract from the actual content: color.

Web Designer Wall

I came across Web Designer Wall a while ago also (I had to really dig through my links).  What I really liked was the overall style of the page, but specifically:

1. I really like this art style.  In all of the pages that I really liked personally, they have similar styles like this and will probably use something like thing for a personal site.
2. I really like the incorporation paper textures in sites as it adds a level of a printed look.  In this example there are also some icons that look like they were rubber-stamped onto the paper.
3. The background of the search box doesn’t use all right angles and lends it a look of being cut-out by hand.
4. For this style of web page, I really like the incorporation of hand-written fonts.
5. To me, this is kinda like the mixing of technology and art.  Here we have a tag cloud, with a hand dawn cloud as a header.

Wieden+Kennedy

Ah…Wieden+Kennedy, the fabled advertising design firm of Nike, Coca-Cola, Honda, and the Oregon Tourism Commision.  This site doesn’t behave like a conventional website, and I’m sure that was done on purpose.  It took me a little while to figure out how to navigate around, but once I got the hang of it it was pretty fun.  The site is one big interactive tag cloud, initially organized by date but once you click on an item it strips away everything but it’s related nodes.  For instance, let’s click on ‘Clients’ down at the bottom for starters, then click on ‘Honda’.  Once you have done that it shows the office locations and the individual works that were done.  Clicking on an office location will change focus to that office and show the works that were done in that office and so on.

This site is bold and unconventional, but I’d also call it innovative.  Since the navigation is different from a regular site, some may be put off by that.  I’d like to some day get in on putting something like that together, I think that approach is quite immersive.

Clearleft

What I like about this site is that it is clean, simple, and to the point.  The colors and images don’t distract you from what they are trying to tell you, and I think the simple elegance helps their agenda: we design websites.  For the most part this site doesn’t really have the “wow” factor, but it does have a pleasing look to it in my opinion.

Until next time…

I’ve looked at a lot of websites this past week.  Some were exciting, some not.  I have had the opportunity to see a lot of different styles and mark them for future reference, some were even portfolio sites that had even more examples by that designer.  In one of the portfolio sites I came across something that I had either not seen before or hadn’t given it much thought: Photoshop brushes.  Now that I think about it, many of the websites that had a feeling of depth to it most likely utilized brushes.  I’ve known about stock images, but I knew I couldn’t get to where I wanted to go with just that and I think that this has just helped me along a little bit.

I think my next 3 hours may take me down that road a bit.  I’m going to try looking for some examples and tutorials of how some of these sites are put together and maybe some of the design techniques involved in it.  I’ve known for quite some time that just being XHTML 1.1 and CSS 2.0 conformant wasn’t going to get me to where I really wanted to go.  There’s a lot more to it.

There were a couple of this that really stood out in the reading to me.  The first was the mention of Open Source software and here’s why:  I’ve been following the open source movement for quite a while now and have been involved in some of it’s processes too, but to me it has been this interesting sub-culture that’s been evolving and growing, and I get a little surprised when someone whom I would consider (at least at first glance, I don’t actually know Mr. Heller’s nor Mr. Womack’s background really) outside of the little sub-culture to actually know about it.

Aside from that bit, I did enjoy the (albiet brief) introduction to graphic design in general, but I guess where they drew up comparisons between “traditional” and “digital” design would have to be the parts I enjoyed the most.  I don’t have a very graphical or design related background, not to say that I haven’t done anything graphical or design related before, but since I’ve used the “digital” tools before in the past like Photoshop, Dreamweaver, Premier, et al. I felt that through the comparisons between the digital and the non that I had a connection to what they were talking about.

Some of the more computer-centric things I felt were a little boring because I already have some experience with that and I am really wanting to branch out and explore more of my creative and artistic side.  I did, however, like the analogy of programming a computer is analogous to speaking to it, giving it instructions, because that is how I’ve always felt about programming languages, and I’ve used a lot of languages.