Веб-сайтқа батырмаларды қалай салуға болады

Мазмұны:

Веб-сайтқа батырмаларды қалай салуға болады
Веб-сайтқа батырмаларды қалай салуға болады

Бейне: Веб-сайтқа батырмаларды қалай салуға болады

Бейне: Веб-сайтқа батырмаларды қалай салуға болады
Бейне: HTML сабақтары #9 - Сурет қоюдың жолдары 2024, Мамыр
Anonim

Қолдануға ыңғайлы интерфейс, жақсы сызылған графика, элементтердің парақтағы дұрыс орналасуы - сайттың келушімен сәттілігінің жартысы. Веб-сайтқа батырмаларды салу - бұл онлайн-жобада жұмыс істеудің кішкентай, бірақ маңызды бөлігі.

Веб-сайтқа батырмаларды қалай салуға болады
Веб-сайтқа батырмаларды қалай салуға болады

Нұсқаулық

1-қадам

Дөңгелек түймені салып көріңіз. Төменде келтірілген әдіс логотиптер мен аватарларды жасауға әмбебап болып табылады. Сіз оны орындауыңыз керек болған көптеген әрекеттерге қарамастан, сурет салу қиын емес.

2-қадам

Adobe Photoshop бағдарламасын ашыңыз. «Ctrl + N» тіркесімін басу арқылы жаңа құжат жасаңыз. Кескін параметрлері 300 * 300, ажыратымдылығы 72 ppi. Әдепкі фон және түс режимі сәйкесінше ақ және RGB болып табылады.

3-қадам

Түйме азайған кезде оның сапасы нашарламайтындай етіп векторлармен сурет салған дұрыс. Сопақ құралын таңдап, Shift пернесін басып, ортасынан шеңбер салыңыз.

4-қадам

Енді алынған шеңберге бірнеше эффект қолданыңыз. «Қабаттар» - «Қабат стилі» - «Араластыру параметрлері» мәзіріне өтіңіз. Мұнда сізге градиент қолдану қажет болады.

5-қадам

Содан кейін, мында батырмаға қажетті шығыңқылықты беру үшін «Бедерлеу» жанындағы құсбелгіні қойып, келесі параметрлерді орнатыңыз: стиль - контурлық рельеф, әдіс - жұмсақ кесу, тереңдік - 220%, өлшем - 1 пиксель, жұмсарту - 5 пиксель, бұрышы - ғаламдық жарықтандырусыз 135о, биіктігі - 32, бөлектеу режимі - 30% мөлдірлікпен қалыпты, көлеңке режимі - 25% мөлдірлікке көбейтіңіз

6-қадам

Одан да көп көлем беру үшін, араластыру параметрлерінде «Көлеңке» құсбелгісін қойып, келесі параметрлерді қойыңыз: араластыру режимі - көбейту, мөлдірлік - 40%, бұрыш - 125o ғаламдық жарықтандыруды қолдану, офсеттік - 5 пиксель, өлшемі - 20 пиксель..

7-қадам

Орындалған әрекеттердің нәтижесі суретте көрсетілгендей кескін болады.

8-қадам

Енді жаңа қабат жасаңыз, қайтадан «Сопақша» таңдаңыз және радиусы бірінші пішінге қарағанда кішірек сызыңыз. «Араластыру опцияларын» ашыңыз, «Ішкі көлеңке» жанындағы құсбелгіні қойыңыз және параметрлерді орнатыңыз: Араластыру режимі - Жұмсақ жарық, бұрыш - 125o, офсеттік - 0px, кішірейту - 45%, өлшем - 21px.

9-қадам

Әрі қарай, араластыру нұсқаларында «Градиент қабаттасуын» тексеріп, суреттегідей параметрлермен градиент жасаңыз. OK түймесін басыңыз

10-қадам

Араластыру мәнерін радиальды, масштабты 124% етіп орнатыңыз

11-қадам

Енді «Соққы» құсбелгісін қойып, келесі параметрлерді орнатыңыз: өлшемі - 5 пиксель, позициясы - сыртында, араластыру режимі - қалыпты, мөлдірлігі - 100%, инсульт түрі - градиент.

12-қадам

Осы әрекеттердің нәтижесінде сіз батырмаға көбірек ұқсайтын нәрсе алуыңыз керек. Араластыру опцияларын қайта ашып, олармен тәжірибе жасауға болады.

13-қадам

Енді батырма әйнек құрылымына ие болатындай етіп, біз жарқын түймелерді қосуымыз керек. Ол үшін қайтадан жаңа қабат құрып, «Сопақ таңдау» құралын таңдап, батырманың үстінде сопақ құрып, «Толтыру» құралының көмегімен ақ түске толтырыңыз. Ctrl пернесін басып, түсті шеңбермен қабатты шертіңіз, таңдауды төңкеріңіз («Таңдау» - «Инверсия»). Енді Жою түймесін басыңыз. Сопақ шеңбердің периметрі бойынша кесілуі керек.

14-қадам

Қабаттар панелінде Қалыпты параметрді Жұмсақ жарыққа өзгертіңіз, содан кейін векторлық маска белгішесін басып, Толтыру құралы - Градиентті таңдаңыз. Бөлектеуді төменнен жоғарыға толтырыңыз. Түйме дайын.

15-қадам

Түймеге жазба қосуға болады. Сіз оған ішкі, сыртқы жарқыл, градиент және т.б сияқты араластыру эффектілерін қолдануға болады. Тәжірибе жасаудан қорықпаңыз, өз жұмысыңызда қиялды қаншалықты көп қолдансаңыз, соғұрлым редактордың өзін де, веб-дизайнды да тез меңгересіз.

Ұсынылған: