Базові уроки веб-дизайну в Фотошопі

40

Від автора: на минулих заняттях ми розглянули теоретичні основи веб-дизайну. Пора переходити до практичних занять, тому сьогодні Ви отримаєте базові уроки веб-дизайну в Фотошопі і навчитеся створювати стильні кнопки для сайту.

Рекомендую Вам, в першу чергу, вивчити цю програму. Новачки, любителі і професіонали — всі працюють у Фотошопі. Без нього не уявляють свого життя тисячі дизайнерів, художників, поліграфістів і веб-майстрів.

Якщо робота веб-дизайнера доведеться Вам до душі, за допомогою Фотошопу Ви зможете не тільки обробляти фотографії, але і робити сайти, обкладинки книг, банери і багато іншого! Величезний арсенал засобів редагування, обробки і монтажу зображень, точна колірна калібрування, «ювелірна» робота з кольором роблять 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.

Результат:

Як бачите, намалювати стильну кнопку у Фотошопі — це не проблема. Тепер Ви можете створювати власні кнопки. Головне, щоб вони вписувалися в дизайн сайту, де Ви їх будете використовувати.

На цьому наш урок веб-дизайну в Фотошопі підійшов до кінця. Сподіваємося, у Вас все вийшло, і Ви витягли максимум користі з вищевикладеної інформації.

Підписуйтесь на наш блог і отримуйте на пошту все нові публікації по веб-дизайну. Рекомендуйте нас своїм друзям в соціальних мережах. Нові знання та ідеї ще нікому не завадили :) . До нових зустрічей!