HOME | DD
Pyek β Artistic Journal Skins for Beginners: Pt I
Published: 2012-04-22 21:57:34 +0000 UTC; Views: 13728; Favourites: 862; Downloads: 146
Redirect to original
Description
Edit 13/12: Revised and updated-looking tut says almost the same exact things as it did before! Now with woodland creatures!
Thanks so much to everyone who has commented on and favorited these tuts. It really means the world when I know it's all been useful to someone.
-------------------------------
My goal is to explain in laymen terms what I learned trying to wriggle my way through CSS when I first started. I am not by any means an expert on the subject of dA journal skins.
That said, if you want a tutorial on fancy CSS, this isn't the tutorial for you. These tutorials will focus more on using a simple background image to make an artistic-looking journal, and just shifting basic essential CSS around to suit--nothing very advanced. It is, as it says, for beginners who are, in fact, beginning. c:
I hope someone will find this useful. Please comment if anything is unclear or you have additional questions or comments.
Complimentary Tutorials...
-------------------------------
Do you like the journal skin example used in this Tutorial? Or just want to see it in action? See it here , or install it to your journal here .
Related content
Comments: 111
Thanks! This is nice and simple. I know the css part but the division of the stuff always eludes me
π: 0 β©: 0
This is a really great tutorial! I'm going to try to make my own Journal skin using this! <3 ^^
π: 0 β©: 0
Finally! This is exactly hat I've been looking for! Thank you so much for taking the time to explain this to beginners. I'll be using this is the future when i get around to drawing a skin
π: 0 β©: 1
Well I'm glad you found it! 
π: 0 β©: 1
Sure! Right hereΒ sugarthief.deviantart.com/jourβ¦
π: 0 β©: 1
Awesome, thanks! I'll go check it out
π: 0 β©: 0
I have made a lot of journal skins thanks to this tutorial! I have credited you on all of them.
π: 0 β©: 1
Thank you so much! I'm very glad this has been useful to you. :3 Thx for letting me know.
π: 0 β©: 0
This is something I am determined to try - I get fed up of reading the heavily coded tutorials because like or lump, noone ever seems to do it from an "artists" perspective! I paint, I don't do code, so this hopefully will make sense. So TY.
(Course whether I achieve it will be determined by whether I can actually make it appear on the page!)
π: 0 β©: 0
*flails out of joy*
GAHHHH!
This is already super easy to understand! Can't wait to mess around with it!
π: 0 β©: 0
With the width of 580, you mean inc. the dragon or just the squares?
π: 0 β©: 0
Hopefullly I'll finally beable to make my own journal skins with this new knowledge :0
π: 0 β©: 0
finally tutorial that can understand
thank you so much
its will help me a lot :3
now i just need to design the skin T_T
π: 0 β©: 0
you said 580 pixels wide, but how tall? very amazing tutorial btw
π: 0 β©: 2
Any height! I suggest making the top and bottom parts however large your graphics there are, and make the repeating center piece anywhere from 200-300px ish. That way it will remain nice and short if you ever post a very short journal entry and not have loads of empty space beneath. But because the center repeats, it will simply multiply to accommodate larger entries. But there is no set height, do whatever you think looks and works best for you.
(sorry for the very late reply..!) And thanks! c:
π: 0 β©: 1
oooooooooooooooh omg wow i totally wasn't thinking, of course the middle repeats thanks haha
π: 0 β©: 0
The height adjusts to how many lines you will type, so it doesn't really matter, I think...
π: 0 β©: 1
Ahh one problem MY GIMP DOESNT LOOK LIKE THIS!?!?!?!?!?!
π: 0 β©: 1
Ahh thank you will be using this to make my own skin
π: 0 β©: 0
so if the width is about 600 minimum then how much is height? o-o
π: 0 β©: 1
Any height! I suggest making the top and bottom parts however large your graphics there are, and make the repeating center piece anywhere from 200-300px ish. That way it will remain nice and short if you ever post a very short journal entry and not have loads of empty space beneath. But because the center repeats, it will simply multiply to accommodate larger entries. But there is no set height, do whatever you think looks and works best for you.
(sorry for the very late reply..!)
π: 0 β©: 1
Ah ok thanks! And no problem x3, at least you replied ^^.
π: 0 β©: 0
Hello! This tutorial was very helpful to me! But, I have one question: Is it fine to upload my sections here? Or should I just slap it onto photobucket or something?
π: 0 β©: 1
By upload here, do you mean sta.sh? Because you can certainly use that, or photobucket, or imageshack. Anywhere that gives your image a direct URL.
(sorry for the really late reply, I haven't been around dA lately)
π: 0 β©: 1
This is wonderful! I'm super excited for part 2. I've always wanted to do a custom journal skin with my own art, but never had any idea how!
π: 0 β©: 0
Can't I use any program other than Photoshop?
π: 0 β©: 1
Yes, you can use any program you like! Heck, you could use Windows Paint if you wanted to. c:
The process is still the same; draw your images, break it up into 3 pieces, upload them somewhere, and plug their URLs into your CSS.
π: 0 β©: 1
Yesss!!!I'll be able to make my own journal skin(s)!!!XDDD
π: 0 β©: 0
Hello!
This is a very helpful tutorial --
But I'm not sure what size to make my canvas ;u;
Any suggestions/tips?
π: 0 β©: 1
If you want to accommodate the majority of computers, I wouldn't make the canvas any larger than 600-650 pixels wide. If it's much larger, a lot of slightly smaller screens will cut off the right side of your skin. Just about any length will work though, especially because your repeating center will adjust accordingly.
Then again, it also depends on where you are displaying your journal. If you keep it on your homepage, then keeping it narrow is important lest it get cut off. If you only have it visible on after clicking on the 'journal' tab, though, then you have a lot more wiggle room for a much wider skin.
π: 0 β©: 0
So, I used this tutorial to make a journal skin. I went to submit it (Not sure I even did that right-( As far as uploading a journal skin you want no one else to use) but its telling me Css Error: Forbidden Property (token: Paddling) Help please? XD
π: 0 β©: 2
Hello! That error occurs when you have an invalid property and it's often chalked up to a mere typo. In this case, "Paddling" should be "Padding". Just read through your CSS quickly wherever you used padding, and find the one with the typo and fix it.
π: 0 β©: 1
OTL //feels stupid. So, I fixed that and a few other things but new problems arised lol. XD //notes with image link and such
π: 0 β©: 1
Don't feel stupid! xD It's amazing how frequently a typo is the culprit whenever I proof somebody's CSS. I've been subject to such mistakes as well (...often!).
π: 0 β©: 0
Ok I figured out how to upload it, but I am still getting the same error on the Paddling ~
π: 0 β©: 0
sorry i faved in "stamps" it's so my sister can find it! lol!!! genius by the way!!!
π: 0 β©: 1
Hah, np and thanks for faving, you can fav it wherever you like! xD Thank you so much!!
π: 0 β©: 0
im gonna try this :3 i have very little knowledge of CSS but i still want to try a custom journal skin 
π: 0 β©: 1
Hi! Thanks for commenting, I hope it's easy enough if you give it a try. If anything's too confusing, just let me know and I'll be happy to try and help. ^_^ I would love to see what you make when you're finished, if you would feel like sharing!
π: 0 β©: 1
no problem! I am going to give it a shot most likely during christmas break when work dies down. 
π: 0 β©: 1
Awesome, I'll look forwards to seeing it!
And thanks, I 'm really glad to hear that! <3
π: 0 β©: 1
| Next =>