[x]

Browse More Like This

Download Image
JPG, 858×3432 more ▶

More from `GillianIvy

View Gallery · View Prints

Featured in Groups:

#eCSSited
a place for all your CSS needs

#Divine-Tutorials
Tutorials befitting of a deity!

#CustomizeYourProfile
Get Customized!

Details

Submitted: May 2, 2011
Image Size: 2.0 MB
Resolution: 858×3432

Link

Thumb

Statistics

Comments: 28
Favourites: 144 [who?]
Views: 2,547 (4 today)
Downloads: 77 (0 today)

[x]

Designing a Journal Part Threeby `GillianIvy

Resources & Stock Images / Tutorials / deviantART Tutorials

Journal skin is now available:

And view it Live
There's more detailed notes on the fixes and process, but be warned, it is excessively long... Much like my tutorials.

This tutorial wasn't designed as an easy to do beginner's standalone walkthrough. I don't have all the structure, you will need to know it in order to understand this tutorial. I've provided links to my "Bare Bones Template" which has the structure there for you, you just fill in the blanks.

Hopefully, this tutorial has given better understanding of the elements, along with my methods and tips. Granted, my method is trial and error and then fixing it top to bottom again and again. Thorough.

It's a lot of work. Skinning properly isn't something that's easy. It's design and layout as well as code work.

Don't be discouraged if my methods don't work for you. There is no "right" way to code. So long as you get it to work how you want it. I'm sure at times, my code work can look kind of sloppy. And perhaps I've put in some unnecessary code. okay very sloppy

For those of you interested in learning with a mentor one on one, please, join me over at

. I know learning from a tutorial doesn't answer questions. And it won't give you feedback, advice and tips. Or just plain tell you where you messed up. Watch the group for now, we will be accepting students soon.

In the meantime, you can have a look in my forums for tips on designing and coding and I offer support. Check my journal: [link]

I also accept

commissions: [link]

Please comment, I thrive on feedback.

~KitsuneBushi Jun 6, 2012 Student Digital Artist

Alright I've got a question.

I've got a pretty basic picture done, right? I used a background, a header (fancy picture about the title box), the title box and then the text box. It was a commission for me done by someone but she wants me to try and code it. [link]

I have the file with the layers so I can isolate certain areas or add/delete.

All the CSS tutorials I have been to have helped, but they have all this added stuff I don't want that I can't take out without ruining the journal or they no longer hold true.

What do I need to do? I understand basic CSS, but as far as getting a code that can be modified, where do I find one? How can I make the text boxes be where they should?

How could I use your journal tutorial with this? I need a CSS code to modify, and I'm just totally lost all together.

Could I commission you to explain it?

`GillianIvy Jun 6, 2012 Hobbyist General Artist

For that skin, I'd recommend using the gruze structure, as it has enough layers. I have a blank template (nothing coded, just the structure) which might help there. [link] As far as a template you can modify, I don't think many would benefit you as your layout would be different. For your text area, the border might be a bit tricky to pull off, since DA can't do image borders, you have to trick it. Or alternately, try using box-shadow effects to mimic the look. I do not know if rgba works in borders, because that would be perfect for what you are trying to achieve. rgba was recently added to DA skinning, so we can do semi transparent bgs without using images. I use ColorHexa.com [link] to convert hex codes to rgba format. Very useful site.

~Shadowhedge1001 Mar 2, 2012 Hobbyist Writer

This is cool!

I'm sure it'll help me make a journal skin!

(BTW, I feel like a dummy for asking this, because it has NOTHING to do with the tutorial, but how did you make the word "LIVE" a link?

)

`GillianIvy Mar 2, 2012 Hobbyist General Artist

It's an anchor tag link <a href="#">Live</a>

Thanks, feel free to hit me up for questions. There are some things that may be out of date on this. As DA has changed some of their coding things. Like now, Titles are links, so they are the same color as links unless you edit it.

`Kjherstin May 3, 2011 Professional Digital Artist

Great tut

~Ahmedqatar May 2, 2011 Professional General Artist

This will be helpful!

`GillianIvy May 3, 2011 Hobbyist General Artist

Glad to hear it! Thanks ;D

^neurotype May 2, 2011 Hobbyist General Artist

Ah yessss...testing a skin.

Okay, this is the part I get pretty crazy about, and everyone should too. (Also, you're so nice! Adding in all those little extras.)

`GillianIvy May 2, 2011 Hobbyist General Artist

Nice, or excessive? XDDD I really like being able to do whatever I want with my skins. Format every section... When you design it for other people who use it differently than you would, then you learn new bits. Like the em thing, that was figured out for an emote artist who often featured emotes in her blog and I needed a quick way to swap out the thumb formatting on the fly.

I always forget to format literature thumbs... Boo, I'm not adding anything on that here, as I've never done it so can't really tute about it

The skin will have to be submitted tomorrow, I am waaay too tired now and a lil bit hungry. Can't eat or sleep, must only do CSS.....

I think a lot of people either don't or can't fully test their skins. Because you really have to submit and make sure your preview was accurate. And non-premium can't. So let's forgive them

^neurotype May 2, 2011 Hobbyist General Artist

They're pretty much the same thing from my perspective

I keep forgetting to make that tutorial about lit codes! Aaaaugh. It's on my to-do list.

Ooo, food.

I did make one skin without a sub, and I still managed to test it...the preview isn't 100% up to scratch, but still. (For the record, it sucked. I figure I'm going to get skins out of my system while I have a subscription.)

More from `GillianIvy

Featured in Groups:

Details

Statistics

Designing a Journal Part Threeby `GillianIvy

The Journal Portal

Polls

What is your preferred drawing software?

deviantART [dee·vee·un'nt·ART]

Keep in Touch!

Deviousness

Add Media

Style