μέγεθος για Full Page background site ;

Θέματα web + mobile design, development & cyberculture.

μέγεθος για Full Page background site ;

Δημοσίευσηαπό jeanmarat » 27.02.13, 11:50 pm

Ποιό είναι το κατάλληλο μέγεθος για ένα background που είναι full page ;

Εννοώ με ρύθμιση CSS που στρετσαρει την εικόνα να φαίνεται ΠΑΝΤΟΥ λίγο πολύ ίδια ανεξαρτήτως της ανάλυσης.

Καταλαβαίνω πως πρέπει κανείς να λάβει πολλές παραμέτρους :


α) Αριθμός χρηστών αναλυσεων οθόνης
β) Πραγματικό μέσο μέγεθος browser space. Καθώς όλοι λίγο πολύ έχουμε καποιο χώρο στον browser μας που τον πιάνουν τα bookmarks τα εργαλεία και τα μενού άρα η ανάλυση της οθόνης είναι λίγο παραπλανητική καθώς στο ύψος σίγουρα πρέπει να αφαιρεθούν κάποια pixels.
γ) Aspect ratio των οθόνων

Νομίζω πάντως πως είναι ασφαλές να πει κανεις πως οι πιο κοινές αναλύσεις είναι : 1920×1080 desktop
και laptop:
16:9 για 1366×768 , 16:10 για 1280×800

εψαξα και βρηκα μερικα sites με full background :


http://ringvemedia.com/
1024 × 683,
81,9kb , jpeg




http://www.benthomsonphoto.com/

1440x960 px
461kb , jpeg


http://www.megumi.it/
1000 × 750
190 kb , jpeg

http://www.flemingsteele.com/
1211 x 664
347kb , jpeg


http://www.hurttacollection.com/
1400 × 1050, jpeg


http://www.parachutejournalists.com/
1600 × 965
260 , jpeg


http://g2geogeske.com/
1900 × 1261
File size 278 KB

http://naczynia.welmax.pl/intro
1200 x 800
42,4 , jpeg


http://www.as-architecture.com/en/
1280 × 600
537 kb


http://stephan-siegrist.ch/de/home
728 KB
1800 × 1300


http://www.dannpetty.com/
2560x 1433 . 651 , jpeg

http://ines-papert.de/de/home
1800 x 1300
502kb, jpeg


http://phuketeventcompany.com/
1200 x 900 , 234 kb
jpeg


http://www.dunkerbeck.com/
1500 x 996 ,
400 KB , jpeg

http://www.doorworksco.com/
1200 x 803 ,
725 KB jpeg


http://www.teletech.com/
1440 x 912
296KB , jpeg

http://www.mediskokochbar.se/
1410 x 1035
255KB , jpeg


http://www.touralarm.de/
1025 x 526
183KB
jpeg

http://www.davidia-int.hr/
1500 x 1000
131 KB
jpeg


http://www.jochemgugelot.nl/
1504 x 1000
150 kb
jpeg


http://www.coalheadwear.com/
960x480
339
jpeg


κατά μέσο όρο :

έχουν 1426pixels πλάτος , 924 ύψος με aspect ratio (πλάτος / ύψος) = 1,6



Τι προτείνεται να βάλω στο Photoshop ;
jeanmarat
Member
 
Posts: 74
Εγγραφή: 01.03.10, 11:36 am

Re: μέγεθος για Full Page background site ;

Δημοσίευσηαπό Arty2 » 28.02.13, 2:09 am

Δεν είναι χρήσιμος ο μέσος όρος· αν το site είναι ήδη online μπορούν να βοηθήσουν τα στατιστικά επισκεψιμότητας. Όπως δεν θέλεις να κάθεσαι σε στενή καρέκλα στο λεωφορείο, μην μπαίνεις στην λογική να χωρίζεις τους χρήστες σου σε συνηθισμένους και ασυνήθιστους.

Αν δεν σε ενδιαφέρουν εκδόσεις του ΙΕ πριν τιν 9, υπάρχει και background-size εκ της CSS3.

Εναλλακτικά, για κάθε ανάλυση μπορείς να σερβίρεις διαφορετική εικόνα (θα σε ευχαριστούν οι χρήστες από κινητά) αλλά αυτό προϋποθέτει πως και το ίδιο το site είναι ελαστικό ή responsive.

