Shop Mobile More Submit  Join Login


Submitted on
April 27, 2011
Image Size
652 KB


806 (who?)
Designing a Journal Part One by GillianIvy Designing a Journal Part One by GillianIvy

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 :iconecssercise: 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.

:iconoblivion00: 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]
Add a Comment:

Daily Deviation

Given 2011-04-28
Designing a Journal Part One by *GillianIvy CATEGORY: deviantART Related / deviantART Tutorials: Suggester states, "people forget how important it is to design before just making a skin...especially with the gruze format, there are a lot of options." Be sure to check out other good tutorials on the site of *GillianIvy!! ( Suggested by neurotype and Featured by WDWParksGal )

The Artist has requested Critique on this Artwork

Please sign up or login to post a critique.

Shira-Noyoma Featured By Owner Mar 7, 2014  Hobbyist Traditional Artist
i don't have photoshop >.<
i only have GIMP
GillianIvy Featured By Owner Mar 7, 2014  Hobbyist General Artist
Same concepts, but I cannot give instructions in GIMP.  If you can work in layers with transparencies, etc.  So you can easily divide up your image parts.   Of course, this is not the only way to make a design for a skin.  And my way has actually changed since this.  Though basically the same.  I have a base and all my other elements on separate layers, if I need to merge elements, I do it as a copy layer and masked to the size/shape I need to preserve my steps.  

You can design a skin that has no transparent/alpha layers so your images are all jpg.  I use "save for web' in Photoshop, but maybe there is something similar in GIMP that creates a smaller image file size?  I don't know.

Also, now you can do gradients in deviantART code, so you can eliminate a lot of the images needed.  Such as my semi-transparent bg, instead "rgba(255,255,255,0.2)" could create a white, transparent bg color.  A linear-gradient could be added to that to alter where the transparency is or how much.  I would suggest using ColorZilla's Gradient Generator to learn how.

Now I try to cut back on the number of images I use and instead use CSS to code the same effect.  I don't spend as much time on my mock-ups and just code it as I go with the idea in my head.  Of course, making a mock up is better for doing commissions, but a lot of times, I just keep a WIP in my for them to review as I edit.  Saves me time than having to edit a graphic repeatedly.

I would be glad to give you pointers if you need any.  We all learn different ways to make skins efficiently.  I made this tutorial to emphasize the design aspect of journal skinning.  To sort of break out of the dA mold.
Shira-Noyoma Featured By Owner Mar 7, 2014  Hobbyist Traditional Artist
I think i will get photoshop soon then!
GillianIvy Featured By Owner Mar 7, 2014  Hobbyist General Artist
Shira-Noyoma Featured By Owner Mar 8, 2014  Hobbyist Traditional Artist
Enjoy your day~
DevilsBladeAuthor Featured By Owner Mar 4, 2013
Friend linked me here cuz i wanted to create a journal entry but i was wondering...what is eCSSercise and what is CSS
GillianIvy Featured By Owner Mar 5, 2013  Hobbyist General Artist
Ah, ~eCSSercise has been dissolved and gone back to the sister group #eCSSited. It is a group for journal resources. And help learning CSS. CSS stands for Cascading Style Sheets. It is what makes websites pretty. You control background images, fonts, etc. When we apply it to an existing website, it is called skinning. So we can skin the journals and galleries on deviantART.

This tutorial I made is kind of out of date now. So, if you have any questions, let me know. I've been meaning to redo this.
DevilsBladeAuthor Featured By Owner Mar 5, 2013
mmk if i have any questions ill shoot em by you
MukArt Featured By Owner Nov 14, 2012  Professional Digital Artist
gonna try to make a journal skin now that i have a dev account :O thanks for uploading tutorials :) do you have tutorials for how to do the decorating for the folders and widgets too?
GillianIvy Featured By Owner Nov 14, 2012  Hobbyist General Artist
I don't, though I have a favorites folder which has some handy stuff... [link] This may have everything you are looking for. There are some changes to dA code which may not be in any journal tutorial out there. I have yet to have seen a new one in a while.

The titles are now links, specifying "h2 a" and making sure anything like color is set to important will override the default dA blah dark green color. Also, the moods have bg for both .a and li, and would need to be made transparent to get rid of it.

I would suggest a few groups to watch/join: #deviantCSS, #eCSSited, #CSS-Babes, #JournalSkin. They keep resources and are a very helpful community open to answering questions. Many of the same people are behind the scenes in all of the groups, so asking a question in one is usually sufficient. And of course, I'll gladly answer any question I know.
Add a Comment: