Shop Mobile More Submit  Join Login
×




Details

Submitted on
April 28, 2011
Image Size
2.4 MB
Resolution
1200×2911
Link
Thumb
Embed

Stats

Views
5,536
Favourites
266 (who?)
Comments
48
Downloads
150
×
Designing a Journal Part Two by GillianIvy Designing a Journal Part Two by GillianIvy
Okay, may I first apologize for this being so much text to look at! However, I did make it bigger so more legible!
Journal skin is now available:




Live View Watch the design in action at this stage of coding. A lot of it looks pretty wonky.

And I had to change the positioning one it loaded, as it looked different than the preview and even from the Design view. The Design view looks entirely wrong right now. I might suggest a script that removes the design view on the fly.


[look, I'm featured!]

For an excellent Gruze model, check out `ginkgografix's "Old Vs Gruze Journals"





Again, I recommend trying my "Bare Bones CSS Template" as it's a structured shell of all the elements for Gruze journals. This tutorial does not teach that structure, there are already box models and tutorials for that. This is a walkthrough of my process. I use the Bare Bones to speed up my designing process and so I don't forget an important section.

For instance, in my designing phase, I forgot moods all together. So for now, I've made a mental note of where I want them, I'm not going to go back into my design just to add that in. I think I'll put them on the bottom in the text area, centered.

Now that all my files are uploaded and I've put my snippet on, I'll put in my dummy example text. I like to include at least one of the following: Regular text, Thumb(s), Blockquote, Unordered List, Ordered List (In the preview it's unordered, will fix later), and Subheader.

I use the code <strong> for my subheader, as it's easier to remember than a new div and mostly unused, as people usually use <b> to bold their text.

I also create a new div <div class="center"> which I can wrap around any text or thumbnails I wish to have centered on the fly. I'd suggest creating ones for left and right floats, but we'll not worry about that for now.

Next, I start filling in my background images so I can see where everything is going to fit in. I chose .gr-box vs .gr because the .gr repeated my image on the top and that does not work with this design. .gr formats the entire document, rather than just the one section. Of course, you should be able to override conflicts by using !important but we'll get into that another time.

Position to the top and center and set repeat to no-repeat. I tiered my background styling as IE does not read the one line styling properly, and rather than redo everything for silly IE users, I just automatically do it that way anyways.

Next I put the bottom image on. Under .gr-body and set it to position bottom center and no-repeat. Right now it overlaps, I will likely need to set a min-height so this does not happen. Right now, i work top to bottom and just fill everything in as I go. Because if you fiddle around with one element too long, then add another that moves your first element, you'll end up doing more fiddling and might end up a bit frustrated at doing all the same work over again.

Throughout my skinning process I will refer to my mock up to compare and see where to go next. For this, it's really sloppy looking and I want to go ahead and work on the text area so I can get my mind wrapped around it. I take everything one step at a time. Looking at it as a whole, it's a big jumbled mess!

I put the 20% white bg fill on my text area and added a white border. This helps me see where everything is so I can then position it. I set it to position:relative and move it to where I want it. Put in the width and set the margin to auto. I love auto. It makes everything go bam, right to the center. Brilliant!

Adding in my white gradient bg for .gr-top and positioning it makes it so my text is covered by the gradient. This is no good. So, I set it to position:absolute and put in a z-index:0. The z-index deals with the layering of elements front to back. Default is 1. Making it zero pushes it backward.

At this point, my header title is still all off to the side and not formatted and looking ugly. So, I'll go to .gr-top h2 and add in the font elements, color and positioning and width. I changed the color from my design because it was just too light to be legible. I also decided to add some pretty text effects, because I love those.

I did the same for my .text adding fonts, padding, color. Here, I also decided to add in text shadow as well as a subtle box shadow which goes around the outline of the entire journal text without use of images. Looks slick. Gives it that extra dimension.

So, for the most part, the top half of my journal is done. I still have to fix my footer image, add in my mint green gradient at the bottom of the text area and do my date stamp, links, moods, blockquotes, lists, comment links, hover effects, thumbs and lastly, my credit.




You may download my resource files from my SkyDrive to look at the inner workings. I've included the PSD file and everything you've seen.

[link]
[images]
[link]
[psd]

Join me at :iconecssercise: where I'll be mentoring students one on one. The group has just started, so not ready yet, but devWatch it to keep updated when students will be accepted.
Add a Comment:
 
:iconmoon-dazzle:
Moon-DaZzLe Featured By Owner Jun 4, 2013  Hobbyist Digital Artist
Sorry, but how do you make the title of a journal go under the heading picture?
Thanks ^^;
Reply
:icongillianivy:
GillianIvy Featured By Owner Jun 5, 2013  Hobbyist General Artist
There's several ways to do this. The easiest would be to make the top sections which are above the title be where you put the bg image. If you want it as a link, however, then you have to move things around and it gets a little tricky. Because then, you would have the image link in the header and have to adjust the position of the title.

Can you send me a link to your journal you're working on? I could also look at codes for you. ?Just note me the code or link to one.
Reply
:iconmoon-dazzle:
Moon-DaZzLe Featured By Owner Jun 5, 2013  Hobbyist Digital Artist
Oh, awesome! Here's a link: [link]
I've also broken it up into three sections, the top middle and footer. Thanks :)
Reply
:icongillianivy:
GillianIvy Featured By Owner Jun 6, 2013  Hobbyist General Artist
So, how is it going? Are you still needing help with this?
Reply
:iconmoon-dazzle:
Moon-DaZzLe Featured By Owner Jun 6, 2013  Hobbyist Digital Artist
A bit, I'm not fully understanding how to do it. My knowledge in CSS is very limited ^^;
Do you have any examples or tutorials regarding how to do something like this? I've searched everywhere and can't seem to find one.
If not, I'll just keep practicing.
Just to clarify, you're saying that the section of CSS code that makes up the title needs to be moved underneath the image I want above?
Reply
:icongillianivy:
GillianIvy Featured By Owner Jun 6, 2013  Hobbyist General Artist
Positioning the title section (.gr-top{}) by moving it down may be the easiest way.

example:

.gr-box{
background:url(yourimg.jpg);
}
.gr-top{
position:relative;
top:200px;
}

That would move the title section (timestamp and all) down by 200 pixels. Of course, you would adjust for the size of your image. But that is the basic of it.

I don't know of any tutorials that deal with positioning per se. I had written something about it a long time ago for when I was a mentor at ~eCSSercise, but that group is closed now. It was an awful lot of work for mentors to maintain classes.
Reply
:iconmoon-dazzle:
Moon-DaZzLe Featured By Owner Jun 6, 2013  Hobbyist Digital Artist
Also, I seem to understand the way to get the image above the title, but how do you make the title go on top of the image (if you have a special box for the title to go in on the image)? Is it done the same way, or does that involve different coding?
Sorry, and thank you ^^;
Reply
:icongillianivy:
GillianIvy Featured By Owner Jun 7, 2013  Hobbyist General Artist
You can put the image on the background of your title either on

.gr-top{}

or

.gr-top h2{}

instead of as the journal bg. This way it would be able to be on top of the image. Better as the gr-top, since you would need to make it the size of your image. Keep in mind that each section can have an image on it, so you can make layers. Have you seen the box models made by `ginkgografix? It is slightly out of date, but it shows nicely which 'layers' are inside of each other: [link]
Reply
(1 Reply)
:iconmoon-dazzle:
Moon-DaZzLe Featured By Owner Jun 6, 2013  Hobbyist Digital Artist
Hmm, I've added that code to my current code, and I can't seem to make it work. The picture won't show up at all :(
I'm doing something wrong I'm sure, so I'll go look up a tutorial on which part of code is which and try it out again~
Thanks for all of the help, I'll let you know if I figure it out :)
Reply
:icongillianivy:
GillianIvy Featured By Owner Jun 7, 2013  Hobbyist General Artist
Are you using old school (.journalbox, etc) or Gruze (.gr-box)? You cannot mix the two. My example is Gruze. Also, you would need to edit what I wrote, not copy directly.
Reply
(1 Reply)
:icondanichingu:
DaniChingu Featured By Owner Nov 6, 2012  Student Digital Artist
you didn't really show anything for the white 20% white fill but, I understand it's also one of these pre made images, did you put it on repeat, so as the journal stretches, it stretches as well? I'm mainly making sure I have the right thing in mind...
Reply
:icongillianivy:
GillianIvy Featured By Owner Nov 6, 2012  Hobbyist General Artist
Hmmm, well this is actually old now. It can be done as a semi-tranparent fill image. Which I no longer use. As dA now accepts rgba() where you can set the opacity. The defaults are background repeating, so nothing needs to be declared. For converting back and forth and mixing colors to fake opacities, or get the exact amount of shadow I want, I use ColorHexa.com [link] so I get the rgb equivalent to the hex codes I know. It has a mix option as well. So white would be background:rgba(255,255,255,0.20);

A lot of dA's codes have changed and most the tutorials I've seen are old and do not reflect this. I might have to make a new version some time. Please feel free to pick my brain for CSS things. I'm full of them.
Reply
:icondanichingu:
DaniChingu Featured By Owner Nov 6, 2012  Student Digital Artist
Thanks for the quick reply! I understand so they finally accept rgba! I wouldn't know that if you hadn't told me! thanks!

And... Have the codes changed a lot since this specific tutorial? I know a bit about CSS just to get me going, but there're still a lot of things that need to be cleared for me to be honest. I've done the images for the header and footer and sort of managed to position them correctly, but I've lost any sense of direction when dealing with the main body of the journal... I gave up on trying to have an image for background to ease on myself.
An updated version of this sort of a tutorial would be of a great help to me since even this one helped a lot~ but don't stress yourself for it~ :D
Again, thank you for the quick reply!
Reply
:icongillianivy:
GillianIvy Featured By Owner Nov 6, 2012  Hobbyist General Artist
Let's see, the titles are links now. So the colors will either be ugly default green or your link colors instead of the title color. In the moods, they set the bg on there differently so you have to specify transparent for all sections to get rid of the light greenish white color. It is minor things like that. Recently, there was a change to a code that a CSS friend of mine had stumbled across and I was using, but now they changed it. It is an uncommon to use code, and I just found it the other day, so not sure if it affects anyone but the section me and my friend were using.

Now galleries, that is a can of worms. They have added something like 40 divs for the 6 different thumbs... reg thumb, horizontal cut offs, vertical cut offs, journal thumbs and lit thumbs, and png/gif thumbs. It makes skinning galleries a bit of a headache....

I think more thumb changes are rolling out as well, for journals in a gallery, but not the standard thumb. It looks good. It's bigger, plus you see the images in the journal preview instead of :thumb###: text.

Also, I've changed how I tier my journals. You may have a look at my blank template, it is a GoogleDoc: [link] This is my base, which I edit as I find changes. I'll add new things in bold and might even add a side comment when something needs an explanation. I've shared this with a few people. I may release it publicly later on though. There's no need to credit me if you use, since it is just a blank. I have a 'bare bones' template in my galleries, but it is out of date from this and much more simple. This has the layers of things I actually use. They would need explanations or use by trial and error. You're welcome to explore it though.
Reply
:icondanichingu:
DaniChingu Featured By Owner Nov 6, 2012  Student Digital Artist
Wow these are minor but when they're so frequent it really is a big deal! Especially with galleries :/

Thank you for sharing this blank with me! I always work best when I know what to work with so I really love templates, it's easier to understand what should go where and how, rather than having to type out the whole thing each time and forgetting critical sections.

Thanks again for all the info and help this is really a lot more than I have expected for a response!

if it's not a bother, I might come and poke some questions again if I'm having more trouble ^^
Reply
:icongillianivy:
GillianIvy Featured By Owner Nov 6, 2012  Hobbyist General Artist
Not a bother at all. I am weird and like discussing CSS, hahaha. I get so excited every time there is an update. :giggle: Go watch =CypherVisor, ^thelasth0pe, $kemayo and `ginkgografix's journals if you want to keep up on some CSS changes. Or in the groups #deviantCSS and #eCSSited. Plus, I like to help. :D
Reply
:icondanichingu:
DaniChingu Featured By Owner Nov 8, 2012  Student Digital Artist
Thanks! These really did help a lot I actually managed to do something decent for a first journal skin, but there are 2 problems I've encountered. Since I'm using an all-images skin, the body is a background image as well, I originally made the journal and cut it so it'd still align, and it did at first, but for some reason now it seems that the image I used for the body of the journal has been resized from it's original dimensions in an awkward way... and also there's this problem that the images get cut off on the main profile as can be seen on my group where I'm testing it all on: [link] (I checked on personal journal and it does the same :/) do you have an idea how that could be fixed?
sorry to trouble you again ;A;
Reply
:icongillianivy:
GillianIvy Featured By Owner Nov 8, 2012  Hobbyist General Artist
Okay, on resize issue, it may be because sometimes, when you upload an image to dA, the preview image/default size is smaller. Make sure it is set to "Original size", then copy & paste the url, or use the "Download" link for the right size.

For that layout, you'd want to make sure the center image tiles nicely, for when you have small or long entries.
Reply
(1 Reply)
:iconrippedmoon:
RippedMoon Featured By Owner May 30, 2012  Hobbyist Digital Artist
I'm way too lazyyyyyyyy xD
Reply
:icongillianivy:
GillianIvy Featured By Owner May 30, 2012  Hobbyist General Artist
:giggle: That's okay, I'll make many free journal skins for all to enjoy! ;D I totally saw your little wolf icon with its nose in the air as saying that... :lmao:
Reply
:iconrippedmoon:
RippedMoon Featured By Owner May 30, 2012  Hobbyist Digital Artist
Haha xP Yeah XD

I just need an easy to use journal skin template
With the header and texts saying "image url here" "text code color here" and stuff. Got that?
Reply
:icongillianivy:
GillianIvy Featured By Owner May 30, 2012  Hobbyist General Artist
Oh, I'm not good at easy :lmao: I intend to do a template some time, I keep doing other stuffs.
Reply
:iconrippedmoon:
RippedMoon Featured By Owner May 30, 2012  Hobbyist Digital Artist
XD
Reply
:iconsilversymphony:
SilverSymphony Featured By Owner Mar 5, 2012  Hobbyist General Artist
Does this work on photoshop elements 8.0?
Reply
:icongillianivy:
GillianIvy Featured By Owner Mar 5, 2012  Hobbyist General Artist
You don't need a specific image editor. It should be fine in elements. Basicaally, you need to be able to divide out your images into parts/layers. To place them into each section. PNGs work nicely as they have transparent bgs, blend nicely into the design.
Reply
:iconvalhalrion:
Valhalrion Featured By Owner May 25, 2011  Student Filmographer
I love you.
Reply
:icongillianivy:
GillianIvy Featured By Owner May 25, 2011  Hobbyist General Artist
:iconloveemoteplz: I love you too! ;D
Reply
:iconkjherstin:
Kjherstin Featured By Owner May 3, 2011
another great tut
Reply
:iconfission1:
fission1 Featured By Owner Apr 28, 2011  Professional Digital Artist
Very cool Gillian! I've been looking/waiting for something like this! :iconflowerdanceplz:
Reply
:icongillianivy:
GillianIvy Featured By Owner Apr 28, 2011  Hobbyist General Artist
Awesome, I'll work on Part three soon, then get that journal out for all to use! Watch, I'll end up with some sort of snafu and my design will be all fubar from what I want it... Lols. I was intending to do a simple design for a tutorial, but realizing, with me, there's no such thing. That's like me managing to comment in only one sentence (with zero follow up comments...)
Reply
:iconfission1:
fission1 Featured By Owner Apr 30, 2011  Professional Digital Artist
:laughing: I'll be waiting patiently! :D
Reply
:icongillianivy:
GillianIvy Featured By Owner May 2, 2011  Hobbyist General Artist
Finished! [link]
Reply
:icongillianivy:
GillianIvy Featured By Owner May 1, 2011  Hobbyist General Artist
Sneak peek at my progress here: [link]

Though it's deceptive, it is only set for that size right now, I've been running into alignment issues trying to get the bottom to match up... boo. I wracked my brain on it too much today. Had to stop :writersblock:
Reply
:iconela-hara:
Ela-Hara Featured By Owner Apr 28, 2011  Hobbyist General Artist
I always wanted to know where to start on designing my own Journal background - questions answered!

Thanks! :love:
Reply
:icongillianivy:
GillianIvy Featured By Owner Apr 28, 2011  Hobbyist General Artist
Part three will be coming soon! As soon as I write it :D I'm glad this helped.
Reply
:iconsomebodylost:
Somebodylost Featured By Owner Apr 28, 2011  Student Digital Artist
AWESOME. :iconfinallyplz:
Reply
:icongillianivy:
GillianIvy Featured By Owner Apr 28, 2011  Hobbyist General Artist
hee hee that's cute :XD: Thank you. pat-a pata pat-a-pon
Reply
:iconsomebodylost:
Somebodylost Featured By Owner Apr 28, 2011  Student Digital Artist
:iconravesplz:
Reply
Add a Comment: