როგორ გააკეთოთ ლამაზი ღილაკი Photoshop-ში. ღილაკის დახატვა გრაფიკულ რედაქტორში Inkscape

შემდეგი გაკვეთილი ეხება შექმნას ღილაკები საიტისთვისგრაფიკულად რედაქტორიგიმპი . ქვემოთ მოცემული გაკვეთილი გაჩვენებთ, თუ რამდენად ადვილია თქვენი ვებსაიტისთვის მაღალი ხარისხის ღილაკის დახატვა მარტივი ხელსაწყოების გამოყენებით.

შემდეგ გაკვეთილებზე ჩვენ ვისწავლით თუ როგორ დავხატოთ უფრო საინტერესო ღილაკები და ახლა დავიწყოთ:

ნაბიჯი 1.შექმენით ახალი სურათი 250 პიქსელი სიგანით და 100 პიქსელი სიმაღლით

ნაბიჯი 2.აირჩიეთ სურათი "აირჩიეთ - ყველა (Ctrl+A)"

ნაბიჯი 3.შერჩევის კიდეების დამრგვალება "არჩევა - მრგვალი მართკუთხედი" (ნაგულისხმევი პარამეტრები)

ნაბიჯი 4.

ნაბიჯი 5.ვინაიდან ჩვენი არჩევანი აქტიურია, შეავსეთ იგი ფერით (აირჩიეთ გემოვნებით). მე ავირჩიე მწვანე (#009100 ). უბრალოდ გადაიტანეთ ფერი პალიტრიდან სამუშაო ადგილზე (შერჩევისას) მაუსის მარცხენა ღილაკის გათავისუფლების გარეშე. ახლა ჩვენ გვაქვს მწვანე მართკუთხედი მომრგვალებული კიდეებით თეთრ ფონზე. განვაგრძოთ:

ნაბიჯი 6.ჩვენ ვაგრძელებთ აქტიურ შერჩევას. მოდით შევამციროთ ის ორი პიქსელით (2 px). ამისათვის დააწკაპუნეთ ზედა მენიუზე "Select - Zoom Out" და შეიყვანეთ სასურველი პარამეტრი - ეს არის 2px. და დააჭირეთ "OK"

ნაბიჯი 7შექმენით ახალი გამჭვირვალე ფენა "Layer-Create Layer" (Shift+Ctrl+N)

ნაბიჯი 8შეავსეთ აქტიური შერჩევა გრადიენტური შევსებით. წინა პლანზე ფერი ოდნავ ღიაა ვიდრე ჩვენი ძირითადი ფერი. ჩემთვის ის ღია მწვანე აღმოჩნდა პარამეტრით#43c343.აირჩიეთ Gradient ხელსაწყო Basic to Transparent პარამეტრით და გამოიყენეთ ინსტრუმენტი ჩვენი სურათის ზემოდან ქვემოდან.

ეს უნდა გამოიყურებოდეს სურათზე:

ნაბიჯი 9ჩვენ ვაგრძელებთ აქტიურ შერჩევას. მოდით შევქმნათ ახალი მართკუთხა შერჩევა გამოკლების რეჟიმში

ნაბიჯი 10შექმენით ახალი გამჭვირვალე ფენა "Layer-Create Layer" (Shift+Ctrl+N)

ნაბიჯი 11ჩვენ ვაგრძელებთ აქტიურ შერჩევას. შეავსეთ აქტიური შერჩევა გრადიენტური შევსებით. წინა პლანზე ფერი თეთრია. გრადიენტური ინსტრუმენტი ძირითადიდან გამჭვირვალე ოფციით. გამოიყენეთ ინსტრუმენტი ჩვენი არჩევანის ზემოდან ქვემოდან, ის ასე უნდა გამოიყურებოდეს, თუ ყველაფერს სწორად აკეთებთ:

ნაბიჯი 12შერჩევა - წაშლა (Shift+Ctrl+A)

ნაბიჯი 13მოდით დავამატოთ წარწერა ჩვენს ღილაკზე "ტექსტის" ხელსაწყოს გამოყენებით და დავწეროთ სიტყვა, რომელიც გვჭირდება. ჩემს შემთხვევაში ეს არის "ჩამოტვირთვა"

ეს არის გაკვეთილისთვის ღილაკის დახატვა ვებსაიტისთვის Gimp-შიდაასრულა. აქ არის ჩემი საბოლოო შედეგი. აქ მე უბრალოდ დავამატე ფონი წარწერისთვის:

დავიწყოთ. ჯერ ეს ღილაკი უნდა დახატოთ. და არა მხოლოდ ეს, არამედ ყველა ვარიანტი, რომელიც გამოყენებული იქნება საიტზე. კერძოდ, ღილაკის ხედვა ნორმალურ მდგომარეობაში, ხედი მაუსის დაჭერისას და ხედი ღილაკზე მაუსის მარცხენა ღილაკით დაჭერისას.

შექმენით ახალი დოკუმენტი. ზომა აქ არც ისე მნიშვნელოვანია, მთავარია ის ჩვენს ღილაკს სამ ვარიანტს მოერგოს.

ახლა შექმენით ფენების ჯგუფი ფენების პალიტრაში საქაღალდის ხატულაზე დაწკაპუნებით და დაასახელეთ ღილაკი(ღილაკის მსგავსად).

ჩვენ ვიმუშავებთ ამ ჯგუფში, რადგან... თქვენი ფენების სწორად სტრუქტურირება ყოველთვის სასარგებლოა. ახლა აირჩიეთ ინსტრუმენტი მომრგვალებული მართკუთხედის ინსტრუმენტიდა დააყენეთ კუთხის რადიუსი 5px-ზე და ფორმის ფიქსირებული ზომა 200x45px პარამეტრებში.

დააწკაპუნეთ დოკუმენტში სადმე, რომ შექმნათ ღილაკის საფუძველი.

შემდეგ ორჯერ დააწკაპუნეთ ფორმის ფენაზე და გადადით სტილის რედაქტირების ფანჯარაში. ან უბრალოდ წადი Layer > Layer Style > Blending Options . დაამატეთ შემდეგი სტილები:

ეს არის ის, რაც უნდა მიიღოთ:

ახლა დაამატეთ ტექსტი. ეს გაკვეთილი იყენებს ყბადაღებულს კალიბრი 16pt თეთრი. და გამოიყენეთ სტილი ჩამოაგდეს ჩრდილიამ ფენას.

პირველი ვარიანტი მზად არის. ახლა მოდით შევქმნათ ღილაკის ვარიანტი, რომელიც გამოჩნდება, როდესაც მასზე მაუსის გადატანას ვახდენთ. გახსოვთ, როგორ შევქმენით ფენების ჯგუფი გაკვეთილის დასაწყისში? გადაიტანეთ იგი ახალ ფენის ხატულაზე და გამოჩნდება დუბლიკატი ჯგუფი. გადაარქვით სახელი ჰოვერი(მაუსის მითითების მსგავსად).

მოდით ვიმუშაოთ ფენების ამ ჯგუფთან. გახსენით იგი და ორჯერ დააწკაპუნეთ ფენაზე ღილაკის საყრდენით. გაიხსნება ფენის სტილის რედაქტირების ფანჯარა. სტილის დამატება ფერის გადაფარვა.

დააწკაპუნეთ ფენების ჯგუფზე ჰოვერი, აირჩიეთ Move Tool და მაუსის გამოყენების გარეშე გამოიყენეთ მოძრაობის ღილაკები (ან უბრალოდ ისრის ღილაკები) ჯგუფის ქვემოთ გადასატანად, როგორც ფიგურაში. მთავარია, რომ სურათები ერთმანეთის მიმდებარედ იყოს.

მზადაა. როგორც წინა ეტაპზე, შექმენით დუბლიკატი ფენების ჯგუფი ჰოვერიდა დაურეკე მას აქტიური(მოიწონეთ, დააწკაპუნეთ). დააწკაპუნეთ ღილაკის საბაზისო ფენაზე და წაშალეთ სტილი ფერის გადაფარვადა შეცვალეთ სტილი გრადიენტური გადაფარვაროგორც სურათზე:

ასევე გადაიტანეთ ამ ფენის ჯგუფის სურათი ქვემოთ, მაგრამ ჯგუფის სურათის ქვემოთ ჰოვერი.

ასე რომ, პირველი ეტაპი დასრულდა. ჩვენ შევქმენით სამი ღილაკის ვარიანტი და მზად ვართ გადავიდეთ სათანადო შენახვაზე.

სურათის შენახვა

გახადეთ ფონის ფენა უხილავი ფენის გვერდით თვალის ხატზე დაწკაპუნებით. ფენის ჯგუფში ყოფნისას აქტიურიფენების პალიტრაში დააწკაპუნეთ Ctrl+Shift+Alt+Eშევქმნათ ახალი ფენა, რომელიც მოიცავს გამოსახულების ყველა ხილულ ნაწილს (ჩვენს შემთხვევაში ეს არის ღილაკები). შემდეგ გადადით ამ ფენაზე. ამის შემდეგ, ნებისმიერი შერჩევის ხელსაწყოს გამოყენებით, შექმენით შერჩევის არე სურათის გარშემო, როგორც სურათზე:

დააწკაპუნეთ Ctrl+Cსურათის კოპირებისთვის და ახალი დოკუმენტის შესაქმნელად:

გთხოვთ გაითვალისწინოთ, რომ დოკუმენტი შექმნილია ზომებით, რომლებიც მოიცავს კოპირებული სურათის ყველა ხილულ ნაწილს. სურათის შექმნის შემდეგ დააწკაპუნეთ Ctrl+Vჩვენი ღილაკების ჩასმა. გახადეთ ფონის ფენა უხილავი და წადით შენახვა ვებისთვის. შეინახეთ ფაილი სახელით buttons.png.

ასე რომ, ჩვენ გადავარჩინეთ ჩვენი ღილაკები. შედეგად მივიღეთ ე.წ. რა არის სპრაიტი? ეს არის ერთი დიდი სურათი, რომელიც მოიცავს ყველა პატარა სურათს, რომელიც გამოიყენება გვერდის განლაგებაში. ეს სურათი გამოიყენება როგორც კონკრეტული ბლოკის ფონი მითითებული ზომებით. ფონად გამოყენებული ჩვეულებრივი სურათებისგან ერთადერთი განსხვავება ისაა, რომ სპრაიტს აქვს მკაფიო პოზიციონირება კოორდინატებთან შედარებით XY. დაწვრილებით გაკვეთილის შემდეგ ნაწილში.

ღილაკის განლაგება CSS სტილის გამოყენებით

გახსენი შენი html- ფაილი. პირველ რიგში, მოდით შევქმნათ ბმული:

დამაჭირე!

აი რა ხდება:

A ( ჩვენება: ბლოკი; /*უთხარი ბრაუზერს, რომ აჩვენოს ბმული ბლოკის ელემენტად*/ სიგანე:202 პიქსელი; /*განსაზღვროს ბლოკის სიგანე*/ სიმაღლე:47 პიქსელი; /*განსაზღვროს ბლოკის სიმაღლე*/ ტექსტი -შეწევა: -9999px /*პირველი სტრიქონის შეწევა*/ ფონის პოზიცია: მარცხენა (X) ზედა კუთხეში*/ ფონზე-გამეორება; არ "გამრავლოთ" სურათი*/ background-image : url(buttons.png /*Sprite*/ );

ყურადღება მიაქციეთ პარამეტრის მნიშვნელობას ტექსტი-შეწევა. ისეთი დიდი ჩაღრმავება გაკეთდა, რომ თავად ტექსტი არ ჩანდა, მაგრამ ბმული იყო. ტექსტი დარჩა საძიებო რობოტებისთვის, ასე ვთქვათ, SEO ეფექტის მისაღებად)). ეს არის ის, რაც ჩვენ ვიღებთ:

ახლა ჩვენ უნდა ვუთხრათ ჩვენს ბმულს, თუ როგორ უნდა მოიქცეს მაუსის დაჭერისას და დაწკაპუნებისას. ამისათვის გამოიყენება ფსევდოკლასები :ჰოვერიდა :აქტიური. ამ ნაბიჯისთვის თქვენ უნდა აღჭურვათ კალკულატორით. აგიხსნით რატომ: ვინაიდან ჩვენ გვაქვს ერთი სურათი, რომ მისი გარკვეული ნაწილი ბლოკის ფონი ლინკით ჩავანაცვლოთ, უნდა მივუთითოთ პიქსელების ზუსტი რაოდენობა, რომლითაც გადავცვლით სურათს. შეხედე სურათს:

ჩვენ შევქმენით ღილაკი, რომლის სიმაღლეა 45 პიქსელი. სტილის გამოყენების შემდეგ ინსულტი, პარამეტრების მიხედვით დავამატეთ ღილაკის თითოეულ მხარეს 1px. საერთო ჯამში, გამოდის, რომ ღილაკის სიმაღლე გახდა 47 პიქსელი. თუ გავითვალისწინებთ, რომ ფონის საწყისი ოფსეტი არის 0, მაშინ როცა მაუსის ღილაკზე ავწევთ, ფონი 47 პიქსელით ზემოთ უნდა გადავწიოთ, ე.ი. ჩანაცვლება ღირებულებად ი, რომელიც პასუხისმგებელია პარამეტრის ვერტიკალურ გადაადგილებაზე ფონის პოზიცია-47 პიქსელი. იგივე ეხება ღილაკზე დაწკაპუნებას, მხოლოდ ჩვენ ვამოძრავებთ არა 47 პიქსელით, არამედ 47px+47px=94px-ით.

