Katie Kurkoski

www.linkedin.com/in/katiekurkoski
Seattle, Washington

 

CascadiaFest
Twitter
Stack Overflow

 

Pew Pew Laser Blog
Github
Codepen

Graphic Design

All work hosted here dates from 2010 or earlier. Please check out these sites for more recent work samples:


Index | HTML & XHTML | CSS | JavaScript | jQuery | PHP | Web Design | Graphic Design | Other

Throughout my web sites are the end result graphics that I have created, mainly using Photoshop. Here, I discuss the processes I used to create those images, as well as display some standalone graphics design examples.
Seamless Background Photo

Seamless Background PhotoI used my own photograph of Dale Chihuly's glass ceiling artwork at the Bellagio as the base for this seamless background. Using Photoshop's offset filter, and several layer masks, I transformed a standard photograph onto one which could be used as a repeating background without showing any seams. The number of objects and variety of color in this photograph made it quite an ambitious choice, but the transparency inherent in the glass objects mitigates some of the odder blends. Click here to see this background repeating in a full-screen web page.

Breadcrumbs Pin

Location PinI needed a small graphic for the navigation breadcrumbs in the upper right corner of the content. I wanted something like a 'you are here' pin, but I couldn't find any suitable graphics available, so I created my own from scratch in Photoshop.

I used the shape tool to created a circle vector for the head of the pin and then filled that vector with my blue color. I then used the Bevel & Contour layer effects to give the circle a appearance of 3 dimensions, and added a Stroke and Drop Shadow for sweetening. The body of the pin is a custom shape (Arrow 6, stretched out and underneath the head) with layer effects. The shadow is a copy of the pin body, shrunk and rotated to match the lighting on the pin head.

I saved the file as a .PNG so as to preserve the alpha transparencies. For browsers lacking the ability to properly display alpha transparency .PNGs, I have also provided a .GIF that is anti-aliased to white.

Resume Header Background

Header BackgroundI created the header background image for this site by following an existing tutorial and then changing the steps to meet my own requirements. This demonstrates my ability with Photoshop to understand instructions and workflow, and make changes to achieve the desired result.

The tutorial is quite clever in that it creates a very nice image mostly by increasing the image dimensions. My graphics deviate from the tutorial mainly in that I use the initial graphic to specify the color, and I've turned down the brightness of the image by 15% to make it more suitable as a background image.

Once I had developed a flexible workflow, I created an Action in Photoshop so that I could apply the effect to any 100 by 100 pixel image. It can even be used on a picture graphic to create a mosaic tile effect.

For the final web-ready image, I cropped the image to 250 by 250 pixels, and set it as a repeating background image for my header area. With the addition of a single specification to my style sheet, the header now expands to any size without any noticeable image seams.

ReFIT

Original Logo - The Remodelers Foundation I designed the first website for The Remodeler's Foundation from scratch. Based on some paper collateral, I selected the oranged and blue foor the main colors of the site. The client sais it was "about the people", so I used some existing site photography in creating the header artwork. Talk specifically about how the orignal RemFound and new ReFit logos were created.

House of Cards

House of CardsI created a speculative demonstration web site for House of Cards Art back in 2002. My design inspiration was a bright neon sign against a dark background. I created this logo in Photoshop from scratch.

I have found that wing-ding fonts can be very flexible graphic resources since they are essentially smooth vector graphics. I used one such font for the 4 queens in this logo.

Vinyl Caucasians
Vinyl Caucasians

Have you ever played the "good name for a band" game? At work, we decided that "Vinyl Caucasians" was a winner. We further decided that the Vinyl Caucasians were a rocking '80s cover band. So I created a CD cover in Photoshop using lots of layers and effects.

I've only included .jpgs here, since the Photoshop source files are quite large. In the original .PSD files, there are several layers, guides for folding the rear cover, and several fonts and paths used.

Vinyl Caucasians
Adobe Photoshop CiB - Lesson 3
Clocks

The Classroom in a Book is a series of texts created by Adobe to teach people how to use their programs. This lesson focused on use of layers within Adobe Photoshop.

The source images were provided by the Photoshop Classroom in a Book, which is the same material that Adobe uses for training support personnel. I selected components of the images and combined them, and used the layer transparency and negative image effects. I also added a text layer (those are wingdings in the upper left hand corner) and added an overlay blending effect.