Designing a Journal Part One

Journal skin is now available:



The links for the resources including PSD is on #2

As a mentor at #eCSSercise I would like to explain my journal making process. Before I ever go into the skinning part, I start in Photoshop.

On a Deviant green background I plot out my layout. The example skin (which will be linked here after I finish it, I'm working on it as I create the walkthrough of my process), is fairly image heavy, with 6 total graphics. Beginners, I suggest starting with no more than two, a header or footer, maybe. Keep your skill in mind when creating your design. Making something too complex may be discouraging if you aren't ready to tackle it.

I divide everything up into separate layers. Working on a single layer may limit your ability to manipulate the design in CSS and may not have the desired effect. I add a palette of all my colors. I try to keep the palette simple and complimentary. I usually go by a three color rule, but for this to have links show up legibly and distinctly, I needed a few extra colors in the same color family.

I prefer using Gruze to Old School styling, as there are more sections in Gruze, making it more flexible to layer images. I've made two handy reference tools for Gruze.



The Bare Bones is the Gruze structure but completely empty. The box model has all fields with different color borders so you can get in there and mess with all the fields with your hands.

Keep the journal divs in mind when making your layers, so you can easily separate them into new files. I use PNG for images with alpha transparency, otherwise, I use JPG for flat images. To do this, I duplicate my image layer, convert to smart object, rasterize, select all, copy, and paste into new file. The smart object/rasterize step is really only necessary if you have a bunch of crazy filters and opacity going on like I have.

Make sure to name your files something easy to remember where they'll be placed in your code. Upload all your files to your image host. You can host them on DA in your scraps folder. It should work to keep them there temporarily until you upload your installable files and will no longer need them.

I also make a notepad text file of my hex colors for easy reference. Be sure to notate which sections each color is used for so you don't have to do a lot of trial and error. Unless you're some super genius who memorizes every hex code!

---

Join me on to learn/teach CSS. I will be sharing more resources about my creative process. And I'll work one on one with students through the group. (DevWatch the group to see when we're ready to accept students)

Check the forum in my journal for more CSS tips and tricks Also, I've just added a new section for Designing Journal Layouts. I randomly fill in ideas and such as I have them, so check in from time to time. Or add your own.

---

Edit
I LOVE YOU!!!!! I cannot believe I got a DD! I'm seriously beside myself and just full of nonsense like OMG!!! going through my head a million times! I was just updating for Part Two and checked my messages getting a grats.
Thank you thank you thank you!!!!!
I'm gonna squeal now!

Thank you ^wdwparksgal for featuring me! ♥

Featured in this News: [link]