A:Hover (ფონის პოზიცია: მარცხენა -47px;) a:active (ფონის პოზიცია: მარცხნივ -94px;)

ესე იგი! სპრაიტების გამოყენების უპირატესობა ის არის, რომ ჩვეულებრივ სპრაიტის ზომა (წონა) ბევრად, ბევრჯერ მცირეა ცალკეული სურათების მთლიან ზომაზე (წონაზე). მაგრამ არის უარყოფითი წერტილიც - სპრაიტის მომზადებას მეტი დრო სჭირდება. თქვენი გადასაწყვეტია.

ამ გაკვეთილის ნაბიჯების შემდეგ თქვენ შეისწავლით როგორ შექმნათ ვექტორული ჩართვის ღილაკი Adobe Illustrator-ში. პირველ რიგში, თქვენ შეისწავლით თუ როგორ მოარგოთ ბადე, შექმნათ მარტივი მართკუთხედი, რომელიც გამოდგება როგორც ფონი. შემდეგ, ვექტორული ფორმის ძირითადი ტექნიკის გამოყენებით, შექმენით წრე და მონახაზი, რომელიც შექმნის ღილაკს. დაბოლოს, გარეგნობის პანელის სრული სარგებლობით, თქვენ დაამატებთ ფერს, ჩრდილებს და ხაზგასმას, დაამატებთ სიღრმეს თქვენს ობიექტებს.

ნაბიჯი 1.

დააწკაპუნეთ Ctrl + Nახალი დოკუმენტის შესაქმნელად. აირჩიეთ პიქსელები Units-ის ჩამოსაშლელ მენიუში (ერთეული), კომპლექტი დოკუმენტის სიგანე (სიგანე) და სიმაღლე (სიმაღლე) არის 600 პიქსელი,შემდეგ დააჭირეთ ღილაკს დამატებით (გაფართოებული), აირჩიეთ ფერის რეჟიმი: RGB, რასტერული ეფექტები: ეკრანი (72ppi), დარწმუნდით, რომ მოსანიშნი ველი არ არის მონიშნული ახალი ობიექტების გასწორება Pixel Grid-ში, დააჭირეთ OK.

