კარგი დღე, ძვირფასო მკითხველებო. დღეს გადავწყვიტე დამემტკიცებინა, რომ სჯობს თეორიის პრაქტიკაში შესწავლა. მაშინაც კი, თუ დამწყები ხართ, შეგიძლიათ მიაღწიოთ კარგ შედეგს ფაქტიურად ერთ საათში, Photoshop-ის არაფრის გაგების გარეშე! შეხედეთ, ეს სურათი მთლიანად გრადიენტების წყალობით შეიქმნა. ისინი გამოიყენება სხვადასხვა ელემენტებზე და სხვადასხვა ვარიაციებში.
თუ ამ სტატიას ბოლომდე წაიკითხავთ, თქვენ არა მხოლოდ ისწავლით როგორ გააკეთოთ გლუვი ფერის გადასვლის პროცესი Photoshop-ში, არამედ გამოიყენებთ ამ ცოდნას პრაქტიკაში ტექსტთან, ფორმებთან მიმართებაში, შექმნით მშვენიერ მოციმციმე ბრილიანტს და ბევრ სხვას.
ეს სურათი უკვე გადავიღე. თუ გინდა, შეგიძლია თავად შექმნა ზუსტად იგივე, და შესაძლოა უკეთესიც, მაგრამ მე გასწავლი სხვა მაგალითის გამოყენებით. რომელი? შეიტყვეთ სტატიის ბოლოს. თქვენთან ერთად დავხატავ და ამავდროულად აღვწერ პროცესს, მე თვითონ ჯერ კიდევ არ ვიცი, რა გამოვა. ამის წყალობით, მე ვხედავ, რა პრობლემები შეიძლება შეგხვდეთ და დაგეხმარებით მათ მოგვარებაში.
საბაზისო ცოდნა და ყოველთვის გამარჯვების ერთი საიდუმლო
ასე რომ, ჯერ უნდა გავხსნათ Photoshop. გირჩევთ ჩამოტვირთოთ ეს პროგრამა ( აქ შეგიძლიათ შეიძინოთ ლიცენზირებული ვერსია ). მასზე უკეთესს ვერასოდეს იპოვით. თუ გეშინიათ, რომ არ დაეუფლებით მას და დახარჯავთ ფულს, პირველივე ცდის შემდეგ მთლიანად დაივიწყებთ პროგრამას, შეგიძლიათ სცადოთ ონლაინ სერვისი https://editor.0lik.ru/ . ბევრად უფრო მოსახერხებელია გქონდეს საკუთარი პროგრამა და ძალიან მალე მიხვდები რატომაც.
ასე გამოიყურება Photoshop-ის 2015 წლის ვერსია, თუ თქვენ გაქვთ განსხვავებული გამოცემა, არ ინერვიულოთ. ყველაფერი დაახლოებით იგივე იქნება. თქვენ გაქვთ ცოტა ნაკლები არჩევანი და ეს არის ერთადერთი განსხვავება.
ჩვენ ვქმნით ახალი დოკუმენტი.
ზომის არჩევა ჩემთვის ერთ-ერთი ყველაზე რთული საკითხია. საფუძვლად ავიღე მაქსიმალური ზომებისურათები გამოქვეყნებისთვის სოციალური ქსელები. 800x500, მაგრამ, როგორც გესმით, ეს არ არის მთავარი. ეს ყველაფერი დამოკიდებულია მიზნებზე და ამოცანებზე, რომლის შესრულებასაც აპირებთ Photoshop დახმარება.
შეხედეთ, პანელში მარჯვნივ არის ყველა ძირითადი ღილაკი, გრადიენტის ჩათვლით. თუმცა, ახლა მისი პოვნა შეუძლებელია. როგორ ასე? მე თვითონ წავაწყდი ამ პრობლემას, როდესაც დავიწყე Photoshop-თან მუშაობის სწავლა. თქვენ კითხულობთ სტატიას, მაგრამ ინფორმაციის ნახევარი უნდა მოძებნოთ მესამე მხარის წყაროებში. Google, Google, Google.
ძალიან ჭკვიანმა მკითხველმა, რომელმაც ყველაფერი მშვენივრად იცის, მაპატიოს თემიდან მცირე გადახრები. მე მინდა, რომ ბლოგის ყველა ვიზიტორმა შეძლოს თვალი ადევნოს ჩემს გაკვეთილებს. შესაძლოა, ოდესმე ეს ძალიან გამოგადგებათ. დიდ დროს დაზოგავს.
თითქმის ყველა ღილაკის ქვედა მარჯვენა კუთხეში, გამადიდებელი შუშის გარდა, არის რაღაც ისრის მსგავსი. ეს იმაზე მეტყველებს, რომ ღილაკში რამდენიმე ინსტრუმენტია დამალული.
გააჩერეთ რამდენიმე წამი მარცხენა ღილაკიდააწკაპუნეთ ღილაკზე დამატებითი მენიუს გასახსნელად და გრადიენტის არჩევისთვის.
კიდევ ერთი დამატებითი მენიუ გაიხსნა ზედა. იგი გამოიყენება ექსკლუზიურად გრადიენტებისთვის. დააწკაპუნეთ ტექსტზე - ზევით, ფუნჯზე გაიხსნება სპეციალური ტექსტური მენიუ და... კარგად, თქვენ მიიღებთ იდეას.
დააწკაპუნეთ ისრზე ფერის ხატის გვერდით. სტანდარტული გადასვლები ან თქვენ მიერ ატვირთული გადასვლები ინახება აქ.
თუ არ თვლით საკუთარ თავს დიზაინის გენიოსად, მაშინ გირჩევთ ჩამოტვირთოთ უფასო შაბლონები ინტერნეტიდან. უამრავი მათგანია. ჯერ ერთი, ეს დაზოგავს დროს და მეორეც, რამდენიმე მსგავსი ვარიანტი ჩვეულებრივ გაერთიანებულია შექმნილ თემაში ერთიანი სტილი. ეს შეიძლება გამოყენებულ იქნას ერთ სურათზე უპრობლემოდ და ის თითქმის ყოველთვის კარგად გამოიყურება.
ახალი შაბლონების დაყენება არ არის პრობლემა. ჩამოტვირთეთ ისინი ინტერნეტიდან, შემდეგ აირჩიეთ თხილი ზედა მარჯვენა კუთხეში და იპოვეთ ბმული "ჩამოტვირთვა...".
აირჩიეთ საქაღალდე გადმოწერილი ფაილებით თქვენს კომპიუტერში და შეინახეთ.
ისინი დაემატება სიის ბოლოში.
შეავსეთ
ახლა ვისწავლოთ შევსება. აირჩიეთ თქვენთვის სასურველი ნებისმიერი ვარიანტი (მის შექმნას ცოტა მოგვიანებით მოვახდენთ) და დააწკაპუნეთ მასზე. გეჭიროთ მაუსის მარცხენა ღილაკი ეკრანის ნებისმიერ ადგილას და გადაადგილდით ნებისმიერი მიმართულებით. ფერის გადასვლის ადგილმდებარეობა დამოკიდებულია მასზე.
ნახე განსხვავება.
შეგიძლიათ დატრიალდეთ სადმე.
იმისათვის, რომ თქვენი ხაზის მოძრაობა არ გადაინაცვლოს და გრადიენტი არ დაბინდდეს, დააჭირეთ Shift ღილაკს, სანამ მიმართულებას ადგენთ.
ხედავთ, ფერის გადასვლა ახლა ხდება ცენტრში. ჩვენ უფრო დეტალურად განვიხილავთ პარამეტრებს, როდესაც ვქმნით საკუთარ გრადიენტს. ახლა მხოლოდ ცენტრის ცვლაზე ვისაუბრებ. დააწკაპუნეთ ამ ფირფიტაზე.
მარცხნივ დააწკაპუნეთ ქვემოთ მოცემულ ფერზე და გადაიტანეთ იგი მარცხნივ ან მარჯვნივ.
ეს არის ის, რაც მე დავამთავრე.
როგორ გამოვიყენოთ გრადიენტი ტექსტზე, რათა ასოები თანამედროვედ გამოიყურებოდეს
ახლა დავწეროთ რამე. აირჩიეთ შესაბამისი ღილაკი.
თუ თქვენ გჭირდებათ ზომის ან შრიფტის შეცვლა, ყურადღება მიაქციეთ პანელს ეკრანის ზედა ნაწილში. იქ ყველაფერი მარტივია.
ახლა დააჭირეთ Ctrl და ამავე დროს დააჭირეთ ახალი ტექსტის ფენის ხატულას. ფრთხილად იყავით, თქვენ უნდა დააჭიროთ არა ტექსტს, არამედ მართკუთხედს, როგორც ეს ნაჩვენებია ქვემოთ მოცემულ ეკრანის სურათზე.
ახლა შევქმნათ ახალი ფენა. პრობლემის გადაჭრის სამი ვარიანტია: ერთდროულად დააჭირეთ Shift, ctrl, N; ჩვენ ვიყენებთ პანელს ზედა, იპოვეთ იქ "ფენა - ახალი - შექმნა"; გამოიყენეთ ღილაკი სწრაფ მენიუში მარჯვნივ. ქვემოთ სურათზე მე ვაჩვენე ის ისრით.
ახლა, ასოების კიდეების გასწვრივ ხაზგასმის ამოსაღებად, შეგიძლიათ დააჭიროთ არჩევანს და შემდეგ დააჭიროთ სურათის ნებისმიერ ნაწილს. ეს არის შედეგი.
ტექსტთან მუშაობა ამით არ მთავრდება. შეხედეთ, ჩვენ გვაქვს 2 ფენა: ერთი გრადიენტით, ხოლო მეორე ასოებით. რატომ მოხდა ეს იქ? ავუხსნი, როგორც შემიძლია. თუ გაუგებარია დაწერეთ კომენტარებში. თქვენ დაწერეთ ტექსტი. Photoshop-მა გააცნობიერა, რომ ეს ასოები იყო და შემოგვთავაზა, რომ უფრო დიდი, პატარა, შრიფტის შეცვლა და ა.შ.
შემდეგ თქვენ აირჩიეთ ეს ფრაგმენტი. ჩვენ შევქმენით ახალი ფენა, ანალოგიის გამოსაყენებლად, ქაღალდიდან ტრაფარეტი ამოვიღეთ და შევავსეთ. ამ დროს Photoshop დაიკარგა. მან შეწყვიტა თქვენი წერილების ნახვა. მისთვის ეს არის რაღაც სურათის ნაწილი, როგორიცაა რომბი, კვადრატი ან წრე ამოჭრილი ცენტრით. თუ ფენაზე ასოებით სამუშაოდ მიდიხართ, არ გამოგივათ, თუ გსურთ ტექსტზე გრადიენტის გამოყენება, იგივე.
თუ ახლა გსურთ ტექსტის გადატანა სადმე და გადახვალთ შესაბამის განყოფილებაში და შემდეგ დაიწყებთ მის მოძრაობას ისრით, მაშინ ყველაფერი წავა.
ჩვენ ვხსნით ტექსტის ფენას დაბნეულობის თავიდან ასაცილებლად. დააწკაპუნეთ მასზე მარჯვენა ღილაკით და აირჩიეთ სასურველი ვარიანტი.
გრადიენტების ტიპები, ფორმების შევსება და ვარსკვლავების შექმნა
თუ ყურადღება მიაქციეთ ზედა გრადიენტულ პანელს, შეიძლება შეამჩნიოთ, რომ ისინი სხვადასხვა ტიპისაა: ხაზოვანი, რადიალური, კუთხოვანი, სარკე ან ბრილიანტი. ძნელი არ არის განსხვავებების დანახვა, თქვენ არ გჭირდებათ სტატიების წაკითხვა, უბრალოდ გახსენით ცარიელი ფიქალიდა შეეცადეთ გამოიყენოთ ერთი ან სხვა ვარიანტი. ნახეთ რა მოხდა.
ერთადერთი, რაც უნდა აღინიშნოს, არის ის, რომ თუ გსურთ ნახოთ სრულყოფილი შედეგი, როგორც ჩემს სურათზე, ისარი უნდა იყოს მიმართული ცენტრიდან.
ახლა დავუბრუნდეთ ჩვენს სურათს. ნება მომეცით გასწავლოთ ერთი საინტერესო ტექნიკა. ფერის გადასვლები შეიძლება გამოყენებულ იქნას თქვენს მიერ დახატულ ფორმებში. ეს ძალიან სასარგებლოა, განსაკუთრებით მათთვის, ვინც გეგმავს ვებსაიტების შექმნას.
ასე რომ, აირჩიეთ მართკუთხედი ან წრე. არ აქვს მნიშვნელობა.
ახლა შევსების ფერი.
მოდით გადავიდეთ გრადიენტების განყოფილებაში.
აქ გვჭირდება რომბი.
ხედავთ, საინტერესო ეფექტი გამოვიდა, მაგრამ თეთრი ფერი ყველაფერს აფუჭებს. საჭიროა გამჭვირვალე. შეგიძლიათ იპოვოთ შაბლონების შიგნით. თუ შაბლონის შიგნით ხედავთ მსგავს გისოსს, ეს არის ის, რაც ჩვენ გვჭირდება.
ითამაშეთ პარამეტრებით და მიიღებთ თქვენს იდეალურ ვარიანტს.
ახლა მოდით ამ ფლეშის კლონირება. აირჩიეთ მოძრაობა. უბრალოდ დააჭირეთ ღილაკს.
ახლა გეჭიროთ alt და გადაიტანეთ დუბლიკატი გვერდზე.
ეს არის შედეგი, რაც მე მივიღე.
შექმენით ახალი გრადიენტი და ღილაკები საიტებისთვის
და ბოლოს, მე გეტყვით, თუ როგორ უნდა შექმნათ გრადიენტები ნულიდან და ამავდროულად ჩვენ გავიგებთ მათ პარამეტრებს. მოდით შევქმნათ ლამაზი ღილაკი, არა? ჩემს სურათს დავამატებ მართკუთხედს მომრგვალებული კიდეებით.
ასე გამოიყურება ის. ამჯერად ჩვენ არ გამოვიყენებთ შიდა შევსებას. მისი მეშვეობით ახალ შაბლონთან მუშაობა არც ისე მოსახერხებელია. დაე, ახლა მხოლოდ შავი იყოს.
აირჩიეთ ნაცნობი ხელსაწყო და დააწკაპუნეთ დიზე.
ახალი გრადიენტები იქმნება ძველის საფუძველზე. დააწკაპუნეთ რომელიმეზე. ძველი ვერსიაარსად არ გაქრება. შემდეგ უბრალოდ შექმენით ახალი სახელი და შეინახეთ იგი.
ზედა საკონტროლო წერტილების გამოყენებით შეგიძლიათ აკონტროლოთ გამჭვირვალობის დონეები.
ქვედაები გამოიყენება ფერთან მუშაობისთვის. დიაპაზონის გასაფართოებლად დააწკაპუნეთ ნებისმიერ წერტილზე და ის გაორმაგდება.
თქვენ შეგიძლიათ შექმნათ რამდენიც გსურთ.
იმისათვის, რომ გარდამავალი გამოიყურებოდეს თანამედროვე, თქვენ უნდა გაამარტივოთ ფერები. არ შეეხოთ ამ ინდიკატორს და ყველაფერი კარგად იქნება. ეს უნდა იყოს 100%. მზადაა. შეგიძლიათ დააჭიროთ "OK" ან "შენახვა" - ეს ყველაფერი დამოკიდებულია თქვენს სურვილზე.
ახლა ჩვენ ვიმეორებთ იმას, რაც ახლა გავაკეთეთ ტექსტთან დაკავშირებით. დააჭირეთ ctrl, დააწკაპუნეთ სასურველი სტილის ღილაკზე ცენტრში და შექმენით ახალი მასზე დაყრდნობით.
ახლა დაამატეთ გარდამავალი და voila.
მოდით დავამატოთ ტექსტი ღილაკზე და ეს არის ის. გაუგებარია, რატომ დასრულდა საჭირო. სხვათა შორის, შეგიძლიათ ჩამოტვირთოთ ჩემი წყარო, თუ გსურთ ( ჩამოტვირთეთ წყარო gradient.psd ). შეგიძლიათ გახსნათ ის Photoshop-ში და გააუმჯობესოთ ჩემი სურათი. ვფიქრობ, არ იქნება რთული.
აბა, სულ ესაა. ახლა თქვენ საკმაოდ ბევრი იცით გრადიენტების შესახებ. თუ თქვენ ხართ დიზაინერი, განლაგების დიზაინერი, ვებსაიტის შემქმნელი ან გსურთ გახდეთ და ეს გაკვეთილი ნამდვილად გამოგადგებათ, გამოიწერეთ ბიულეტენი და გაიგეთ მეტი იმის შესახებ, რაც გაინტერესებთ. ასევე შეგიძლიათ ყურადღება მიაქციოთ ამ საიტს: https://photoshop-master.org/disc149/ . აქ შეგიძლიათ იპოვოთ ღრუბელი როგორც ფასიანი, ასევე უფასო კურსები, რომელიც გასწავლით რეალურ, პროფესიონალურ მუშაობას Photoshop-თან.
წარმატებებს გისურვებთ და ისევ გნახავთ.
მოხარული ვართ მოგესალმოთ ჩვენს მომავალ გაკვეთილზე მუშაობის შესახებ Adobe Photoshop. ამ სტატიაში ვისაუბრებთ იმაზე, თუ როგორ შევქმნათ გლუვი გადასვლები პროგრამაში სურათებს/ფერებს შორის საზღვარზე. ეს ძალიან სასარგებლო უნარია, რომელიც აუცილებლად დაგჭირდებათ, ამიტომ დავიწყოთ!
ფერებს შორის გლუვი გადასვლის გაკეთება
იმიტომ რომ Photoshop არის პროფესიული პროგრამასურათის დამუშავება, ძალიან ხშირად ერთი და იგივე შედეგის მიღწევა შესაძლებელია რამდენიმე გზით. იგივე გადასვლებთან დაკავშირებით.
გრადიენტის ხელსაწყოს გამოყენებით
თქვენ ალბათ იცნობთ ამ ხელსაწყოს. ამიტომ, გადადით ინსტრუმენტთა პანელზე მარცხნივ და აირჩიეთ "გრადიენტი".
ინსტრუმენტის არჩევის შემდეგ, ძირითადი მენიუს ქვემოთ გამოჩნდება გრადიენტის პარამეტრების პანელი, სადაც შეგიძლიათ აირჩიოთ გრადიენტის შაბლონი და დააყენოთ დამატებითი პარამეტრები სურვილისამებრ.
სამწუხაროდ, გრადიენტების სტანდარტული ნაკრები არ შეიცავს ბევრ შაბლონს, ასე რომ თქვენ შეგიძლიათ გამოიყენოთ ძებნა და გააფართოვოთ თქვენი კოლექცია, ან შექმნათ თქვენი საკუთარი ვერსია.
იმისათვის, რომ გადასვლა იყოს ზუსტად ფერადი და არა გამჭვირვალე, თქვენ ასევე უნდა დააყენოთ პარამეტრები საკონტროლო წერტილიგამჭვირვალობა (იხილეთ ეკრანის სურათი ქვემოთ):
მას შემდეგ რაც ყველაფერი მზად არის, რჩება მხოლოდ ცვლილებების გამოყენება „OK“-ზე დაწკაპუნებით და ტილო გრადიენტით შევსება. ამისათვის ჩვენ ვქმნით არჩეულ ზონას, რომელიც გვინდა შევავსოთ, ან გამოვიყენოთ გრადიენტი მთელ ტილოზე. უბრალოდ დააწკაპუნეთ LMB (მაუსის მარცხენა ღილაკი) სასურველ ადგილას და გადაიტანეთ რამდენიც საჭიროა.
მნიშვნელოვანი!ყურადღება მიაქციეთ რა ტიპის შევსებაა არჩეული:
ჩვენს შემთხვევაში "ხაზოვანი გრადიენტი".
ფენის ნიღბის მეშვეობით
ამ მეთოდს იყენებენ გამოცდილი მომხმარებლები. ყველა მოქმედება განხორციელდება ფენების პალიტრის მეშვეობით. მოდი დავიწყოთ:
სელექციური ბუმბულის მეშვეობით
ამ მეთოდის არსი არის გლუვი გადასვლის შექმნა შევსებული ობიექტის/სურათის და ფონის საზღვარზე. მოდი დავიწყოთ!
- ჩვენ დაგვჭირდება Rectangular Marquee ინსტრუმენტი.
- ახლა თქვენ უნდა შექმნათ არჩევანი:
- როდესაც არჩევანი მზად არის, გამოიყენეთ ცხელი კლავიშები SHIFT + F6გამოიძახეთ ფანჯარა, სადაც უნდა შეიყვანოთ მნიშვნელობა ნივთში "ბუმბულის რადიუსი".
- ამის შემდეგ, თქვენ უნდა შეავსოთ ჩამოყალიბებული არჩევანი. ამისათვის ჩვენ კვლავ გამოვიყენებთ ცხელი კლავიშებს SHIFT+F5და აირჩიეთ შევსების ფერი.
- ცვლილებების გამოყენების შემდეგ, ჩვენ ვიღებთ შემდეგ გლუვი გადასვლის შედეგს:
- რჩება მხოლოდ შერჩევის ამოღება გამოყენებით CTRL + Dდა თქვენ დაასრულეთ:
როგორც ხედავთ, არაფერია რთული Photoshop-ში ფერებს შორის გლუვი გადასვლების განხორციელებაში. ჩვენ წარმოვადგინეთ ამის გაკეთების 3 გზა, რომელთაგან თითოეული შესაფერისია გარკვეულ სიტუაციაში.
სულ ესაა! შევხვდებით ჩვენს შემდეგ გაკვეთილებზე!
დამეთანხმებით, ერთ-ერთი ყველაზე უჩვეულო საჩუქარია კოლაჟები. მათ შეუძლიათ ინტერიერის გაფორმება, მეგობრების გაცინება და საყვარელი ადამიანების სიამოვნება. ორიგინალური ფოტოები, როგორც წესი, შეკვეთილია ფოტო სტუდიიდან ან თავად ცდილობთ მათ კომპიუტერზე გადაღებას. იმისათვის, რომ ერთი ფოტოს მეორეზე გადაფარვა ორგანულად გამოიყურებოდეს, თქვენ უნდა ისწავლოთ რამდენიმე მარტივი კომბინაცია. რაც მთავარია, ჩარჩოებს შორის კონტრასტი არ არის. კოლაჟისთვის ფონის არჩევისას, აუცილებლად გაითვალისწინეთ ორივე ფოტოზე არსებული ფერები და სინათლის მიმართულება, ასევე ობიექტების ზომა და მთავარი ობიექტი. იმის გასაგებად, თუ როგორ უნდა გააკეთოთ გლუვი გადასვლა Photoshop-ში, უბრალოდ შეისწავლეთ ამ სტატიაში წარმოდგენილი პროცედურა.
პროცედურის შესახებ
შეეცადეთ ივარჯიშოთ მოქმედებების შემდეგი თანმიმდევრობით.
სწავლობს გრაფიკული რედაქტორებისაშუალებას მოგცემთ შექმნათ არაჩვეულებრივი ნამუშევრები, გამოასწოროთ სურათები, დაამონტაჟოთ ისინი და შექმნათ საოცარი კომპოზიციები ნებისმიერი ფოტომასალათ!
ვიმედოვნებთ, რომ ჩვენი სტატია საშუალებას მოგცემთ წარმატებით დაასრულოთ დავალება და ასევე მიიღოთ ნამდვილი სიამოვნება ამ საინტერესო და შემოქმედებითი პროცესისგან.
კოლაჟის შექმნა არ არის მხოლოდ რამდენიმე ფოტოს ერთში გაერთიანება. სწორი კოლაჟი აჩვენებს ავტორის უნარს და ასევე აჩვენებს მის უნარს ლამაზად და კომპეტენტურად მოაწყოს ფოტოები ისე, რომ ის გამოიყურებოდეს ელეგანტური და მიმზიდველი. წარმატებული და შესამჩნევი კოლაჟი იქნება ის, რომელშიც არ არის შესამჩნევი საზღვრები ფოტოებს შორის - სამაგიეროდ, ფოტოები თითქოს ერთმანეთში მიედინება. ამ ეფექტის მიღწევა შესაძლებელია Adobe Photoshop-ში მარტივი ოპერაციების შესრულებით.
დაგჭირდებათ
- - Adobe პროგრამა Photoshop
ინსტრუქციები
გამარჯობა ძვირფასო დამწყებ ვებოსტატებო. ისევ .
ამ სტატიაში მე გეტყვით, თუ როგორ უნდა გადავიდეთ მუქი ჩრდილებიდან უფრო ღიაზე, ასევე ერთი ფერიდან მეორეზე.
ამ მოქმედებას გრადიენტი ეწოდება და რადგან არსებითად ასეა ფონის სურათი, შემდეგ შესრულებულია ფონის თვისებით ორი მნიშვნელობით:
1. ხაზოვანი-გრადიენტი - ფერის გადასვლა ერთი კიდიდან ან კუთხიდან მეორეზე.
2. რადიალურ-გრადიენტი - ფერის გადასვლა ცენტრიდან კიდეებზე.
ასე წერია:
ფონი: -moz-წრფივი-გრადიენტი (ზემო, #ff0000, #ffcfcf);
ზედა, #ff0000, #ffcfcf);
ქვემოთ, მაგალითის გამოყენებით, ჩვენ დეტალურად განვიხილავთ ამ ჩანაწერის თითოეულ ელემენტს.
სამწუხაროდ, გრადიენტს ჯერ კიდევ აქვს ბრაუზერებში ჩვენების პრობლემა და W3C სპეციფიკაცია, ამიტომ მნიშვნელობები ჯერ კიდევ უნდა იყოს პრეფიქსი.
პრეფიქსი მოთავსებულია მნიშვნელობის დასაწყისში და იწყება ტირეთი.
ჩვენ მოგვიწევს ასეთი სიის ჩასმა ელემენტების ამომრჩეველში, შევქმნით მას გრადიენტს, რათა თქვენი ძალიან ლამაზი ფონი სწორად აისახოს ყველა ბრაუზერში. სილამაზე მსხვერპლს მოითხოვს.
Это самый простой, двухцветный градиент. Разберём подробно значения свойства background
В первой строке задаётся фон для браузеров не поддерживающих линейный градиент.
Следующие 5 строк — для отображения фона в разных браузерах. Сначала пишется значение градиента с префиксом в начале.
Затем, в круглых скобках:
top — направление от которого начинается первый цвет (может быть bottom , left , right )
#ff0000
— через запятую первый цвет; 
#ffcfcf — через запятую второй цвет;
У Safari, до 5-ой версии, и у Chrome до десятки был свой собственный синтаксис, заметно увеличивающий код. Наверное поэтому, градиент для этих версий, зачастую, не указывается, особенно при наличии большого количества цветов.
Можно сделать переход цвета не горизонтально, или вертикально, а из угла в угол. Для этого существуют следующие направления:
bottom right — от правого нижнего угла к левому верхнему;
bottom left — от левого нижнего к правому верхнему;
top right — от правого верхнего к левому нижнему;
top left — от левого верхнего к правому нижнему;
Можно сделать переход цвета от центра блока к краям. Тогда в значении вместо слова linear (линейный), ставиться radial (радиальный)
#gradient
{
background
: #ff0000
;
background
: -moz-radial-gradient
(center, ellipse cover, #ff0000, #ffcfcf
);
background
: -webkit-radial-gradient
(center, ellipse cover, #ff0000, #ffcfcf
);
center, ellipse cover, #ff0000, #ffcfcf
);
center, ellipse cover, #ff0000, #ffcfcf
);
width
: 600px
;
height
: 400px
;
border
: 1px solid #333
;
}
А теперь давайте сделаем, так сказать, что-то типа радуги. Для этого добавим в вышеприведённый код ещё пару цветов, и зададим в процентах объём каждого цвета (количество цветов не ограничивается)
Объём цвета задаётся от 0% до 100%, (первый — 0%, последний — 100%, остальные между ними в порядке следования). Рассмотрим этот вариант на радиальном градиенте. На линейном делается всё аналогично.
#gradient
{
background
: #ff0000
;
background
: -moz-radial-gradient
();
background
: -webkit-radial-gradien
t(center, ellipse cover, #ff0000 0%, #00b630 30%, #6ff5f5 70%, #ffcfcf 100%
);
background
: -o-radial-gradient
(center, ellipse cover, #ff0000 0%, #00b630 30%, #6ff5f5 70%, #ffcfcf1005
);
background
: -ms-radial-gradient
(center, ellipse cover, #ff0000 0%, #00b630 30%, #6ff5f5 70%, #ffcfcf 100%
);
width
: 600px
;
height
: 400px
;
border
: 1px solid #333
;
}
Принцип, я думаю, понятен. Так что строку для Safari до пятой версии, и Chrome до десятой, попробуйте написать самостоятельно.
Градиент задаётся любому блоку HTML (body, div, h1-6, p, ul, ol), и как глобальным, так и встроенным стилем (это для сайта на WordPress).
Теперь несколько слов о том, как и где подбирать цвета. Есть сервисы по созданию градиентов, предлагающие и цвет, и процент объёма, и код градиента, но выбор у них ограничен предложением.
Поэтому я пользуюсь инструментом colorscheme.ru , в котором можно подобрать цвет в неограниченном диапазоне, и оптимально подобранных последовательностях и сочетаниях.
В верхнем ряду панели выбирается количество сочетаемых цветов. Пройдя по «Угол 30°» меняется диапазон выбора.
В «Регулировка схемы», тон делается темнее или светлее. В «Список цветов», все цвета, присутствующие на схеме, располагаются по насыщенности, и с кодом в подписи.
В общем неограниченные возможности по подбору цветовой гаммы для создания градиента.
Желаю творческих успехов.
— Рабинович! У вас есть разменять сто долларов?
— Нет, но спасибо за комплимент!
Две одесситки:
— Роза, как тебе нравится моё новое платье?
— Извини, Сара, я спешу, мне сейчас не до скандалов!