Σαν τρίτη λύση —αν βοηθάει η εικόνα σου— μπορείς να χωρίσεις το γραφικό σου σε επαναλαμβανόμενο και μη, ώστε να έχεις το επαναλαμβανόμενο στο background και το πιο συμπαγές κομμάτι σε κάποιο element από πάνω του.
Άβαταρ μέλους
Arty2
Member
 
Posts: 233
Εγγραφή: 17.05.07, 7:35 pm

Re: μέγεθος για Full Page background site ;

Δημοσίευσηαπό sokalegga » 28.02.13, 8:04 am

Καλημέρα. Αυτό που γίνεται συνήθως σε αυτή την περίπτωση είναι

α) να σχεδιάσεις το αρχικό σου background σε μια τέτοια διάσταση ώστε να μπορεί να γίνει upscale αυτόματα (χωρίς να χρειαστείς να φορτώσεις άλλο φόντο ανάλογα με την ανάλυση). Εάν π.χ. σχεδιάσεις το φόντο σου σε ανάλυση 1280Χ720 (HD res), αυτό θα φαίνεται μια χαρά σε ανάλυση Full HD (1920Χ1080).

β) Ασχέτως αν το site σου είναι responsive ή όχι, μπορείς με τα Media queries του CSS3 spec να ορίσεις ακριβώς το φόντο που θες να φορτώνει για κάθε πιθανή διαφορετική ανάλυση. Το τίμημα είναι πως θα πρέπει να φτιάξεις μια γκάμα απο resized backgrounds για το site σου.

Πάντα μας ενδιαφέρουν τα στατιστικά, διότι αν π.χ. μπαίνουν πολλοί χρήστες στο site σου με αναλύσεις τύπου retina (που μπορούν να φθάσουν τα 2880×1800 πίξελ ή με φωτογραφικούς όρους 5 megapixels στον 15άρι Mac Pro !! ) τότε ναι, θα πρέπει να προβλέψεις και φόντο γι'αυτή την περίπτωση.

Αλλά όπως είπε και ο Αrty2 θα πρέπει να είναι ήδη Online το site σου
Υou Can Do Anything You Want As Long As It Makes Sense
Άβαταρ μέλους
sokalegga
Master Member
 
Posts: 3251
Εγγραφή: 22.07.04, 2:50 pm
Τοποθεσία: Τρίπολη

Re: μέγεθος για Full Page background site ;

Δημοσίευσηαπό jeanmarat » 28.02.13, 11:00 am

a)Το site μου ειναι online
b) Δεν ρωτάω πως γίνεται. Το έχω κάνει ήδη να φαινεται στρετσαρισμενο σε ολες τις desktop / laptop αναλυσεις (τα κινητα δεν με ενδιαφέρουν). Υπάρχει και το background-size: cover; ως γνωστόν αλλά και άλλοι CSS τρόποι.


Αυτό που ρωτάω είναι πως θα φαίνεται καλύτερα σε όλους (όπου όλοι μέσος όρος laptops και desktops).

Ε τι κάνει το CSS ; Εχω μια αρχική 1024 × 683 για να πιανει 1920 (μειον κατι) προφανως χάνει λίγο στην ποιότητα ;
jeanmarat
Member
 
Posts: 74
Εγγραφή: 01.03.10, 11:36 am

Re: μέγεθος για Full Page background site ;

Δημοσίευσηαπό crossbow » 28.02.13, 11:15 am

από τη στιγμή που το background αυξομειώνεται ανάλογα την ανάλυση τι εννοείς να "φαίνεται καλύτερα"; Να μην pixelαρει πχ αν γίνει μεγαλύτερο;
my website: http://www.crossbow.gr
my twitter delirium: http://www.twitter.com/crossbow_design

Δημήτρης Κλάγκος
Άβαταρ μέλους
crossbow
Old Member
 
Posts: 1149
Εγγραφή: 22.07.05, 7:52 pm
Τοποθεσία: Κέρκυρα

Re: μέγεθος για Full Page background site ;

Δημοσίευσηαπό jeanmarat » 28.02.13, 11:23 am

banding !

εχουμε καμια 10αρια gradient layers απανω.

διαβασα πως πρεπει να βαζεις noise filter κάτω από 1%.
το δοκιμασα σε άλλο PSD και δουλευε. Τώρα όμως είναι αργά στο υφιστάμενο που έχω ανεβάσει.

άλλη τεχνική ;
jeanmarat
Member
 
Posts: 74
Εγγραφή: 01.03.10, 11:36 am

Re: μέγεθος για Full Page background site ;

Δημοσίευσηαπό crossbow » 28.02.13, 11:34 am