მოდით დავაყენოთ ბადე: აირჩიეთ მენიუდან View > Grid-ის ჩვენება (View > Show Grid (Ctrl + ") და ისევ View > Align to Grid (View > Snap to Grid (Shift + Ctrl + "). თქვენ დაგჭირდებათ ბადე 5 პიქსელიანი უჯრედით, მისი კონფიგურაცია შეგიძლიათ მენიუში გადასვლით რედაქტირება > პრეფერენციები > გიდები და ბადე (რედაქტირება > პრეფერენციები > გიდები > ბადე).ველში შეიყვანეთ მნიშვნელობა 5 Gridline ყოველიდა 1 ჩადეთ ყუთში შიდა დაყოფა (Subdivisions).არ შეგაშინოთ ამ ბადის მომზადებამ - ეს გაგიადვილებთ მუშაობას და ყოველთვის შეგიძლიათ გამორთოთ ბადის ხილვადობა დაწკაპუნებით (Ctrl + ").ასევე შეგიძლიათ აირჩიოთ მენიუდან ფანჯარა > ინფორმაცია (ფანჯარა > ინფორმაცია (Ctrl + F8),დოკუმენტის საზომი ერთეულების შესახებ ინფორმაციის სანახავად. დარწმუნდით, რომ იქ არის პიქსელები. თუ არა, შეგიძლიათ დააინსტალიროთ ისინი მეშვეობით მენიუ > პარამეტრები > ერთეულები > ზოგადი (რედაქტირება > პრეფერენციები > ერთეულები > ზოგადი).ეს მნიშვნელოვნად გაამარტივებს შემდგომ მუშაობას.

ნაბიჯი 2.

მიიღეთ მართკუთხედის ინსტრუმენტი (M).გვერდითი პანელი ინსტრუმენტთა პანელიამოიღეთ ფერი შტრიხიდან და აირჩიეთ შევსების ფერი R=50 G=50 B=50.ახლა დააწკაპუნეთ ერთხელ ტილოზე, რომ გახსნათ პარამეტრების ფანჯარა. შეიყვანეთ მნიშვნელობა 610 სიგანე და სიმაღლე ველებშიდა დააჭირეთ OK.საბოლოოდ თქვენ უნდა მიიღოთ კვადრატი 610 x 610 პიქსელი. შემდეგი, გახსენით პანელი გასწორება - ფანჯარა > გასწორება (Shift + F7). პანელის ჩამოსაშლელ ფანჯარაში აირჩიეთ Align to Artboard (გასწორება Artboard-ზე), შემდეგ დააწკაპუნეთ ხატულებზე ჰორიზონტალური გასწორების ცენტრი და ვერტიკალური გასწორების ცენტრი. შედეგად, თქვენი მუქი ფორმა უნდა ფარავდეს მთელ დაფას, როგორც ნაჩვენებია სურათზე.

ნაბიჯი 3.

პანელზე ინსტრუმენტთა პანელიშევსების ფერის შერჩევა R=70 G=175 B=15და გადაერთეთ Ellipse Tool (L). შექმენით წრე დიამეტრით 110 პიქსელიდა ცენტრირება ისე, როგორც გავაკეთეთ კვადრატთან.

ნაბიჯი 4.

მწვანე წრეზე ხაზგასმული, გადადით მენიუში ობიექტი > ბილიკი > ოფსეტური ბილიკის შექმნა (ობიექტი > ბილიკი > ოფსეტური ბილიკი). ფანჯარაში, რომელიც გამოჩნდება, შეიყვანეთ -40 პიქსელი და დააჭირეთ OK.აირჩიეთ მიღებული მონახაზი და გადადით პანელზე გარეგნობა - ფანჯარა > გარეგნობა. ამოიღეთ შევსების ფერი, დააყენეთ შტრიხის ფერი თეთრზე და გაზარდეთ დარტყმის წონა (ინსულტის წონა) 6 ქულამდე.

ნაბიჯი 5.

აირჩიეთ თეთრი მონახაზი და გადადით მენიუში ობიექტი > ბილიკი > ანკერის წერტილების დამატება (ობიექტი > ბილიკი > ანკორის წერტილების დამატება).შემდეგ აიღეთ პირდაპირი შერჩევის ინსტრუმენტი (A), აირჩიეთ ზედა წერტილები (მონიშნულია მეორე სურათზე) და უბრალოდ დააჭირეთ ღილაკს წაშლაკლავიატურაზე. აირჩიეთ დარჩენილი გზა, გახსენით პანელი ინსულტი – ფანჯარა > ინსულტიდა დააწკაპუნეთ ხატულაზე, შედეგად, ყველაფერი უნდა გამოიყურებოდეს მესამე სურათზე.
შემდეგი მიღება კალმის ხელსაწყო (P)და შექმენით ვერტიკალური მონახაზი სიმაღლით 15 პიქსელი, შემდეგ მოათავსეთ ისე, როგორც ნაჩვენებია მეოთხე სურათზე. დააყენეთ შტრიხის ფერი თეთრზე ამ ბილიკისთვის, სისქე (წონა) 6 ქულა, დააწკაპუნეთ ხატულაზე მომრგვალებული ბოლოები (მრგვალი ქუდი).

ნაბიჯი 6.

აირჩიეთ ორივე თეთრი კონტური და გადადით მენიუში ობიექტი > ბილიკი > შტრიხების მრუდებად გადაქცევა (ობიექტი > ბილიკი > მონახაზის მონაკვეთი). აირჩიეთ ორივე შექმნილი ფორმა და დააჭირეთ კლავიატურის მალსახმობს Ctrl + 8 (ან მენიუს საშუალებით Object > Compound Path > Create - Object > Compound Path > Make).

ნაბიჯი 7

აირჩიეთ მწვანე წრე, გადადით პანელზე გარეგნობადა დააწკაპუნეთ ხატულაზე დაამატეთ ახალი შევსებაპანელის ბოლოში. აირჩიეთ ეს ახალი შევსება, გახსენით პანელი გრადიენტი - ფანჯარა > გრადიენტი) და დააწკაპუნეთ გრადიენტის მინიატურაზე, რომ დაამატოთ ნაგულისხმევი ხაზოვანი გრადიენტი შავიდან თეთრამდე. პანელზე დააყენეთ გრადიენტი კუთხეზე: 90 გრადუსი.შემდეგ აირჩიეთ მარჯვენა გრადიენტის ფერის სლაიდერი და დააყენეთ ფერი R=0 G=95 B=0,დააყენეთ მარცხენა სლაიდერის ფერი R=130 G=225 B=75.შემდეგი, მეორე შევსების შერჩევით, გადადით მენიუში ობიექტი > ბილიკი > პარალელური ბილიკის შექმნა (ობიექტი > ბილიკი > ოფსეტური ბილიკი),შედით ფანჯარაში, რომელიც გამოჩნდება ოფსეტური -8 პიქსელი და დააჭირეთ OK.

ნაბიჯი 8

ისევ, მწვანე წრის შერჩევით, პანელზე გარეგნობადაამატეთ მესამე შევსება ხატზე დაწკაპუნებით დაამატეთ ახალი შევსება (Add New Fill).ასევე აირჩიეთ ნაგულისხმევი გრადიენტი ამ შევსებისთვის, შემდეგ დააყენეთ კუთხე: 90 გრადუსი,იხილეთ სურათი გრადიენტური ფერებისთვის. შემდეგ დააჭირეთ ჩანართის მარცხნივ ისარს ახალი შევსებით, შემდეგ დააჭირეთ წარწერას გამჭვირვალობადა ფანჯარაში, რომელიც გამოჩნდება, დააყენეთ შერევის რეჟიმი გადაფარვა (გადაფარვა) და შემცირება გამჭვირვალობა (გაუმჭვირვალობა) 60%-მდე.შემდეგ მენიუდან აირჩიეთ ობიექტი > ბილიკი > შექმენით პარალელური ბილიკი (Object > Path > Offset Path), დააყენეთ Offset -4 პიქსელზე და დააწკაპუნეთ OK.

ნაბიჯი 9

აირჩიეთ მწვანე წრე და დაამატეთ მეოთხე შევსება. აირჩიეთ და მიმართეთ გრადიენტი - გრადიენტური ხელსაწყო (G): ტიპი: რადიალური; იხილეთ სურათი გრადიენტური ფერებისთვის. შემდეგ მენიუდან აირჩიეთ Object > Path > პარალელური ბილიკის შექმნა (Object > Path > Offset Path), Offset (Offset) -10 პიქსელი.შემდეგი დამატება მენიუდან ეფექტი > სტილიზაცია > შიდა ბზინვარებაამ პარამეტრებით:

შერევის რეჟიმი: გადახურვა (გადახურვა);

ფერი R=0 G=0 B=0

გამჭვირვალობა: 30%;

დაბინდვა: 10 პიქსელი

აირჩიეთ Edge

ნაბიჯი 10

ახლა, მწვანე წრის შერჩევით, პანელზე გარეგნობააირჩიეთ მიმდინარე სტრიქონი და დააყენეთ მისი ფერი შავზე. გადადით პანელზე ინსულტი, დააყენეთ წონა 1 ქულაზე,შემდეგ დააჭირეთ ხატულას Stroke-ის გასწორება შიგნით. შემდეგი პანელზე გარეგნობა: შეამცირეთ შავი დარტყმის გამჭვირვალობა 15%-მდე და შეცვალეთ შერწყმის რეჟიმი Soft Light-ზე. შემდეგი, გადადით მენიუში Object > Path > შექმენით პარალელური ბილიკი (Object > Path > Offset Path), Offset (Offset) -10 პიქსელი და დააჭირეთ OK.

ნაბიჯი 11

არჩეული მწვანე წრე, პანელზე გარეგნობააირჩიეთ მიმდინარე სტრიქონი და დააკოპირეთ იგი არჩეული დუბლიკატის ხატულაზე დაწკაპუნებით ობიექტი (არჩეული ელემენტის დუბლიკატი)(ქვემოთ სურათზე მონიშნულია ლურჯი ისრით). ახლა შეარჩიეთ თქვენ მიერ შექმნილი შტრიხი, გაზარდეთ სისქე (წონა) 3 ქულამდე და შეამცირეთ გამჭვირვალობა (გაუმჭვირვალობა) 10%-მდე. გაიმეორეთ ეს 3pt დარტყმა, შემდეგ გაზარდეთ წონა დუბლირებული დარტყმის (წონა) 5 ქულამდე და დააყენეთ გამჭვირვალობა (გაუმჭვირვალობა) 5%-ზე.

ნაბიჯი 12

კვლავ აირჩიეთ მწვანე წრე. დაამატეთ ახალი შევსება პანელზე გარეგნობა, შემდეგ შეამცირეთ მისი გამჭვირვალობა 50%-მდე და შეცვალეთ შერევის რეჟიმი გადაფარვით. შემდეგ გადადით მენიუში Effect > Distort & Transform > Transform (Effect > Distort & Transform > Transform) და დააყენეთ შემდეგი პარამეტრები: Scaling: - Horizontal (Scale - Horizontal) 30%; ჰორიზონტალური (მასშტაბი - ვერტიკალური) 5%

გადაადგილება: - ჰორიზონტალური (Move-Horizontal) 0 პიქსელი; ვერტიკალური (Move-Vertical) 30 პიქსელი.

მოხსენით უჯრები ასახეთ X და ასახეთ Y, შემთხვევითი.
შემდეგი, აირჩიეთ მენიუდან Effect > Warp > Arch (Effects > Warp > Arch) და გამოიყენეთ შემდეგი პარამეტრები:

- აირჩიეთ ჰორიზონტალური

- მოსახვევი: -40%

განყოფილების დამახინჯება

- ჰორიზონტალური: 0%

- ვერტიკალური: 0%
დააწკაპუნეთ OK.

ნაბიჯი 13

აირჩიეთ მწვანე წრე, დაამატეთ ახალი შევსება და დააყენეთ მისი ფერი R=30 G=30 B=30.გადაიტანეთ ეს შევსება პანელის ბოლოში გარეგნობაარჩეული შევსებით გადადით მენიუში ობიექტი > ბილიკი > ოფსეტური ბილიკის შექმნა (ობიექტი > ბილიკი > ოფსეტური ბილიკი), კომპლექტი ოფსეტური 4 პიქსელი, დააწკაპუნეთ OK.შემდეგი განაცხადი ეფექტი > სტილიზაცია > ჩამოგდება ჩრდილიშემდეგი პარამეტრებით:

შერევის რეჟიმი : რბილი განათება;

გამჭვირვალობა: 80%;

Shift X ღერძის გასწვრივ (X Offset): 0 პიქსელი;

Shift Y ღერძის გასწვრივ (Y Offset): 1 პიქსელი;

დაბინდვა: 0 პიქსელი;

ფერი: თეთრი.

ნაბიჯი 14

შემდეგ, მწვანე წრის შერჩევით, კვლავ დაამატეთ ახალი შევსება, გადაიტანეთ იგი პანელში გარეგნობა, დაამატეთ ხაზოვანი გრადიენტი, კუთხე: 90 გრადუსი,ფერების სანახავად იხილეთ სურათი. შემდეგ მენიუდან აირჩიეთ ობიექტი > ბილიკი > შექმენით პარალელური ბილიკი (ობიექტი > ბილიკი > ოფსეტური ბილიკი), ოფსეტი (გადაადგილება) 15 პიქსელი, დააწკაპუნეთ OK.
მენიუს საშუალებით დამატება ეფექტი დაბინდვა გაუსიანი ბუნდოვანი (ეფექტი > ბუნდოვანი > გაუსიანი ბუნდოვანი), რადიუსი (რადიუსი) 10 პიქსელი. დააწკაპუნეთ OK.

ნაბიჯი 15

ისევ, პანელზე არჩეული მწვანე წრე გარეგნობააირჩიეთ ქვედა შევსება და დააკოპირეთ იგი შერჩეული ობიექტის დუბლიკატის შექმნაზე დაწკაპუნებით (არჩეული ნივთის დუბლიკატი).გახსენით არსებული ეფექტი ამ შევსებისთვის პარალელური ბილიკი (Offset Path) და შეამცირეთ Offset (Offset) 10 პიქსელამდე, შემდეგ გახსენით ამ შევსების ეფექტი Gaussian Blur და შეამცირეთ რადიუსი 3 პიქსელამდე. დააწკაპუნეთ OK.

ნაბიჯი 16

აირჩიეთ მწვანე წრე პანელში გარეგნობააირჩიეთ მწვანე შევსება ფერით (R=70 G=175 B=15)და გადადით მენიუში ეფექტი > სტილიზაცია > შიდა ბზინვარებადა დააყენეთ შემდეგი პარამეტრები:

შერევის რეჟიმი: გადახურვა (გადახურვა);

ფერი შავი

დაბინდვა: 5 პიქსელი

აირჩიეთ Edge.
დააწკაპუნეთ OK.

დაამატეთ კიდევ ერთი ეფექტი: ეფექტი > სტილიზაცია > გარე ბზინვარება

შერევის რეჟიმი: ნორმალური;

ფერი R=10 G=125 B=0

გამჭვირვალობა: 100%;

დაბინდვა: 2 პიქსელი

ნაბიჯი 17

აირჩიეთ თეთრი კომპოზიციის გზა და შეცვალეთ მიმდინარე შევსება გრადიენტი - გრადიენტური ხელსაწყო (G): ტიპი: რადიალური თეთრიდან ნაცრისფერამდე R=211 G=211 B=211, კუთხე: 0 გრადუსი

ნაბიჯი 18

შერჩეული რთული ბილიკით, დაამატეთ მეორე შევსება და დააყენეთ მისი ფერი R=100 G=205 B=45. შეცვალეთ შერევის რეჟიმი გამრავლება, შემდეგ აირჩიეთ მენიუდან ობიექტი > ბილიკი > შექმენით პარალელური ბილიკი (Object > Path > Offset Path), Offset (Offset) -2,5 პიქსელი. დააწკაპუნეთ OK.

ნაბიჯი 19

შემდეგი, აირჩიეთ რთული გზა (თუ ის არ არის არჩეული), პანელში გარეგნობააირჩიეთ მიმდინარე სტრიქონი, შეცვალეთ მისი ფერი შავზე, გააპატარეთ გამჭვირვალობა 15%-მდე და დააწკაპუნეთ ხატულაზე Align Stroke to Inside. პანელზე დაბრუნება გარეგნობადა დაამატეთ კიდევ ერთი შტრიხი დაწკაპუნებით Add New Stroke ხატულაზე (ახალი ინსულტის დამატება)(სურათზე მითითებულია ლურჯი ისრით). აირჩიეთ ეს ახალი შტრიხი და გააპატარეთ გამჭვირვალობა 25%-მდედააწკაპუნეთ ხატულაზე Stroke გასწორება გარეთ.

ნაბიჯი 20.

შეარჩიეთ წრე რთული ბილიკთან ერთად და დააკოპირეთ ისინი დაწკაპუნებით Ctrl + C > Ctrl + F.ახლა აირჩიეთ ეს ასლები და გადაიტანეთ ისინი რამდენიმე პიქსელით, როგორც ნაჩვენებია მეორე სურათზე.

ნაბიჯი 21

აირჩიეთ კოპირებული ღილაკის წრე და პანელში გარეგნობააირჩიეთ მეხუთე შევსება (დათვლა ქვემოდან) და შეცვალეთ გრადიენტური ფერები სურათზე ნაჩვენები ფერებით (ყვითელი და ნარინჯისფერი). შემდეგ შეცვალეთ მწვანე შევსების ფერი ფორთოხლით (R=227 G=128 B=10). აირჩიეთ ეს ნარინჯისფერი შევსება და გახსენით მისი ეფექტი გარე ბზინვარებადა შეცვალეთ პარამეტრები: შერევის რეჟიმი: ნორმალური;

ფერი R=239 G=65 B=54

გამჭვირვალობა: 100%;

დაბინდვა: 2 პიქსელი.

ნაბიჯი 22

ნაბიჯი 23

ვიმედოვნებ, რომ მოგეწონათ გაკვეთილი და გამოიყენებთ ნასწავლს თქვენს მომავალ პროექტებში.

06.07.2015 27.01.2018

ამ გაკვეთილში ჩვენ დავხატავთ ღილაკს გარკვეული სტილის ვებსაიტისთვის. დროის შესანარჩუნებლად, არჩეული იქნა თანამედროვე სტილი, რომელიც გამოიყენება ბევრ საიტზე.

Photoshop-ში ღილაკის დახატვა არ არის პრობლემა. სინამდვილეში, მე ვაჩვენებ მეთოდს ამ ღილაკის მაგალითის გამოყენებით. ამ ცოდნის გამოყენებით, შეგიძლიათ შექმნათ თქვენი საკუთარი ღილაკები თქვენი საკუთარი სტილის დაკავშირებით და გამოყენებით.

მთავარი ის არის, რომ ღილაკი სწორად ჯდება საიტის დიზაინში ან იმ დიზაინში, სადაც გამოიყენებთ მას.

შექმენით ახალი დოკუმენტი Photoshop-ში. ხელსაწყოს გამოყენებით დავხატავთ ღილაკს მართკუთხედი მომრგვალებული კუთხეებით.

ახლა თქვენ უნდა დააკონფიგურიროთ ინსტრუმენტი. ფერი მე გამოვიყენე არის ნარინჯისფერი - #ff8b00. და დააყენეთ კუთხეების რადიუსი 4 პიქსელი.

ახლა ჩვენ ვხატავთ ღილაკს თავად. გააკეთეთ ზომები იმის გათვალისწინებით, თუ რამდენ ხანს იქნება ღილაკზე წარწერა დაახლოებით - ცოტა გრძელი ისე, რომ ყურები იყოს.

ახლა მოდით შევქმნათ პატარა მოცულობა ბრტყელ სტილში. ეს პარადოქსია, მაგრამ მოცულობა იქნება ბრტყელი სტილი. ამისათვის გააკეთეთ ფენის ასლი მართკუთხედით ( CTRL + J) და მართკუთხედი, რომელიც უფრო დაბალია ფენებში - გადაიტანეთ იგი 2-3 პიქსელით ქვემოთ სამუშაო ზონაში. შეცვალეთ მისი ფერი უფრო მუქზე, ამ შემთხვევაში - #bf6800

შედეგი ასე უნდა გამოიყურებოდეს. პრინციპში, შეგიძლიათ მოცულობა უფრო დიდი გახადოთ, ეს ყველაფერი დამოკიდებულია იმაზე, თუ რამდენად გადაადგილდებით ქვედა ოთხკუთხედს. ეს არსებითად არის ღილაკი ღილაკის ქვეშ.

ახლა იმისათვის, რომ ღილაკი უფრო საინტერესო და წვნიანი იყოს, მე გთავაზობთ სტილის დამატებას გრადიენტიზედა ოთხკუთხედამდე. ამისათვის ორჯერ დააწკაპუნეთ ფენაზე მართკუთხედით და იპოვეთ სტილი გრადიენტური გადაფარვა.

აუცილებელია შეასრულოთ კორექტირება - დახრის კუთხე 90 გრადუსია.

და ასევე თავად გრადიენტი, ფერები - #ff8c00და #ffcc3f.

ღილაკი შეიცვალა.

რჩება მხოლოდ წარწერის დამატება. გამოვიყენე Myriad Pro შრიფტი და თეთრი ფერი. შრიფტის ზომა და ფერი - თქვენ ასევე უნდა აირჩიოთ დიზაინის მიხედვით, სადაც განთავსდება თქვენი ღილაკი.

მაგრამ თეთრი წარწერა ზოგიერთისთვის შეიძლება რთულად წასაკითხად ჩანდეს. პრობლემის გადასაჭრელად, შეგიძლიათ გააკეთოთ სუფთა, ნათელი, პატარა ჩრდილი.

ამისათვის გააკეთეთ ფენის ასლი წარწერით და გადაიტანეთ 1 პიქსელის ქვემოთ და შეცვალეთ ფერი - #be6d00. ჩვენ იგივე გავაკეთეთ მართკუთხედებით.

დღეს ჩვენ შევეცდებით ვისწავლოთ როგორ დავხატოთ მსგავსი პრიალა ღილაკი Inkscape-ში. როდესაც ახლახან ვსწავლობდი Inkscape გრაფიკულ რედაქტორს, ეს იყო ჩემი პირველი ლამაზი ნახატი, რომელიც მასში დავხატე. ღილაკისთვის მწვანე ავირჩიე, მაგრამ თქვენ შეგიძლიათ აირჩიოთ ის ფერი, რომელიც ყველაზე მეტად მოგწონთ. აბა, დავხატოთ ღილაკი?

ღილაკის დახატვა Inkscape-ში

ჯერ დავხატოთ წრე, რომელიც იქნება ღილაკის საფუძველი. ვხატავ წრეს ზომები სიგანით და სიმაღლით 900x900 px. მნიშვნელოვანია, რომ წრე თანაბარი იყოს. შეავსეთ იგი რადიალური გრადიენტით, მოათავსეთ გრადიენტი, როგორც სურათზე. გრადიენტის ცენტრალური წერტილი იქნება 10% ნაცრისფერი, ხოლო ორი გვერდითი წერტილი 70% ნაცრისფერი.

მეორე ნაბიჯი არის დუბლირება ( Ctrl+D) უკვე დასრულებული წრე. შემცირება გასაღებით ( < ) შიდა წრე სიგანისა და სიმაღლის მნიშვნელობებამდე 720x720 pxდა აჩვენეთ იგი ვერტიკალურად. საჭიროების შემთხვევაში, წრეები უნდა იყოს ერთმანეთთან ჰორიზონტალურად და ვერტიკალურად.

შემდეგი ღილაკის დახატვადა განახორციელეთ იგივე ოპერაცია წრის დუბლიკატით. გაიმეორეთ შიდა წრე და შეამცირეთ იგი ზომამდე 670x670 px. რადიალური გრადიენტის გამოყენებით მას ვაძლევ მწვანე ფერს, გადადის ღიადან მუქამდე. გრადიენტის ცენტრალური წერტილი არის ფერი #aaffaa, გვერდითი წერტილების ფერია #00aa00.

ახლა თქვენ უნდა დაამატოთ მოცულობა ღილაკზე. დუბლიკატი ისევ, მაგრამ ამჯერად შიდა მწვანე წრე და მიეცით ფერი 90% ნაცრისფერი. რადიალური გრადიენტისთვის დაგვჭირდება საყრდენი წერტილები. დააწკაპუნეთ "შეცვლა" და ფანჯარაში ერთხელ დააწკაპუნეთ "Add anchor point".

თითოეულ პუნქტს უნდა მიეცეს თავისი ფერი და გამჭვირვალობა. ამრიგად, ცენტრალური წერტილი იქნება 100% გამჭვირვალე, მიეცით წამყვან წერტილებს 40% ნაცრისფერი ფერი და ასევე დააყენეთ აბსოლუტური გამჭვირვალობა, ხოლო გვერდით წერტილებს არ აქვთ გამჭვირვალობა და ფერი არის 90% ნაცრისფერი. ჩვენ გადავაადგილებთ წამყვან წერტილებს, როგორც ფიგურაში, უბრალოდ მაუსის საშუალებით გადმოვთრევთ.

გაკვეთილზე „ღილაკის დახატვა Inkscape-ში“ რჩება მხოლოდ მაჩვენებლების დამატება. ამისათვის თქვენ უნდა დახაზოთ ოვალური, დაახლოებით იგივე ფორმა, როგორც სურათზე. ზომაში მაქვს 380x190 px. დარწმუნდით, რომ ის ვერტიკალურად გაასწორეთ მწვანე წრესთან.

როდესაც ოვალური მზად არის, თქვენ უნდა შეავსოთ იგი თეთრით ხაზოვანი გრადიენტის გამოყენებით. ქვედა წერტილი არის სრულიად გამჭვირვალე, ხოლო ზედა აქვს გამჭვირვალობის მნიშვნელობა 70%.

მოდით დავხატოთ მეორე ხაზი, მაგრამ ოდნავ განსხვავებული გზით. შექმენით ოვალური ან დუბლიკატი წინა, ჩამოწიეთ ქვემოთ, როგორც სურათზე. ჩემი ზომა 240x90 px. მიზანშეწონილია ორი ოვალური (ხაზგასმული) ერთმანეთთან ვერტიკალურად გასწორება.

მას თეთრად ვხატავთ რადიალური გრადიენტის გამოყენებით - ცენტრალურ წერტილს აქვს გამჭვირვალობის მნიშვნელობა 40%, ხოლო გვერდითი წერტილები სრულიად გამჭვირვალეა.

ესე იგი, პრიალა ღილაკი მზადაა! ახლა ასეთი პრიალა ღილაკის დახატვას მხოლოდ რამდენიმე წუთი მჭირდება, თუმცა მანამდე გაცილებით მეტი დრო დამჭირდა. ვიმედოვნებ, რომ თქვენ სწრაფად დაეუფლებით ამ დიზაინებს და შეძლებთ ექსპერიმენტების ჩატარებას ღილაკების ფერებსა და ფორმებზე. გაკვეთილი „ღილაკის დახატვა Inkscape-ში“ დასრულდა და შევხვდებით გაკვეთილებზე „“ და „“.