Posted 08.08.2010

Posted 08.08.2010

Developing the CentriKid, Bon Appetit Art Direction

STYLE

A year ago, last spring, Darrel (Creative Director) and I sat down to brainstorm the Kid art direction. We had already decided on a cooking motif, titled “Bon Appetit.” (For you CentriKid Trivia lovers out there, for a while it was going to be “Taste and See.” “Dig In” was another option, but we finally went with “Bon Appetit”).

Darrel had found an artist named Derek Yaniger that had a very distinct style.

Derek Yaniger

This style is not unique to Derek, though. Jim Flora was an artist (1914-1998) known for his jazz and classical album covers. He also did children’s books and illustrated for magazines.

Jim Flora

You can see the same feel in the Monsters, Inc title sequence.

Monsters Inc Title Sequence

We decided to stay within that same flavor (no pun intended).


Can I do it?


I was one of those weird kids that always knew that I wanted to be an artist. Hey, I spent all my birthday money when I turned 10 on Disney’s Art of Animation, from Mickey Mouse to Beauty and the Beast. I would judge babysitters on their artistic ability. My favorite ones would sit and draw with me. My mom talked about how you could always entertain me at a resteraunt by giving me a pen and a piece of paper.

I believe that when God created us, he placed a part of himself in everyone. “Then God said, “Let us make man in our image, in our likeness…” (Genesis 1:26) It’s the Imago Deo. We each have a diffrent piece and it’s only when everyone gets together that we should look even more like Him. My piece? I’m a creator, a builder. One of my favorite stories in the Bible is the creation story. Creating something out of nothing. But, it doesn’t end there. The entire Bible, our lives even, are all stories of God molding us and making us. The book of Isaiah talks about the potter and the clay. Jesus was a carpenter. Priscilla and Aquala, tent makers.

Can I do it? I think that’s every creative’s secret fear. Can I do it? Will my last idea be just that, my last idea. For me, it’s that insecurity, that “thorn” that forces me to literally pray everyday for inspiration, to ask the author of the universe to inspire me, grant me the ability to create something today.

I fear the well will one day run dry, but look at Jesus’ encounter with the woman at the well in John 4. “…whoever drinks the water I gve him will never thirst. Indeed, the water I give will become in him a spring of water welling up to eternal life.”

So, like the boy with only five loaves and two fish, I ask God to multiply my efforts to the point where I have basketfuls left over.

The pieces that I work on that people enjoy and appreciate the most are the ones that I’ve prayed over the most. That’s not a coincidence.

So, just like any other project, I asked myself “Can I do this?” I wouldn’t categorize myself as an Illustrator. We were curious if we would need to hire a freelancer. I began to do some tests.

The blue lady was the first thing I drew. She actually made it to the Camper Devotional book, but I flipped her in the final piece.

The chef was my next attempt. He never made it.

The third and final charaacter test I did was a food critic. This character also made it into the camper devotional book, except in blue and sans wine bottle. grin



COLOR PALATTE

Last fall, I designed the CentriKid website. When we had designed the logo, a year ago, last spring, we determined our main color would be orange. When, I designed the site, Darrel and I decided that each section would have a different background color. I developed the other 3 colors based on the orange. —For the non graphic designers out there, that means that I needed to find colors that would compliment the orange. No clashing here!

CentriKid Color Palatte

Since we were really trying to reinforce the new CentriKid look, we decided to use the same colors with the theme. —And actually, we’re planning on allowing these colors to make another appearance next year with Shipwreck Island.


LOGO

For the logo, I always knew I wanted the type to be in a script.

Logo Inspiration

I began looking at different fonts online and hand letting different options.



I ended up pulling some of my favorite letters together and creating what eventually became Bon Appetit.

Final Bon Appetit Script

Then, it became the issue of adding the character. I started drawing different options. This was the first one.


But, we decided the man made the overall shape too tall. The work did not go wasted, though. He made an appearance inside the camper devotional book.

Tall Blue Man

The next option was the one that we finally landed on. I think it’s a good case in point: never go with your first idea unless you’ve explored several other options. Nine times out of ten, your next idea will be better than the first.

 



Posted 08.07.2010

Posted 08.07.2010

Chef’s Pick = Staff Pic

A couple of weeks ago, I got to post some of the work that I did on the CentriKid set for this summer. That’s not all I did for camp this year. I also worked on all the print pieces and animated bumpers.

