Join for FREE | Take the Tour Lost Password?
Shop deviantART for the
holidays and save BIG!
Click here! :holly:
[x]

deviantART

 
Creative Commons License
Some rights reserved. This work is licensed under a
Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 License.
:icondhuaine:

Artist's Comments

This tiny tutorial contains basic tips on designing graphics for custom journal on deviantART. It was written for people who don't know much about CSS (if they did, they would know everything from this tutorial already). Please note: it assumes that CSS work would be done by someone who knows what they are doing and it does not warn against some solutions that might require advanced coding.

I wrote this for *amateur-manips club :) They're holding their first CSS contest now :aww:

If you have any questions, feel free to ask.

Full journal structure by `thespook - [link] .

--
LOL, first time using Creative Commons license. I probably chose wrong one :lol:

Daily Deviation

Given 2008-09-18

Custom Journal - Graphics Tut by *Dhuaine is a well written tutorial that explains the things you have to care about when working on journal layouts.This tutorial reveals a lot of valuable tips that are useful for beginners and advanced designer/coders. (Suggested by `ginkgografix and Featured by ^znow-white)

Comments


love 2 2 joy 1 1 wow 0 0 mad 0 0 sad 0 0 fear 0 0 neutral 0 0
:iconelandria:
This looks great and it will certainly be a help to people wanting to design layouts :nod:

One thing to note is that DA recommends 400px max width for the "front page" view so that 800x600 is still compatible even though the average is larger.

--
:faq: STOCK TERMS OF USE
:groups: #Dreamers-of-Avalon FREE EXCLUSIVE STOCK!
:groups: #StockandResources Get resourceful!

Would you like some cheese to go with that whine Madam?
:icondhuaine:
O.o Good to know :) I still create layouts compatible with 800x600, but I put 1024x768 in this tut because a few persons pointed out my 'old dinosaur standards', lol. xD And it's true I don't know anyone that still uses that tiny resolution O.o

--
...being so catty.
:iconelandria:
lol yep, but some laptops have small monitors and I prefer to be safe than have people whining at me that my layouts suck lol

--
:faq: STOCK TERMS OF USE
:groups: #Dreamers-of-Avalon FREE EXCLUSIVE STOCK!
:groups: #StockandResources Get resourceful!

Would you like some cheese to go with that whine Madam?
:icondhuaine:
Wow, I didn't know laptops could have such small resolutions o.o 10" screens usually have 1024xX I think... LOL. I can't imagine working with anything smaller :lol: It becomes impossible to operate the keyboard then. xD
Anyway, if the journal is coded properly, it would adjust to every resolution, 800x600 included. In the worst case scenario part of header/footer image would get cut off xD The thing that irks me most are sidebars. Sidebars narrower than 100px are useless, and they really start to look good in 1152xX+. In 800x600 there would be, like, 250px left for main text. It must look ridiculous XD

--
...being so catty.
:iconelandria:
Yup pretty much with the side bars, makes the main text almost obsolete :S

Fluid layouts are the way to go :nod: Though I don't know where we would be if we couldn't position backgrounds :noes:

--
:faq: STOCK TERMS OF USE
:groups: #Dreamers-of-Avalon FREE EXCLUSIVE STOCK!
:groups: #StockandResources Get resourceful!

Would you like some cheese to go with that whine Madam?
:iconaurei:
Tutek z czcionką, za którą nie przepadam. :lol:

Ogólnie do tego wszystkiego da się dojść metodą prób i błędów, a cała reszta cssa to już tylko kwestia wprawy, chociaż pewnie wielu osobom się przyda tut. ;)

Najgorsze jest to, że dev uparcie nie chce wyświetlać niektórych komend (cała sprawa z position=absolute/relative jest pogrzana totalnie) i trzeba rezygnować z rozwiązań normalnie działających na stronach. Css deva działa genialnie jeżeli chodzi o proste rozwiązania (tabelka z obrazkiem u góry, broń Boże nie wchodzącym pod tekst), ale każdy design wymagający chociaż trochę bardziej skomplikowanego kodu jest morderczy w wykonaniu. Wiesz, że moje tło tabeli, aby poprawnie działało musi być baaardzo długie, bo nie dało się go zmusić do powtarzania się?

--
Life is a tale
Told by an idiot, full of sound and fury,
Signifying nothing. ~William Shakespeare, Macbeth
:icondhuaine:
Fixed size layouts must die :headbang: There are so many browser + resolution configurations that webdesigners have to make their designs viewable by as many people as possible :#1:

In that case, everything would get sticked to top left and would be boring as hell :o
Hey, as someone who is experienced with dA css - have you run into cross-browser compatibility problems when pushing divs into header (journaltop) and footer areas (negative margin method)? :) I wondered if i.e. horizontal menu on the very top is always displayed properly. IE6 seems to have overlapping issues even with most simple custom css _-_

--
...being so catty.
:icondhuaine:
Narzekasz, czasowy nowy rumun to defaultowa czcionka i taką zostawiłam :lol:

Adminka tego klubu poprosiła mnie o kilka wskazówek, wg których lud powinien zrobić grafę, żeby działało - i w ten sposób powstał ten tut, dla ludzi, którzy pojęcia nie mają o cssie :) Metoda prób i błędów w przypadku dA może zająć sporo czasu xD

Position absolute i relative to absolutna masakra w IE6. Można to jeszcze ułożyć w normalnych przeglądarkach, ale naprawdę nie mam pojęcia, które układy będą działać w IE6. Loteria.
Dziwne O.o Szczerze mówiąc, spodziewałam się większych problemów z cssem dA. Najwięcej trudu przysporzył mi IE6, reszta poszła w miarę łagodnie. Niesamowite... jakim sposobem można bloknąć tło tabelki? >.> dA jest niesamowity. xD

--
...being so catty.
:iconelandria:
Yes. Lots. IE is spawn of Satan :| To be honest was discussing this issue with thespook the other day (actually I was screaming and muttering and he was going lol don't ask me) and I have decided forthwith to not even bother trying to make IE 6 understand anything... thats what thespook does too. Its too much of a frustrating pain in the ass, and 7 is almost as irritating. Lets face it, we design CSS journals for DA people, who "generally" have a small amount of intelligence when it comes to upgrading to the latest versions and at least a large percentage use foxy or opera et al.

People who "drop by" are never going to spend time reading peoples journals, they are just here to steal the art. (You know its true lol)

IE just doesn't like negative margins.. though apparently 7 is slightly better, its a fine line between good coding, DA's limited allowances and how far you are prepared to not code for IE.

....experienced... :lmao: who told you that? :lol:

--
:faq: STOCK TERMS OF USE
:groups: #Dreamers-of-Avalon FREE EXCLUSIVE STOCK!
:groups: #StockandResources Get resourceful!

Would you like some cheese to go with that whine Madam?
:iconandromeda-mirtle:
Jak kiedyś będę miała subskrypcję, to sobie poeksperymentuję :)

Czytam właśnie "Winnetou" i słowo "greenhorn" kojarzy mi się nieodmiennie z Old Shatterhandem :D

--
Chcesz sprawiedliwości? Wynajmij wiedźmina.
-----------------------
:star: ~indeed-stock :star:
-----------------------
98% of teenagers do or has tried smoking. If you're one of the 2% who hasn't, copy & paste this in your sig.

Found in these Groups:

group avatar #eCSSited
a place for all your CSS needs

Details

September 3, 2008
1.0 MB
1.0 MB
664×3201

Statistics

107
463 [who?]
11,057 (10 today)
260 (1 today)

Share

Link
Embed
Thumb

Site Map