steph k design

new website!

2010-06-12T01:13:00.003-06:00

I FINALLY redid my website! You can find me over at www.stephannknotts.com

There will be a blog there eventually too... but check it out!

clikity clik!

2009-02-21T10:55:00.004-07:00

Only 2 years in the making... spread the word! Post it on your blog! Learn to love the bomb!

don't forget to subscribe!!

2009-01-26T11:44:00.002-07:00

One more week to get 2 years of Wasatch Woman magazine for $9!! Go to wasatchwoman.com and subscribe with code WW5!

Even you out-of-staters! Get your magazine!

This promotion ends on Saturday... so do it now!!

wasatch woman magazine

2008-11-18T14:58:00.003-07:00

go get your copy NOW!

DoggieMannerz

2008-09-09T23:12:00.000-06:00

This was a [somewhat] quick design project for a client who is new to the area and trying to get her business going with little capital. Her original idea was dog heads with silver foil collars and details. After discussing printing costs and her options, we decided full-bodied dogs instead of decapitated ones would actually work best for her, especially when it came time to design her website and other collateral.

Her entire style is casual, friendly and still professional. Though I preferred the golden yellow, she didn't see it as a color for her company at all - so we stuck with blue, which I really like on the back of the business cards.

I went the easy route and found stock illustrations that we would be able to alter to fit the rest of her design, especially since her limited budget wouldn't allow for any custom artwork. The "doggies" can be used together as a group, or separately as additional design elements.

Doing this project also led me to a GREAT printer in the Bountiful Area. Tueller Press handles a lot of the small printing jobs for larger presses in the area (like Paragon and LithoFlexo, etc). If you're looking for a great deal on some top quality cards, Ted's your man!

Limited Letterpress Prints

2008-08-25T17:28:00.002-06:00

OK everyone... I need money for Cali in two weeks!
Otherwise we are sleeping in the car [scary]! So..... these are up on eBay for auction. There are 5 of the blue prints and 10 of the black prints. Get yours today!

Buy the blue version

Buy the black version!

blog customization

2008-07-17T11:07:00.009-06:00

I'm no pro at web coding, but customizing your blog can be super easy (and fun) once you know what you're doing. A lot of people want to know how to do basic stuff like changing the background, etc. There is blogger help for this, but I thought I'd write my own too since a lot of friends have asked. So here we go!

The first thing I want you to do is bookmark the following link:
http://lesliefranke.com/files/reference/csscheatsheet.html

I love this cheat sheet because it defines the different CSS commands. You also will want an image hosting website. I use photobucket, but anything else works too.

Ok, let's get started... first you need one of blogger's basic templates. We're going to use the tic tac template. It's fairly easy to change and gives you a good amount of code to manipulate. We are going to change only a few things:

The background
The main area color
The sidebar color
The header

Once you have saved that as your template, choose the "edit html" link in the navigation bar under the layout tab.

Scroll down through the code until you come to /* ---( page defaults )--- */

Underneath all of this is where you will want to do your editing, starting with the "body" code, which looks like this:

body {
margin: 0;
padding: 0;
font-size: small;
text-align: center;
color: $textcolor;
background: #e0e0e0;
}

That number is the current background color, so let's change that first. You can enter a new hex number (6 digits or letters).

background: #ECBA4B;

Now the background is orange! But those grey parts don't look so hot anymore. don't worry. We'll get rid of them in a minute or 3.

If you want to add a repeating background images, you would just change it to this (using your own hosted image for the background:

background: url(http://location of your image) repeat;

Tada! If you want to use an image and stick it in one spot on the page, you would want to add

position:relative; top:100px; left:100px; no-repeat;

....instead of "repeat" after the url.

Now we're going to strip those grey parts out of the code completely. If you want to experiment with putting other images in there, you can, but for our purposes, we want something cleaner.

Everything for these is listed under the /* ---( layout structure )---*/ section. Delete everything in red. NOTE: It's VERY important that you don't delete your end semi-colons. They must exist for your code to work correctly!

#outer-wrapper {
width: 847px;
margin: 0px auto 0;
text-align: $startSide;
font: $bodyfont; background: url(http://www.blogblog.com/tictac/tile_$startSide.gif) repeat-y;
}

#content-wrapper {
margin-$startSide: 42px; /* to avoid the border image */
width: 763px;
}
#main {
float: $startSide;
width: 460px;
margin-top: 20px; margin-$endSide: 0;
margin-bottom: 0;
margin-$startSide: 0;
padding-top: 0;
padding-$endSide: 0;
padding-bottom: 0; padding-$startSide: 1em;
line-height: 1.5em;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar {
float: $endSide;
width: 259px;
padding-top: 20px;
padding-$endSide: 0px; padding-bottom: 0;
padding-$startSide: 0; font-size: 85%;
line-height: 1.4em;
color: $sidebartextcolor; background: url(http://www.blogblog.com/tictac/sidebar_bg.gif) no-repeat $startSide top;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

/* ---( header and site name )--- */

#header-wrapper { margin: 0;
padding: 0;
font: $pagetitlefont; background: #e0e0e0 url(http://www.blogblog.com/tictac/top_div_$startSide.gif) no-repeat $startSide top;
}

#header {
margin: 0;
padding-top: 25px;
padding-$endSide:
60px;
padding-bottom: 35px;
padding-$startSide: 160px;
color: $pagetitlecolor;
background: url(http://www.blogblog.com/tictac/top_h1.gif) no-repeat bottom $startSide;
}

Scary! Your blog now looks so naked! But don't worry! It won't stay that way for long. Now we're going to start adding things back in. You can use a background, but I wouldn't recommend it. So we'll stick to colors. I've made some other changes as well, so I'll highlight them.

#outer-wrapper {
width: 800px;
margin: 0px auto 0;
text-align: $startSide;
font: $bodyfont; background: #00A4B1;
background: #FFFFFF;
}
#content-wrapper {
width: 800px;
}

#main {
float: left;
width: 450px;
margin-$endSide: 0;
margin-bottom: 0;
margin-$startSide: 0;
padding: 30px 30px 30px 30px;
line-height: 1.5em;
background: #F7D981;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar {
float: $endSide;
width: 260px;
padding-top: 20px;
padding-left: 20px;
padding-right: 10px;
font-size: 85%;
line-height: 1.4em;
color: $sidebartextcolor; background: #B2CE40;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

/* ---( header and site name )--- */

#header-wrapper {
margin: 0;
padding: 0;
font: $pagetitlefont;
background:#00A4B1;
border-bottom: 6px solid #FFFFFF;
}

#header {
margin: 0;
padding: 30px 30px 30px 30px;
color: $pagetitlecolor;
}

There! That helps QUITE a bit. Sometimes you have to fudge things when it comes to widths so that the sidebar doesn't end up smashed below the main part. You can also add borders to any part that you want. Just follow the example in the header-wrapper list. And refer to the cheat sheet for ideas on options. Don't forget though that borders will mess with your widths, so use the "Preview" Button a LOT so you know what adjustments you need to make.

Now, there's still a grey footer at the bottom that we missed, so let's fix that now. Delete all the red parts..

/* ---( footer )--- */

.clear { /* to fix IE6 padding-top issue */
clear: both;
}

#footer-wrapper {
margin: 0;
padding-top: 0;
padding-$endSide: 0;
padding-bottom: 9px;
padding-$startSide: 0;
font-size: 85%;
color: #ddd;
background: url(http://www.blogblog.com/tictac/bottom_sill.gif) no-repeat bottom $startSide;
}

#footer {
margin: 0;
padding-top: 20px;
padding-$endSide: 320px;
padding-bottom: 20px;
padding-$startSide: 95px;
background: url(http://www.blogblog.com/tictac/bottom_sash_$startSide.gif) no-repeat top $startSide;
}

Yep, The entire footer. You can just put in an image if you want something different. Otherwise you don't really need it.

Additionally, if you want to delete or change the little grey icons or the arrow next to the date, you can do so they are under:

h2.date-header { and .sidebar h2 {

I also didn't change anything in the comments area... but you can experiment and see what works for you! You can also change how some of the text looks.

After you've made all your changes, save the template. Then click the Fonts and Colors link to change those.

If you want to add a custom header instead of the text and description, you can do so in the "Page Elements" section.

I hope that helps!

If you would like to see the template all put together, interactive style, it'll be up for a while at: http://ccstestblog.blogspot.com/

cupcake

2008-06-23T09:31:00.003-06:00

So while I currently don't have spectacular design things for you to enjoy, I DO have one fun and retro character illustration of my sister.

Mmm.... cupcakes.

'darthmol'

2008-06-02T21:08:00.002-06:00

Molly asked me for a character badge and I was more than happy to oblige. I like doing these badges. They're [relatively] quick and all graphical and stuff!

poster-sized invites

2008-05-12T11:18:00.003-06:00

I got this idea from a post over at createmyevent.com and I thought it was adorable so I HAD to try it! It's is 11x17 and folds down like a map...

yes I drew that birdie.

the rather difficult font game

2008-04-15T12:28:00.003-06:00

I found this through swissmiss....

new look

2008-04-05T16:06:00.001-06:00

curiousgirlcreative.com is getting a new look, so it's only fitting that the blog should have a new look as well, right? I thought so.

more updates when I get the rest of the site up!

EXACTLY

2008-02-26T12:31:00.001-07:00

show at slowtrain

2008-02-16T00:23:00.005-07:00

keyboards can be sexy

2008-02-04T23:20:00.002-07:00

so kind of exciting news - all right WAY exciting... I've dumped the museum (gag) and I'm now the designer for Pepper Nix Photography... this is a GOOD thing because I really didn't want to rely on freelance jobs... they offered me the position in about 45 minutes... I was the only one they met with out of 70 portfolio submissions.

Pretty danged schweet if you ask me.

In OTHER news... I've got work in the February Gallery Stroll! It'll be hanging at Slowtrain (221 E Broadway), so stop by! It's really not spectacular, but it's a foot in... next proposal.... Mechanized!

Horizon Truck Sales & Leasing Sign

2008-01-08T13:50:00.000-07:00

It's up! Here you go:

chirstmas cards

2007-12-14T21:00:00.000-07:00

Zach and I screenprinted our Christmas cards last night. It was amazingly theraputic after an insane month and a half. A good end!

We only made about 20 cards each though.... I sold all of mine, so none of my friends actually got any (unless they forked out the dough).

just beyond the river bend?

2007-11-01T23:56:00.000-06:00

I had to wait a bit to put this up. There's going to be a big to do in a couple of weeks when CR England unveils the new sign or whatever they're going to do and I get to go down for it.

It's kind of crazy. This was a class assignment/competition that I won. The school got money and I got a satiny red trucker jacket.

woo.

more than just canning

2007-10-29T16:03:00.001-06:00

I think my mother owns Ball canning jars. I could be wrong. I can't recall if those were the expensive ones or if Kerr was. EITHER way, I didn't know they did packaging in general now.

Imagine my nerdy delight when I was drinking two different beverages this week and turned the cans around to find the Ball logo on the back. Especially since I get a kick out of the can/bottle designs enough to drink what's inside.

Either way, props to Izze and Jones Sodas for great design and making my inner nerd squee in delight.

love for 'the reds'

2007-09-20T22:55:00.000-06:00

this was my wedding gift to one of my dear friends and her fiance (who is also a good friend) It accordion folds into three...

symposium graphics

2007-09-11T23:31:00.000-06:00

I *thought* I posted this back in March or shortly there after, but apparently I didn't.

Yeah, scrapped the circle idea... went with something completely different- with the idea of growth... kind of a grunge/rocker feel that people could peg as "elegant" too. Big hit. We made shirts. We had people REQUEST to BUY extra shirts.

So because of that, we had to up it for 2008. I'm in the middle of doing all the branding for THAT show so it's in place after I graduate (I'll probably be back to help, but not as extensively as I have before).

not really hardcore

2007-06-23T15:40:00.000-06:00

This is a poster I did for the Ogden Arts Festival this summer. Four designers - one girl perturbed at her ex-boyfriend whose poster was hanging next to hers - filling exhibit space in the Union Station Annex with 6 foot posters.

I have a lot of print requests for this one. It's just so sweet-looking and unassuming. . . even he had no idea. We pretended it was about my bestfriend's ex-boyfriend.

tragos de luz y viento

2007-06-19T19:38:00.000-06:00

... it's a book cover! the front and back.. it's only 36 pages, so the spine is tiny and doesn't warrant any text. the English title is "Gulps of light and wind"

so there you go.

stock photo from [link]

cupcakes are love

2007-03-14T20:51:00.000-06:00

Branding project... bestfriend's name... selling sweet cuppin' cakes! I did a menu and everything.

dear best friend

2007-02-26T09:07:00.000-07:00

I LOVE ~imthelila's poem "3." (Dear Best Friend).... so I asked her if I could take it and turn it into an experimental type project... She was gracious enough to agree, so here it is!

I wanted to sort of capture how a girl's mind works sometimes.... thoughts are scattered and such... anyway, to read the complete poem, go here: [link]

poem © 2006 [link]
design © 2007 [link]

microwaves cause cancer

2007-01-29T17:41:00.000-07:00

We had to use colored pencil and depict something happening around the house. Mine was the only one that she didn't have a bunch of changes for... even though it could use some work.

ANYWAY, my event... I had a roommate who swears up and down that microwaves cause cancer - especially PLASTIC in microwaves.... BUT she'll use it... and talk on her cell phone AND she colors her hair and fake bakes....

Cracks me up.

beetle infestation

2006-10-03T00:06:00.000-06:00

yes I wrote the copy.

design today for a better tomorrow

2006-09-24T15:44:00.000-06:00

the beginnings of my branding!!