One of the print pieces that I worked on was the Group leader folder. Essentially, when a church group leader takes their group to camp, they get a folder with everything they need to know: schedule, missions information, etc. The first page in the folder has a picture of the staff that work in the LifeWay office, in Nashville, year round. They spend all year planning, getting site location information, hiring the teams that will work camp, registering churches, determining logistics, etc.

I got to lead the photo shoot. Jeff Venable helped me set up lights and Lydia Campbell helped with props. Darrel Girardier, our creative director gave me an idea of what were looking for. He suggested pulling out the chef outfits and kitchen utensils that would go to camp and have them dress up. This was a great idea, except for the fact that we didn’t have enough outfits for everyone. We ended up taking two pictures and I stitched them together, after the fact, in Photoshop.

Front row: left to right Laura Fillingim, Lance Howerton, and Jeremy Echols.

Back row: left to right Eric Sampson, Andy Dukes, Mary Carlisle, and Meredith Teaseley

We kept the chairs in the back row picture so that they would know where to stand, hoping it would make my job easier when I got ready to stitch them together. —It did help. The only problem was we actually took the back row picture first. I miscounted, and so we originally had 4 chairs on the front row. Meaning, I eventually had to Photoshop out the extra chair.

The first step was to cut out the front row.

Everything looked dark. So, I created a mask, cutting everyone out, adding highlights, and making their outfits look like a true white.

The cool thing about our eyes is that we recognize white when we’re inside under fluorescent lights or outside in sunlight. The camera is different. When you take a picture outside, it has a blue tint to it, fluorescent adds yellow. You can compensate for this by changing the white balance in your camera or modifying it after the fact, like I did. Most photographers will carry around a white card. Before they start shooting, they’ll hold the white card up, zoom completely in on it with their camera, and adjust the settings, that way the camera will know what true white looks like. Interesting, huh?

The next step? I adjusted the color of the background to make it white. In fact, I even put a black and white filter on the background to desaturate it.

Then, I had to photoshop out the floor and the chairs. The hard part was corner on the left.

If you look at the picture now, it would probably work. But, the area where our eyes tell us something isn’t right, is lghting and shadows. Watch movies carefully. A lot of places where they mess up in compositing are places where the shadows don’t line up, especially if you’re outside. There’s only one sun. —or at least for the planet I live on. grin

I added shadows behind the front row and around Eric’s legs, especially on the left side. Remember, I had to paint in his legs?

Here’s the final picture. There are a few places where I can tell, but for the most part? not too shabby.

 



Posted 07.28.2010

Posted 07.28.2010

Getting Started with CodeIgniter

Note:

This post assumes that you have basic understanding of PHP as well as a server and MySQL database that you can work off. If not and you’re on a Mac, MAMP is a great place to get started. Otherwise, you can look at setting up hosting at GoDaddy or MediaTemple, or any other hosting companies online with PHP and MySQL enabled.


INSTALLING CODE IGNITER

  1. Go to codeigniter.com and download the most recent set of files.
  2. Once it’s downloaded, you can unzip it and place the files on your server.
  3. Magic!! —well, there a few more things you might want to do, but for the most part, that’s it.


WALKING THROUGH THE FILES + FOLDERS

When you unzip the file, I’m sure you noticed, there are really only 4 items. Not intimidating at all.

Default File Structure

The user_guide folder contains all the documentation you need. If there’s one thing Ellis Labs does right is documentation. Technically, you don’t need this folder on your server, but I enjoy keeping it locally if I need to look something up and I don’t have access to the Internet. Otherwise, you can just use the documentation on CodeIgniter’s site.

The system folder contains all the files needed to make CodeIgniter (CI) work. This is where you’ll be spending a majority of your time.

One thing that confused me, when I got ready to build my site: Where do I put my images, css files, and javascript files? Right, wrong, or indifferent, I pull all folders in the root folder of my site. My directory ends up looking like this:

Other folders in structure

