Shop Mobile More Submit  Join Login
Designing a Journal Part One by GillianIvy Designing a Journal Part One by GillianIvy
:iconhonoredddplz::iconhonoredddplz2:

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.


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

:iconshira-noyoma:
Shira-Noyoma Featured By Owner Mar 7, 2014  Hobbyist Traditional Artist
i don't have photoshop >.<
i only have GIMP
Reply
:icongillianivy:
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 sta.sh 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.
Reply
:iconshira-noyoma:
Shira-Noyoma Featured By Owner Mar 7, 2014  Hobbyist Traditional Artist
I think i will get photoshop soon then!
Reply
:icongillianivy:
GillianIvy Featured By Owner Mar 7, 2014  Hobbyist General Artist
:D
Reply
:iconshira-noyoma:
Shira-Noyoma Featured By Owner Mar 8, 2014  Hobbyist Traditional Artist
Enjoy your day~
Reply
:icontheinkingpen:
TheInkingPen 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
Reply
:icongillianivy:
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.
Reply
:icontheinkingpen:
TheInkingPen Featured By Owner Mar 5, 2013
mmk if i have any questions ill shoot em by you
Reply
:iconmukart:
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?
Reply
:icongillianivy:
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.
Reply
:iconmukart:
MukArt Featured By Owner Nov 14, 2012  Professional Digital Artist
ah alrighty thanks! i bookmarked some of those groups and the folder :D
Reply
:icongillianivy:
GillianIvy Featured By Owner Nov 15, 2012  Hobbyist General Artist
Good luck and if you have questions, feel free to ask ;D
Reply
:iconmukart:
MukArt Featured By Owner Nov 15, 2012  Professional Digital Artist
alrighty! thanks a bunch :)
Reply
:iconmukart:
MukArt Featured By Owner Nov 14, 2012  Professional Digital Artist
i meant now that i have premium membership :iconfacepalmplz:
Reply
:iconcolor-capsule:
Color-Capsule Featured By Owner Aug 2, 2012  Hobbyist Digital Artist
I can do this other programs like paint tool sai or is this tut more for photoshop?
Reply
:icongillianivy:
GillianIvy Featured By Owner Aug 2, 2012  Hobbyist General Artist
Any program. Especially if you can work with transparencies. Very useful. Gradients and transparencies are good for flexible designs. I use Photoshop, so my walkthroughs will be more specific with their tools. So any technique I use might be tried a different way in another program.

