Від автора: на минулих заняттях ми розглянули теоретичні основи веб-дизайну. Пора переходити до практичних занять, тому сьогодні Ви отримаєте базові уроки веб-дизайну в Фотошопі і навчитеся створювати стильні кнопки для сайту.
Рекомендую Вам, в першу чергу, вивчити цю програму. Новачки, любителі і професіонали — всі працюють у Фотошопі. Без нього не уявляють свого життя тисячі дизайнерів, художників, поліграфістів і веб-майстрів.
Якщо робота веб-дизайнера доведеться Вам до душі, за допомогою Фотошопу Ви зможете не тільки обробляти фотографії, але і робити сайти, обкладинки книг, банери і багато іншого! Величезний арсенал засобів редагування, обробки і монтажу зображень, точна колірна калібрування, «ювелірна» робота з кольором роблять Adobe Photoshop самим популярним, та що там говорити — найкращим графічним редактором.
Дана стаття буде Вам корисна в тому випадку, якщо Ви тільки вчитеся використовувати Photoshop в своїй роботі. Відразу приготуйтеся до того, що будете постійно вивчати цю програму, удосконалювати свої навички і виробляти свій власний стиль.
Як почати вивчення Фотошопу?
Щоб зрозуміти, як користуватися Фотошопом, почніть з теоретичних основ. В першу чергу, скачайте і встановіть програму. Якщо у вас сучасний комп’ютер на базі процесорів FX або i5–i7, з мінімум 8 гігабайтами оперативки, можете сміливо встановлювати Photoshop СЅ6, якщо характеристики нижче доведеться задовольнятися PhotoshopCS5.
Встановили? Молодці, тепер прийшов час познайомитися з різноманітними інструментами та елементами інтерфейсу. Якщо будете регулярно займатися уроками Photoshop для web-дизайну, то поступово вивчіть всі ці інструменти в процесі практичних занять.
Не лякайтеся цієї програми, навіть якщо починаєте її вивчення з нуля. У Вашому розпорядженні тисячі книг, журналів, комплексних навчальних відеокурсів і уроків дизайну сайту в Фотошопі, які структуровані таким чином, щоб донести до новачка максимум корисної інформації в найкоротші терміни.
Додатково я б порадив Вам полазити по різним професійним сайтів і вивчити їх оформлення та структуру, щоб знайти інформацію про модні тенденції в сфері веб-дизайну, сформувати своє особисте бачення і розвинути художній смак.
Як налаштувати Photoshop для веб-дизайну?
Натискаємо Вікно – Робоче середовище – Друкарня. Справа у Вас з’являться панелі роботи з шарами і шрифтами.
Далі, раджу перейти в налаштування Ctrl+K і в розділі «Одиниці вимірювання і лінійки» вибрати Пікселі, т. до. ми працюємо для вебу, де використовуються пікселі, а не сантиметри.
Створюємо новий файл: Файл — Новий, в кожному новому проекті перевіряємо, щоб у налаштуваннях Ширини та Висоти стояли Пікселі. Дозвіл — 72 точки на дюйм. Колірна модель повинна бути вказана RGB кольору 8 біт.
Взагалі, до параметрів створення нового документа належать:
Ім’я майбутнього документа. Його зазвичай призначають при збереженні файлу;
Ширина і Висота зображення. У нашому випадку задається в пікселях, які являють собою одиницю зображення в растровій графіці;
Дозвіл — кількість точок на дюйм. Стандартним дозволом вважається 72 пікселя на дюйм;
Режим. Найпоширенішим є RGB колір, глибина якого визначається в бітах. Зазвичай вистачає 8 біт;
Вміст фону, що визначає фон зображення.
Наступна налаштування, про яку хотілося б згадати і про яку часто незаслужено забувають, — це настройка звичайної стрілки. Ставимо галочку в Автовыборе, вибираємо Шар і «Показувати управління трансформацією». Завдяки цьому параметру навколо виділених областей буде з’являтися пунктирний прямокутник з маніпуляторами в серединах і кутах сторін.
Ну і остання налаштування, яку потрібно зробити, — це налаштування на позитив 
. Без неї у вас не буде достатньої мотивації, щоб ефективно і послідовно проходити уроки веб-дизайну в Фотошопі.
Створюємо прямокутник в Photoshop
Розповім Вам, як зробити простенький об’єкт в Фотошопі. За допомогою інструменту «Прямокутник» створюємо однойменну фігуру, задаємо їй потрібний колір заливки та межі. Тут же можна створити прямокутник із закругленими кутами.
Невеликий лайфхак: якщо ви виділяєте який-небудь об’єкт (у даному випадку, прямокутник), то ви зможете змінити його розміри пропорційно, виділивши його і затиснувши клавішу Shift. Таким чином, ви не деформируете зображення.
Це дуже зручно, коли ви працюєте з іконками. Затиснувши клавішу Alt, ви зможете скопіювати об’єкт перетягування лівою кнопкою миші.
Робимо кнопку для сайту в стилі flat design
Напрям «плоский дизайн» останнім часом надзвичайно популярне в створенні сайтів. При цьому побудова його елементів не вимагає екстраординарних художніх навичок.
Щоб ви не відставали від сучасних тенденцій, у сьогоднішньому уроці веб-дизайну в Фотошопі я навчу Вас, як швидко і легко зробити кнопку для сайту, навіть не володіючи глибокими знаннями цієї програми.
Створюємо новий документ Файл — Новий і вибираємо інструмент «Прямокутник з округленими кутами».
Вибираємо колір, наприклад, помаранчевий #ff8b00, і радіус кутів — 4 пікселя.
Малюємо кнопку потрібного розміру:
Щоб зробити невеликий обсяг в стилі «плоского дизайну», виконайте наступний прийом. Створіть копію шару з нашою кнопкою Ctrl + J, потім нижній шар з прямокутником на 2-3 пікселя посуньте вниз. Зробіть його більш темним колір, наприклад, відтінку #bf6800.
Вийде приблизно такий результат:
На верхній прямокутник можна додати стиль «Градієнт». За допомогою подвійного кліка натисніть на шар з фігурою, виберіть стиль «Накладення градієнта» і поставте кут нахилу 90 градусів.
Кольори градієнта — #ff8c00 і #ffcc3f.
Тепер наша кнопка виглядає так:
Для підпису можна застосувати шрифт Myriad Pro білого кольору.
Щоб напис був більш зрозумілій, створимо невелику тінь. Для цього виконаємо ті ж дії, що і з прямокутниками. Скопіюємо шар з написом, а нижній шар передвинем вниз на 1 піксель і задамо колір #be6d00.
Результат:
Як бачите, намалювати стильну кнопку у Фотошопі — це не проблема. Тепер Ви можете створювати власні кнопки. Головне, щоб вони вписувалися в дизайн сайту, де Ви їх будете використовувати.
На цьому наш урок веб-дизайну в Фотошопі підійшов до кінця. Сподіваємося, у Вас все вийшло, і Ви витягли максимум користі з вищевикладеної інформації.
Підписуйтесь на наш блог і отримуйте на пошту все нові публікації по веб-дизайну. Рекомендуйте нас своїм друзям в соціальних мережах. Нові знання та ідеї ще нікому не завадили . До нових зустрічей!