Let’s dig through the system folder a little more. Don’t worry, it’s not as complicated as it looks at first glance.

  • application This folder contains all the files specific to one application.
    • config This folder contains all the site’s configurations.  Generally, you just touch this once and then leave it alone.
    • controllers Remember earlier this week when I talked about the C in MVC? Controllers are the piece that talk control what you look at. All those files go here.
    • errors This folder contains all the templates for your error pages.
    • helpers This folder contains your application’s helper files. Helper files are a collection of functions for a particular category. They help you with tasks. For example, one of my favorite helpers is the form helper. Instead of typing
      <form method="post" action="http:/example.com/index.php/email/send" />

      I can use a helper function instead and it will write the code for me

      echo form_open('email/send');
    • hooks This folder contains all the hooks for modifying CI’s core files. What’s a hook? Well, think of it as a cue. There’s a specific execution process. (If you’re interested, check out the Application Flow in CI’s documentation.) A hook, would interrupt that process so that you could step in and run one of your scripts.
    • language This folder contains all the files for making a multilingual site.
    • libraries This folder contains all the libraries specific to your application.  Honestly, I get libraries and helpers mixed up. The difference is that libraries are utility classes where object state is important (authentication, etc.) Helpers are collections of related functions (not classes) that do repetitive tasks. (I’m quoting bretticus’s response on the forum)
    • models As the name suggests, this folder contains all your models, or files that talk to the database.
    • views This folder contains all the views, or v in MVC. These are the pieces of the site that the user actually sees.
  • cache This folder contains all the cache files.
  • codeigniter This folder contains all of Ellis Lab’s files that make CI work.
  • database This folder contains CI core database files that enable you to connect to the database.
  • fonts This folder stores fonts
  • helpers This folder contains all of Code Igniter’s helper files
  • language Similar to the files inside, application > languages, this folder contains language files that allow your site to be multilingual
  • libraries This folder contains all of CI’s core library files
  • logs This folder contains any logs generated by CI.
  • plugins This folder contains any plugins for your site. These are generally files that other people have created that you can download and implement in your own application.
  • scaffolding This folder contains all the files that allow scaffolding. I know it’s a funny term. Basically, it allows you to easily add, edit, and delete entries from the database.

I know this seems like a lot of information, but really, you’ll spend most of your time in only 3 folders
1. system > application > controllers
2. system > application > models
3. system > application > views


Setting up the config file

Go to your system > application > config > config.php file and edit the base_url to wherever you’ve placed your files.

config.php in CI

I have everything running locally on my computer in a folder called awesome.

CI config URL


Making sure CI is working

Open up your web browser of choice and go to your URL. If everything’s running properly, you should see something like this:

CI Success


Setting up the database

Database structure and naming conventions
The cool thing about CI is that it allows you to dictate your own database structure. When I created my database, I used some of Cake’s conventions…they seem to help quite nicely.

For example, all my tables begin with ci_. You can guess what ci stands for. grin

The rest of the table name is plural, all one word. So, a table of tasks is citasks or a table of people is cipeople. Pretty obvious. If I have a relationship table (a table that connects tasks and people) then, I name it cipeopletasks. I separate the two items with an underscore and list people first because p comes first in the alphabet.

Redundant, maybe, but another example: blog posts and related comments = three tables. ciblogposts, cicomments, and ciblogpostscomments.

These are small things, but help tremendously when I’m working on my site. Not only is it easier to remember table names, but I know from glancing at the name whether it’s a relationship table or a regular table.

If I’m over your head…
I would recommend checking out Sitepoint’s book, Build Your Own Database Driven Web site using PHP and MySQl.. Honestly, that’s how I got my start. Kevin Yank, the author does a fantastic job of explaining things in a way that me, a graphic designer can understand.

Working on your database
There are a few things I use so that I don’t have to build my database in the command line. I have phpMyAdmin installed on my server. —which is fantastic. I’ve also used Sequel Pro, but my personal favorite is Navicat. In fact, Navicat has a feature for syncing your database with your computer and your server, if you build your site locally. The light version is free, but doesn’t include syncing. The paid version is worth every penny, though.

Getting CI and your database to talk
Open system > application > config > database.php

CI configuring the database

Scroll down to line 40 and change the values. If you’re hosting the database on your machine, chances are you won’t change the hostname, it will stay localhost. Even if you’ve uploaded the files to your server, usually this will stay “localhost.”

On line 41, add your username, line 42 your password, and line 43 the name of your database.

Bam! Magic!


Done.

That’s it. Honestly. Now, we get to have fun.

I’m working on a series of blog posts to continue out of this one that will walk through creating your own blogging CMS. I know there are plenty of blogging platforms out there. In fact, I would recommend using WordPress or Tumblr or Expression Engine before we reinvent the wheel, but I thought it would be a good exercise in building a CMS / Application. The functionality is basic. There aren’t very many decisions that need to be made and it should give you everything you need to know to build an application of your own in CI. —Giddy up!