You can use jpg, png and gif for your background images, even animated. This tutorial may be a bit out of date now. :B
Reply
:iconcolor-capsule:
Color-Capsule Featured By Owner Aug 2, 2012  Hobbyist Digital Artist
Thank you! (:
Reply
:iconsilversymphony:
SilverSymphony Featured By Owner Apr 9, 2012  Hobbyist General Artist
Is the measurements at the top pixels or inches or what?
Reply
:icongillianivy:
GillianIvy Featured By Owner Apr 9, 2012  Hobbyist General Artist
Yeah, but that was for a bigger workspace than my design. I like to keep in a 700 width for smaller monitors. But for scaling designs that stretch, it really doesn't matter how big you make your workspace. Just try to keep in mind the width of people's screens, you don't want your images too big and cut off.

One tip to try, go to your profile page in fullscreen. Do a screencap. Go into photoshop/editing program and crop to the journal area size. That gives you close to the size, or at least optimized for yourself ;D
Reply
:iconsilversymphony:
SilverSymphony Featured By Owner Apr 9, 2012  Hobbyist General Artist
Thanks so much! I started making my own journal today, and the one I'm working on is disney themed, the other question I had, was, is the coding you provided to build off a previous journal skin, like how do I make a new one? :S
Reply
:icongillianivy:
GillianIvy Featured By Owner Apr 9, 2012  Hobbyist General Artist
I have a blank template with the basic structure, though there were some changes. One resource I recommend for structure would be `ginkgografix's old vs gruze model. It shows all the parts of both and the differences between the two structures.

I use gruze because it has more parts and is more flexible. I learned on old school, which is easier and simpler. The two cannot be combined.

I write all my codes from scratch, so not really going from a previous model. Once you know the DA codes, the rest is filler. I think the link for the blank template is in this deviation description, if not, then it is in my resources/stock folder. There's a few other snippets you might find useful as well.

Good luck and happy skinning! (I'm an addict :paranoid:)
Reply
:iconsilversymphony:
SilverSymphony Featured By Owner Apr 10, 2012  Hobbyist General Artist
hope you don't mind if I ask a few more questions, my skin has a border but inside the border is a colour, and then theres a space between the header and the footer of the jornal, but I want the colour to continue inside those lines only, is that possible? because right now I'm sorta sad that it won't be inside those lines D:
Reply
:icongillianivy:
GillianIvy Featured By Owner Apr 11, 2012  Hobbyist General Artist
Please give me links to look out. I'll try to help what I can. maybe take a screenshot and notate different parts? Because I'm kinda lost. And I do not mind ;D
Reply
:iconsilversymphony:
SilverSymphony Featured By Owner Apr 12, 2012  Hobbyist General Artist
its alright, thanks for your help! I finally started learning how to code :)
Reply
:iconcallmerissa:
CallMeRissa Featured By Owner Oct 12, 2011  Hobbyist Digital Artist
Well I was following your tutorial, and I was confused by how you got "deviant Green" on your photoshop. Could you explain that part to me?

Sorry I'm a noob at this. ^^
Reply
:icongillianivy:
GillianIvy Featured By Owner Oct 12, 2011  Hobbyist General Artist
Quickest way would be to take a screenshot or snip of DeviantART and color pick the bg for your fill color.

There's another great CSS guideline (not exactly a tutorial so much as a structural diagram) that has all the colors nicely laid out. Link fetching now: [link] Warning, that diagram may be a bit confusing to look at if you don't know a bit of the CSS already, but it is a very useful thing to have, I recommend adding to your faves for easy access.
Reply
:iconcallmerissa:
CallMeRissa Featured By Owner Oct 12, 2011  Hobbyist Digital Artist
Thanks, that helped so much! :D
Reply
:icongillianivy:
GillianIvy Featured By Owner Oct 12, 2011  Hobbyist General Artist
;D My pleasure!
Reply
:iconbigcyco1:
bigcyco1 Featured By Owner Sep 25, 2011  Hobbyist General Artist
Just read it briefly and looks great thanks!I will check it out better now.
Reply
:icongillianivy:
GillianIvy Featured By Owner Sep 25, 2011  Hobbyist General Artist
Thanks for the invite as well, well check out the group a bit later.
Reply
:iconbigcyco1:
bigcyco1 Featured By Owner Sep 25, 2011  Hobbyist General Artist
Your welcome!
Reply
:iconnames-tailz:
Names-Tailz Featured By Owner Sep 14, 2011  Hobbyist General Artist
Imma gonna try this


maybe I can make a nice one for myself and others ;3


^^; maybe being the code word (I am a coding n00b)
Reply
:iconmochamacha:
MochaMacha Featured By Owner Aug 7, 2011  Student Digital Artist
I think I'll try this.
Reply
:icongillianivy:
GillianIvy Featured By Owner Aug 8, 2011  Hobbyist General Artist
Great! I'd love to see your results.
Reply
:iconmochamacha:
MochaMacha Featured By Owner Aug 9, 2011  Student Digital Artist
Alright! -battles the forces of CSS and HTML-
Reply
:icongillianivy:
GillianIvy Featured By Owner Aug 9, 2011  Hobbyist General Artist
Use the force :jedi:
Reply
:iconmochamacha:
MochaMacha Featured By Owner Aug 16, 2011  Student Digital Artist
YOSH!
Reply
:iconlightpurge:
lightpurge Featured By Owner Jul 7, 2011  Hobbyist Digital Artist
Congratulations, you have been featured in #deviantART-Related's June Newsletter. You can take a look here June 2011 News Letter.
Reply
:icongillianivy:
GillianIvy Featured By Owner Jul 7, 2011  Hobbyist General Artist
Thank you so much!! Added the link to the description and :heart:'d!
Reply
:iconhaboui:
Haboui Featured By Owner Jun 24, 2011  Hobbyist Traditional Artist
Oh dear now I know the reason why I don't understand these things. I don't have photoshop, or any of those programs. I read all everything in the group.

I was going to ask where the forum is to explain myslef but I'm srry, I won't be able to get a mentor, I really wanted soulfight-a-devianty because I already knew her for months and come from a similar background but I don't have the program and costs too much for me to get anytime soon. I'm too young to have a job , my parent's don't pay me for chores and I get a dollar a week for allowence. There is a way for commissioning with paypal right? Well I'll see what I can do about that. I'm REALLLLLLLLLLLLLLY SORRRRRRRRRRRY !!!!!!!!!!!!!! I want to learn but these things require stuff. So I'm very sorry for wasting your time. I thought it was learning the code and structor of it and using the HTML code for the image you want to place in the CSS. I thought you just needed to know the color numbers, images and line/box structures but I guess there's more to it ^^;

Congrats on the DD though :clap:
Reply
:icongillianivy:
GillianIvy Featured By Owner Jun 24, 2011  Hobbyist General Artist
You're not wasting anyone's time. Any art program works for the art elements. This is only MY method. there is no right way to design something. I create my images and layout first and then work in it on the CSS side. My most recent journal, I did completely backwards, a lot of coders use no layout mock up first at all.

Editing pictures is only a part of it. And there are plenty of free programs out there. Also there are plenty of image free designs which do not need any image elements to make them work. Of course, you could do minimal design and add things you might be able to find as stock. Like tileable textures for bgs.

For CSS it is about learning the code. Don't worry, you'll be fine here. :heart:
Reply
:iconhaboui:
Haboui Featured By Owner Jun 24, 2011  Hobbyist Traditional Artist
Oh thank goodness :rose:

Okay I will try to learn on myslef for a while. But I can come to you guys for any practicing and questions right?
Reply
:icongillianivy:
GillianIvy Featured By Owner Jun 24, 2011  Hobbyist General Artist
You don't want a mentor assigned to you? Most of us are open to Q&A. We do welcome students who research for themselves as well.
Reply
:iconhaboui:
Haboui Featured By Owner Jun 24, 2011  Hobbyist Traditional Artist
Thank you if I may I would like to join the that one. I don't want a memtor all to myself but I will definitly send lots of questions your way so BEWARE :giggle:

It's nighty night for me ;p
Reply
:icongemmasuen:
GemmaSuen Featured By Owner May 21, 2011  Professional Artist
:) I'm in the middle of making my journal skin, thank you for uploading this, it's very simple to follow so far.
Reply
:icongillianivy:
GillianIvy Featured By Owner May 21, 2011  Hobbyist General Artist
Glad to hear that. Funny tho, I haven't finished the skin I was doing this with. Came up on a snag. But I guess the final part should say "compromise" and admitting when the journal is biting off more than you can chew XD lols. It was working fine, I think it might be a browser issue or something... sigh.
Reply
:icongemmasuen:
GemmaSuen Featured By Owner May 21, 2011  Professional Artist
I see! :o, well I'm only planning to make a super simple one ^^ with the most basic functions (with a top, middle and bottom section). I'm sure it will be okay, :x a shame you're having problems with it.:) But your journal skins look very good!
Reply
:icongillianivy:
GillianIvy Featured By Owner May 21, 2011  Hobbyist General Artist
Thanks, I always go for overly complicated, because I like to torture myself! I didn't intend for it to be too complex, figures I'd do that with a tutorial! I wanted to do something simple. But see, I have so many layers of images that it's not expanding right, and I so hate scrollbars mucking up my layouts. Bleh! I haven't worked on it, kind of on the back burner again, since I have an actual commission to do. CSS + Design work, wooooo.

I'm always available for questions if you get a hitch, I don't mind answering ;D Just note me.
Reply
:icongemmasuen:
GemmaSuen Featured By Owner May 21, 2011  Professional Artist
^_^ I will do! Now that I am on :+watch: thanks again, and good luck with all your work :D
Reply
:icongillianivy:
GillianIvy Featured By Owner May 21, 2011  Hobbyist General Artist
;) thanks for the watch!:iconloveemoteplz:
Reply
Add a Comment:
 
×
Download JPG 396 × 2170

Featured in Collections

About dA by H3llana-mod




Details

Submitted on
April 27, 2011
Image Size
652 KB
Resolution
396×2170
Link
Thumb
Embed

Stats

Views
16,977 (1 today)
Favourites
817 (who?)
Comments
120
Downloads
291
×