Εσύ θέλεις να βγαίνει ολόκληρη η φωτογραφία κάθε φορά χωρίς να χάνεται κανένα κομμάτι της;
my website: http://www.crossbow.gr
my twitter delirium: http://www.twitter.com/crossbow_design

Δημήτρης Κλάγκος
Άβαταρ μέλους
crossbow
Old Member
 
Posts: 1149
Εγγραφή: 22.07.05, 7:52 pm
Τοποθεσία: Κέρκυρα

Re: μέγεθος για Full Page background site ;

Δημοσίευσηαπό jeanmarat » 28.02.13, 11:37 am

επειδη ειμαστε ακομα στη φαση σχεδιασμου.

Εχουμε ανεβασει την αρχική σελίδα.

Θέλω τις επόμενες σελίδες που θα ειναι πάλι με FULL PAGE background να ειναι με σωστή τεχνική.

Άρα με ενδιαφέρει πιο το καλυτερο μέγεθος να δουλέψουμε στο Photoshop χωρίς banding και ιστορίες.

Το να φαινεται παντου το εχουμε καταφέρει.

Το ΠΩΣ ειναι το θέμα. Πως θα γινει το καλυτερο δυνατον.
jeanmarat
Member
 
Posts: 74
Εγγραφή: 01.03.10, 11:36 am

Re: μέγεθος για Full Page background site ;

Δημοσίευσηαπό crossbow » 28.02.13, 11:50 am

το πρόβλημα δεν νομίζω να δημιουργείται τόσο από την τεχνική σαν τεχνική, αλλά από τη μεταβολή του μεγέθους της εικόνας.

Αν απλά θες να γεμίζει την οθόνη, ολόκληρη η εικόνα (χωρίς να χάνεται κομμάτι της πχ), τότε θα πρέπει να γίνεται stretch σε κάποιες αναλύσεις, οπότε banding ή μη banding έχεις παραμόρφωση της εικόνας.

Από εκεί και πέρα banding έχεις συνήθως σε χαμηλή ανάλυση, άρα σώσε τι φωτογραφία σου σε όσο καλύτερη ποιότητα γίνεται (αναλογικά με το μέγεθος). Αν έχεις πρόβλημα λογικά θα είναι όταν η εικόνα "μεγαλώνει" για να καλύψει μεγαλύτερο μέγεθος. Αν πηγαίνει προς τα "κάτω" δεν θα πρέπει να σου δημιουργεί πρόβλημα.
my website: http://www.crossbow.gr
my twitter delirium: http://www.twitter.com/crossbow_design

Δημήτρης Κλάγκος
Άβαταρ μέλους
crossbow
Old Member
 
Posts: 1149
Εγγραφή: 22.07.05, 7:52 pm
Τοποθεσία: Κέρκυρα

Re: μέγεθος για Full Page background site ;

Δημοσίευσηαπό jeanmarat » 28.02.13, 12:31 pm

Αν έχεις πρόβλημα λογικά θα είναι όταν η εικόνα "μεγαλώνει" για να καλύψει μεγαλύτερο μέγεθος. Αν πηγαίνει προς τα "κάτω" δεν θα πρέπει να σου δημιουργεί πρόβλημα.


Αυτό είναι επιστημονικά τεκμηριωμένο ;

Θέλω να πω είσαι σίγουρος ;


( σε ευχαριστω παντως για όσα εχεις γραψει μεχρι στιγμης)
jeanmarat
Member
 
Posts: 74
Εγγραφή: 01.03.10, 11:36 am

Re: μέγεθος για Full Page background site ;

Δημοσίευσηαπό crossbow » 28.02.13, 12:40 pm

Όχι δεν είναι επιστημονικά τεκμηριωμένα, ειδικά από στη στιγμή που δεν ξέρω πως έφτιαξες και τι μορφή έχει η αρχική σου εικόνα. Αν την έχεις φτιάξει πχ σε Α3 και σε 300dpi, κατεβάζοντας την σε 72 και σε μέγεθος για οθόνη, μπορεί να χάσεις λεπτομέρειες και να υπάρξουν προβλήματα.
Πάντως δεν χάνεις τίποτα να το δοκιμάσεις από 1920x1200 να μικραίνει... Δες τι θα σου βγάλει. Έχει άλλα αρνητικά αυτό, αλλά τουλάχιστον θα ξέρεις τι φταίει.

