როდესაც თქვენ ყიდულობთ ჩვენს საიტზე ბმულების საშუალებით, ჩვენ შეიძლება მივიღოთ შვილობილი საკომისიო. აი, როგორ მუშაობს.
ეს სტატია პირველად გამოჩნდა ნომერი 216 .net-ის ჟურნალი - მსოფლიოში ყველაზე გაყიდვადი ჟურნალი ვებ დიზაინერებისა და დეველოპერებისთვის.
სიტყვა რეტრო მომდინარეობს ლათინური პრეფიქსიდან retro-, რაც ნიშნავს უკან ან წარსულში. ეს არის კულტურულად მოძველებული ან მოძველებული სტილი, რომელიც მას შემდეგ ფუნქციურად თუ ზედაპირულად კვლავ ნორმად იქცა. ეს ზოგადად გულისხმობს მინიმუმ 15 წლის რთველს.
ჩვენ შეგვიძლია გამოვიყენოთ რეტრო სტილი ჩვენს ნამუშევრებში მხოლოდ იმიტომ, რომ ის თავს კარგად გრძნობს ან განსხვავებულად გამოიყურება, ან იმიტომ, რომ ის მიჰყვება მიმდინარე ტენდენციას. მაგრამ სანამ ჩავუღრმავდებით ჩვენს ესკიზების წიგნებს ან ჩავუღრმავდებით Photoshop-ს, მნიშვნელოვანია გავარკვიოთ, რატომ ვგეგმავთ სტილის გამოყენებას და შეესაბამება თუ არა ის მოკლედ.
გირჩევთ დაუსვათ საკუთარ თავს შემდეგი შეკითხვა: არის თუ არა ბრენდი/პროდუქტი/მომსახურება დიდი ხნის განმავლობაში? როდესაც გადახედავთ მის ისტორიას, შეგიძლიათ იპოვოთ რეკლამა, შეფუთვა ან ბრენდი, რომელიც რეტროდ გამოიყურება ამ დღეებში? ან, არის თუ არა ეს უბრალოდ სერვისი, რომელიც არსებობდა როგორც ადრე, ისე დღეს, როგორიცაა რძიანი ან ფეხსაცმლის გამწმენდი? თუ პასუხი არის არა, მაშინ იკითხეთ: შეიძლება თუ არა ბრენდი/პროდუქტი/მომსახურება ასოცირებული იყოს წარსულ დღეებთან? მაგალითად, მძღოლის ან დამლაგებელი სერვისი, ძველი პროდუქტის რეპროდუქცია (მახსენდება VW Beetles) ან ტენდენცია, რომელმაც დაიბრუნა პოპულარობა. თუ ორივე ამ კითხვაზე პასუხი არის არა, მაშინ რეტრო სტილი შეიძლება არ იყოს საუკეთესო არჩევანი.
მიდის რეტრო
მე შევქმენი და დავაკოდირე ძალიან მარტივი დიზაინი, რათა წარმომეჩინა, თუ რისი გაკეთება შეგიძლია მხოლოდ ოთხი სურათით და რამდენიმე კარგი CSS-ით. ამ მაგალითის მიზანია მოგაწოდოთ რამდენიმე იდეა იმის შესახებ, თუ როგორ მიაღწიოთ რეტრო შეგრძნებას მარტივად და სწრაფად, ასე რომ თქვენ შეგიძლიათ ჩართოთ ის, რაც ისწავლეთ თქვენს დიზაინში.
თუმცა, მუშაობის დაწყებამდე რამდენიმე საკითხია გასათვალისწინებელი. ყველაზე მნიშვნელოვანი ეტაპი, სანამ რომელიმე დიზაინზე გადახვალთ, არის თქვენი განზრახული სტილის კვლევა. რეტრო შეიძლება ჩაითვალოს მხოლოდ 15 წლის წინ დაწყებული რაიმეს მნიშვნელობით, როდესაც თქვენი გონება ან კვლევა გაგიშვებთ. ჩემი საყვარელი პერიოდი 1920-იანი წლებია, რადგან ამ ეპოქაში რეკლამის უზარმაზარი ნაკადი იყო. მთავარი ფაქტორები, რომლებიც უნდა აღინიშნოს შთაგონებისთვის არის ფერების პალიტრები, ტიპოგრაფია, შაბლონები და ილუსტრაციის სტილი.
თქვენი შრიფტის არჩევანი ასევე ძალიან მნიშვნელოვანია, რადგან ბევრი რეტრო სტილი დიდწილად ეყრდნობა ძლიერი ტიპის გამოყენებას. შეიძინეთ რამდენიმე ონლაინ შრიფტის საიტზე. შეინახეთ თქვენი აღმოჩენები (იქნება ეს ეკრანის აკრეფა, ამონაჭრები თუ წიგნები), ასე რომ თქვენ შეგიძლიათ შეადაროთ თქვენი ტიპის არჩევანი იმ სტილთან, რომლისკენაც მიზნად ისახავთ.
შემდეგი, მე გირჩევთ, რომ თქვენი დიზაინი ქაღალდზე გადაიტანოთ. საუკეთესო რჩევა, რაც მე მომცეს, არის ის, რომ თქვენი კომპიუტერი არის ინსტრუმენტი. არასოდეს გქონდეთ შთაბეჭდილება, რომ თქვენ არ შეგიძლიათ დიზაინის გარეშე - ეს უბრალოდ უნდა დაგეხმაროთ თქვენი დიზაინის რეალიზებაში.
Photoshop-ში შესვლა
გახსენით PSD მაგალითების ფაილებში და ნახავთ, რამდენად მარტივია ეს დიზაინი სინამდვილეში. ეკრანზე შექმნისას, ერთი რამ რაც მახსოვდა იყო ეს: თუ შევძლებ მის სტილს CSS-ით, ვიდრე სურათის გამოყენებას, გავაკეთებ.
ვგეგმავდი ვებ შრიფტების გამოყენებას, ამიტომ სურათების ერთადერთი საჭიროება იქნებოდა ტექსტურა. მე ასევე მინდოდა თავი შემეკავებინა ნებისმიერი სურათის HTML-ში გამოყენებისგან, რაც დამრჩა სუფთა მარკირება. მიუხედავად იმისა, რომ ჩემს თავს კოდირებს არასდროს ვუწოდებდი, ვგრძნობ, რომ მნიშვნელოვანია ვიცოდე და გავიგო CSS-ის შესაძლებლობები - და შეზღუდვები. ეს ნამდვილად გხდით უკეთეს ვებ დიზაინერად.
მოსახერხებელი ხრიკი CSS-ით დიზაინის შექმნისას არის იმის ცოდნა, თუ რომელი ფენის სტილი Photoshop-ში საუკეთესოდ წარმოადგენს CSS-ით შექმნილ სტილებს. აქ არის ჩემი რამდენიმე წინადადება:
ფენის სტილი: ინსულტი
CSS თვისებები: -webkit-text-stroke, საზღვარი
ფენის სტილი: ბზინვარება
CSS თვისება: box-shadow (მე არ გამომიყენებია ეს მაგალითში, მაგრამ აღსანიშნავია)
ფენის სტილი: ჩამოაგდეთ ჩრდილი
CSS თვისება: ტექსტი-ჩრდილი
რჩევა – რომ მიიღოთ ეს 1px ხაზგასმა თქვენი ტიპის ბაზაზე, სცადეთ ეს პარამეტრები:
ფენის სტილი: ჩამოაგდეს ჩრდილი; 90 გრადუსი, მანძილი 1px, გავრცელება 0, ზომა 1px
CSS თვისებები: text-shadow: 1px 0 0 #color;
ტექსტურები და ნიმუშები
თქვენ შეგიძლიათ მარტივად შექმნათ ნახმარი, ძველი სკოლის შეგრძნება რეტრო დიზაინით, ტექსტურებისა და ნიმუშების ნარევის გამოყენებით. PSD-ს მაგალითში ნახავთ, რომ მე გამოვიყენე სამი სურათი ჩემი ტექსტურისთვის, რომელიც მოწოდებულია საიმონ ფოსტერის მიერ: simonfosterdesign.com/blog/my-work/texture-tutorial.
შერწყმის რეჟიმები და გამჭვირვალობა მნიშვნელოვანია ტექსტურებთან თამაშისას, თუ თქვენ გეგმავთ მათგან სურათების შექმნას, ვიდრე ცდილობთ ეფექტების ხელახლა შექმნას CSS-ით. გაითვალისწინეთ, რომ მე გამოვიყენე სხვადასხვა შერწყმის რეჟიმი და გამჭვირვალობის დონე ორივე სურათის თითოეულ ფენაზე. როდესაც ეფექტით კმაყოფილი ვიყავი, ფონის ნაწილი შევარჩიე კრამიტის გამოსახულების შესაქმნელად. მე ამოვიღე ეს ახალ ფაილში და გამოვიყენე ოფსეტი ხელსაწყო. აირჩიეთ ფენა, რომლის მოწყობა გსურთ, გადადით ფილტრი, ქვემოთ სხვა და აირჩიე ოფსეტი. დააყენეთ სლაიდერები თქვენი ტილოს ზომის პლიუს ან მინუს 50 პროცენტზე და გააუქმეთ! შეიძლება დაგჭირდეთ მისი ოდნავ შესწორება (გამოყენებით ბეჭედი ინსტრუმენტი, მაგალითად).
ერთხელ მე კმაყოფილი ვიყავი ჩემი ტექსტურით (მე გამოვცადე მისი კრამიტულობა Photoshop-ში ნიმუშის განსაზღვრით; თქვენ შეიძლება გირჩევნიათ მხოლოდ მისი გამოცდა კოდში), შემდეგ მე შევინახე ინტერნეტში, როგორც ოპტიმიზირებული JPEG. მე გამოვიყენე ეს ფაილი შემდგომი ორი ვერსიის შესანახად – უფრო მუქი, რომელიც შემეძლო გამომეყენებინა ჩემი ზოლიანი ნიმუშის ქვეშ და წითელი ვერსია წრეში გამოსაყენებლად. ერთადერთი სურათი, რომლის ექსპორტი მჭირდებოდა, იყო ზოლიანი ნიმუში, რომელიც გამოყენებულია დიზაინის ზედა და ქვედა ნაწილში. ამის შესაქმნელად მე უბრალოდ გამოვიყენე ნიმუშის შევსება, რომელიც არის PSD-ში. შეხედეთ ექსპორტირებულ სურათს სურათები საქაღალდე. ისევ შეგვიძლია დავაყენოთ ის განმეორდეს CSS-ში.
მარკირება და CSS
მარკირება მინიმალურია; არ არის საჭირო ძალიან ბევრი დივ ან კლასები. თქვენ ნახავთ მაგალითების ფაილებში, რომ ამას მხოლოდ სამი დივი სჭირდება, რათა გვქონდეს საკმარისი კაუჭები სტილისთვის. მოდით შევხედოთ იმ თვისებებს, რომლებიც მე გამოვიყენე:
საზღვრის რადიუსი
გამოსახულების შენახვის ნაცვლად, წრე იქმნება გამოყენებით საზღვარი-რადიუსი. უბრალოდ გამოიყენეთ თქვენი div-ის იგივე სიგანე:
border-radius: 350px;არ არის თავსებადი: IE7 და 8
ტრანსფორმირება
ეს არის ის, რაც ჩვენ გავაკეთეთ იმისათვის, რომ დავაყენოთ ჩვენი ტიპი დახრილზე:
-webkit-transform: rotate(-10deg) skew(-10deg); -moz-transform: rotate(-10deg) skew(-10deg); -o-transform: rotate(-10deg) skew(-10deg); transform: rotate(-10deg) skew(-10deg);ამჟამად არ არის თავსებადი: IE7, 8 და 9
მრავალი ტექსტი-ჩრდილი
მე გამოვიყენე ამ მკვრივი ოფსეტური ჩრდილის ხელახლა შექმნა ტიპზე ტექსტი-ჩრდილი მრავალჯერ. ეს არის სუფთა ხრიკი, თუ თქვენ იყენებთ მყარ ფერებს თითოეულ ჩრდილზე, ვიდრე RGBA:
text-shadow: 4px 9px 0 #3e2016, opacity: 0.75; 10px 9px 0 #3e2016, 18px 9px 0 #3e2016, 24px 9px 0 #3e2016, 20px 2px 0 #3e2016, 24px 2px 0 #3e2016; /* bottom left blur colour */ამჟამად არ არის თავსებადი: IE7, 8 და 9, Mozilla-ს ძველ ვერსიებთან
ტექსტი - შტრიხი
დიზაინში ვხედავთ, რომ წრეში არსებულ მთავარ ტექსტს აქვს მონახაზი ჩრდილის დაწყებამდე – ეს არის ჩემი პირველადი კვლევის დროს ნაპოვნი სტილის ხელახლა შექმნა.
ამისათვის ჩვენ ვიყენებთ ტექსტი - შტრიხი:
-webkit-text-stroke: 3px #8b150f;/* stroke weight and colour */აღნიშვნის ღირსია ტექსტის შევსება-ფერი აქაც. მე არ გამომიყენებია ეს დიზაინში, მაგრამ თუ გამოიყენებდი:
text-fill-color: transparent;ერთად ტექსტი - შტრიხი, თქვენ მიიღებთ გამჭვირვალე ტიპს საზღვრით. მშვენიერი ეფექტი, განსაკუთრებით ვინტაჟური შეგრძნებისთვის.
მიმდინარე თავსებადობა: მხოლოდ Safari და iOS
გამჭვირვალობა
მიუხედავად იმისა, რომ ეს მარტივია, აღსანიშნავია. წრეში ჩემს ძირითად ტიპს მცირე გამჭვირვალობის მინიჭებით, ტექსტურას ვიღებთ ტიპში. ეს ძალიან დახვეწილია, მაგრამ ეხმარება მას უფრო რეალისტურად იგრძნოს თავი:
opacity: 0.75;არ არის თავსებადი: IE7 და 8
უკვე იცით ეს ყველაფერი და გსურთ მეტი რჩევები დიზაინერისთვის? შეამოწმეთ W3C-ის სამუშაო მონახაზი ტექსტის მანიპულირებაზე, რათა დაინახოთ რამდენად შეგვიძლია გავაკონტროლოთ ონლაინ ბეჭდვაზე www.w3.org/TR/2011/WD-css3-text-20110215/#transforming.
დაბოლოს, რა შეიძლება ითქვას იმ საშინელ კითხვაზე, რომელსაც ხალხი სვამს ძველი ბრაუზერების (ან ზოგიერთ შემთხვევაში IE) სანაცვლოდ? პასუხია: რასაც ვერ ხედავენ, არ იციან, რომ აკლიათ. ვიფიქროთ ამაზე. თუ ვინმეს უნდა ენახა ეს დიზაინი IE8-ში, მაგალითად – რაც ყველაზე უარესი სცენარია 7-თან ერთად – დაინახავდა კვადრატს რამდენიმე ლამაზი ვებ შრიფტით. მთელი ტექსტურა ისევ იქ იქნებოდა, მაგრამ ისინი არ მიიღებდნენ რაიმე ლამაზ შტრიხებს ან ჩრდილებს და ტექსტი იქნებოდა ჰორიზონტალური და არა დახრილი.
სანამ თქვენ გაქვთ სუფთა მარკირება და არცერთი თქვენი სტილი არ არის საჭირო იმისათვის, რომ მომხმარებელმა გაიგოს მისი მნიშვნელობა, თქვენ არ გაქვთ საბაბი, რომ არ გამოიყენოთ CSS თქვენს აბსოლუტურ უპირატესობად. IE9 ნახტომი და მხოლოდ გაუმჯობესდება – ეს მართლაც საინტერესო დროა ვებ დიზაინერებისთვის.
მიიღეთ უახლესი Photoshop CS6 მიმოხილვა ჩვენი დის საიტიდან კრეატიული ბლოკი.