Το jpg που λογικά σώζεις την εικόνας σου, έχει και αυτό συμπίεση. Γενικά είναι πολλοί παράγοντες που δεν ξέρουμε και αυτό που καταλαβαίνω εγώ από αυτά που έχουν γραφτεί, είναι οτι μάλλον το "πρόβλημα" δεν είναι στη μέθοδο που χρησιμοποιείς για να μεγαλώσεις ή να μικρύνεις την εικόνα στο site, αλλά στην ίδια την εικόνα.
my website: http://www.crossbow.gr
my twitter delirium: http://www.twitter.com/crossbow_design

Δημήτρης Κλάγκος
Άβαταρ μέλους
crossbow
Old Member
 
Posts: 1149
Εγγραφή: 22.07.05, 7:52 pm
Τοποθεσία: Κέρκυρα

Re: μέγεθος για Full Page background site ;

Δημοσίευσηαπό sokalegga » 28.02.13, 12:41 pm

To banding είναι αναπόφευκτο στα gradients. Μια τεχνική (που είναι κατά τι πιο πολύπλοκη απο την απλή προσθήκη θορύβου) είναι αυτή:

http://slodive.com/photoshop/how-to-correct-banding-in-your-gradients-using-photoshop/

Μην ξεχνάς επίσης πως ενδέχεται το ίδιο το monitor σου να παρουσιάζει έντονο banding σε οποιοδήποτε gradient. Εκτός απο τα πραγματικά εξαιρετικά monitors η συντριπτική πλειοψηφία εμφανίζει κάποιας μορφής gradient banding.

Σε αυτή την περίπτωση δεν μπορείς να κάνεις και πολλά.
Υou Can Do Anything You Want As Long As It Makes Sense
Άβαταρ μέλους
sokalegga
Master Member
 
Posts: 3251
Εγγραφή: 22.07.04, 2:50 pm
Τοποθεσία: Τρίπολη

Re: μέγεθος για Full Page background site ;

Δημοσίευσηαπό jeanmarat » 28.02.13, 12:48 pm

Αν την έχεις φτιάξει πχ σε Α3 και σε 300dpi, κατεβάζοντας την σε 72 και σε μέγεθος για οθόνη


ενα εγχειριδιο του Photoshop λεει πως είτε 300 βαλεις είτε 72 εφόσον είναι για web και όχι print δεν έχει καμία σημασία.

Αφού είναι dots per inch αλλά εδώ μιλάμε για pixels.


Τον τρόπο του slodive τον εχω υποψη αλλά τον ανακάλυψα κατόπιν εορτής.
Θα τον εφαρμόσω να δουμε τι θα δουμε.
jeanmarat
Member
 
Posts: 74
Εγγραφή: 01.03.10, 11:36 am

Re: μέγεθος για Full Page background site ;

Δημοσίευσηαπό crossbow » 28.02.13, 12:49 pm

ναι αλλά δεν πρόκειται να ανεβάσεις σε site φωτο 300dpi 3000χ3000 px.... θα την μικρύνεις....
my website: http://www.crossbow.gr
my twitter delirium: http://www.twitter.com/crossbow_design

Δημήτρης Κλάγκος
Άβαταρ μέλους
crossbow
Old Member
 
Posts: 1149
Εγγραφή: 22.07.05, 7:52 pm
Τοποθεσία: Κέρκυρα

Re: μέγεθος για Full Page background site ;

Δημοσίευσηαπό jeanmarat » 28.02.13, 12:53 pm

δεν εχω τετοια φωτο ουτως ή άλλως
jeanmarat
Member
 
Posts: 74
Εγγραφή: 01.03.10, 11:36 am


Επιστροφή στο II.I Ιστοσχεδίαση + Mobile + Διαδίκτυο

Μέλη σε σύνδεση

Μέλη σε αυτή την Δ. Συζήτηση : Δεν υπάρχουν εγγεγραμμένα μέλη και 1 επισκέπτης

Visual Communication Designers Club

Το Visual Communication Designers Club, το μεγαλύτερο Ελληνικό online design forum, αποτελεί μια Ελληνική κοινότητα σχεδιαστών οπτικής επικοινωνίας, υπό την ευρύτερη έννοια του όρου, θέλοντας να συμπεριλάβει στα μέλη της κάθε ειδικότητα και βαθμίδα όσων σπουδάζουν ή εργάζονται στον χώρο της επικοινωνίας, έντυπης, διαδικτυακής, τρισδιάστατης ή εφαρμογών πολυμέσων

cron