Як навчитися красиво малювати починаючому дизайнерові інтер'єру.
Приступимо до малювання макета майбутнього сайту. Буду малювати звичайно нескладний макет, так би мовити theme framework - мінімальний дизайн, але за допомогою якого можна зробити цілком пристойний і насичений дизайн сайту. Орієнтування - макет для сайту на DLE, класичний трьох-стовпчик веб-дизайн сайту з встановленої CMS DLE версій 7-8. Отже, приступимо, я використовую Adobe Photoshop CS3 офіційну російську версію. У цьому уроці не розглядатимуться основні прийоми роботи з фотошопом такі як вибір будь-якого інструменту, вставка тексту.
Зверніть увагу на все, що ви вважаєте найбільш «придатним» для своїх потреб. Порада: не витрачайте занадто багато часу на цьому етапі. Ви можете вплинути на ваш дизайн, тільки з результатом створення «схожого на" графіка, і загальне правило полягає в тому, що коли ви намагаєтеся переписати чужий стиль, ви майже завжди отримуєте погану копію.
Крок 2: Висловіть себе в деталях
Чи є це просто ескізом без голови або хвоста, ви зможете подолати занепокоєння від «порожніх» і змінити таким чином ідеї. Після того, як ви розмістите графіком структури, вам потрібно буде працювати над деталізацією. Шрифти і друкарня в цілому, розміщення зображень і контенту, естетичне збагачення, кожен з цих елементів - це те, що зробить вашу роботу особливою то естетично красивою.
Для оператора програми фотошоп - мінімальний. Що ж можна збагнути таке нескладне, але щоб ви зрозуміли як що робиться без особливих зусиль? Намалюємо шапку, ліві і праві блоки, центральну частину і футер (підвал сайту).
Причому дизайн всіх блоків, лівих, правих і центральних буде однаковий, різниця лише в ширині, для блоків візьмемо ширину 200 пікселів, для центральної частини все що залишиться.
Цей крок не можна недооцінювати: вибір правильного шрифту, наприклад, може зайняти багато часу і опинитися досить складним. Це може бути дуже неприємно чекати ідеї, яка не хоче знати, як туди дістатися. на даний момент марно залишатися прибитим до екрану, турбуючи розум. Викличте час доставки і доставку: Зробіть перерву. Вимкніть комп'ютер, погуляйте, спите, прийміть душ, викличте когось. Будь-яка діяльність в порядку, за умови її підтвердження і не має ніякого відношення до веб-дизайну.
І не відчувайте себе винуватим, якщо ви не залишаєтеся прив'язаним до комп'ютера 24 години на добу - графік повинен знати, що правильна інтуїція має свого часу, будь то півгодини або два тижні. Якщо, нарешті, ваша фантазія вирішила піти, вона почне графіком ваших ідей через будь-яку графічну програму.
Також зауважу, що буду малювати макет з фіксованою шириною - стандартна 960-піксельна grid system, щоб наш сайт однаково добре відображався на моніторах з роздільною здатністю від 1024х768 пікселів і вище (це монітор 19 дюймів).
Запускаємо фотошоп і натискаємо в меню Файл-Новий ... або Ctrl + N. Задаємо ширину 1040 пікселів і висоті 1400 пікселів як показано на малюнку. Я задаю на 80 пікселів більше, щоб візуально бачити сам макет на навколишньому фоні.
Щоб відзначити ліміти, введіть два керівництва в документі. Давайте почнемо надати відтінок кольору на нашій сторінці. З інструментом прямокутника ми малюємо дві бічні секції: справа - 426 пікселів і зліва від 654 пікселів. Оскільки кольору, на яких ми повинні орієнтуватися, є теплими кольорами, такими як помаранчевий і червоний, ми фарбуємо ці ділянки оранжевого кольору.
Щоб створити приємний контраст, в правому прямокутнику замість того, щоб обмежувати колір фону, ми вставляємо гранульований шаблон шаблону паперу. Таким чином, ми отримуємо наступний результат. На цьому етапі ми проведемо в центрі білої секції прямокутну округлу ширину 560 пікселів і висоту 232 пікселя. Це буде наш заголовок, в який ми додамо зображення, відповідне для подання бізнесу нашого клієнта.
Тепер нам треба позначити межі макета, натискаємо Ctrl + R, щоб побачити лінійки. До речі нам треба, щоб одиниці виміру були пікселі, для цього натискаємо правою кнопкою мишки по лінійці і ставимо там галочку на пікселі.
Тепер треба витягнути допоміжні напрямні, і тим самим позначимо кордону макета. Робиться це так - ставимо курсор мишки на лінійку, натискаємо і тягнемо направляючу на 40 пікселів по горизонтальній лінійці. Ми залишимо по боках по 40 пікселів.
В результаті нашого дослідження ми вибрали такі образи, які, як визначено в короткому описі, Зображують дітей, які грають, веселяться і взагалі образи, пов'язані зі світом дитинства. Також для вибору зображень, довірених вашим інстинктом і орієнтованих на образи, які для їх кольорів або предметів, відчувають себе комфортно. Вибирайте якомога більше: в більш пізній час ви розібралися кращі, які ви можете використовувати в графічному дизайні.
На цьому етапі ми вирішили поставити фотографію дитини маріонеткою в прямокутник голови. По-перше, ми повинні змінити розмір фотографії так, щоб вона мала той же розмір, що і прямокутник. У списку доступних шаблонів, виберіть той, який ви тільки що створили, і застосуєте його. Як ви можете бачити, вибране зображення не тільки висловлює основні концепції діяльності клієнта, а й лялька дитини також нагадує помаранчевий колір, обраний для фону. Пам'ятайте, що повага і виділення правильних комбінацій кольорів можуть бути ключем до успіху вашого макета.
Витягуємо справа теж, тільки на шириною 1000 пікселів, ось і отримуємо по 40 пікселів по боках. Зверху витягнемо теж на 40 пікселів і отримаємо ось таку картинку.
Картина маленької дівчинки на помаранчевому тлі поміщає її в ліву частину секції, щоб створити стихійний і оригінальний ефект: схоже, що маленька дівчинка з її пензлем розфарбовує фон нашого сайту. Щоб збагатити все, що ми додаємо, з щітками-карлючками, легко доступними в мережі, деякими книжниками та дитячими малюнками. Котеджі, флоріни, птиці. Пам'ятайте, що це сайт притулку, і ви можете потім перебільшувати дизайн і кольори.
В правому куті ми, нарешті, вставляємо маленьку дівчинку з рекламним щитом: це може бути корисно пізніше. Щоб пом'якшити відкриття і закриття сайту, додамо білі «хмари», які збагатять естетику сторінки і нададуть нам можливість створити у верхній частині «порожній простір», де ви можете вставити логотип притулку.
Шапку робимо висотою 160 пікселів, тому витягуємо направляючу на 200 пікселів зверху (160 + 40px). Тепер позначимо лівий і правий сайдбарі, по 200 пікселів кожен. Лівий - витягуємо на 240 (40 + 200px), правий на 800 (1040-40-200px).
Робимо горизонтальне меню, для цього від шапки зверху внизу відміряє 20 пікселів, витягуємо направляючу на 230 пікселів зверху. Зрештою отримуємо таку картинку.
Щоб вставляти хмари, ми можемо вибирати з безлічі варіантів: ті, хто більш впевнений у використанні інструменту жахливого ручка, можуть малювати їх вручну, інакше в мережі можуть бути знайдені різні кисті або фігури, які можуть стати в нагоді. Поруч з головою ми малюємо більше хмара, де ми вставляємо логотип. Наш сайт починає складатися.
Чи є в текстах правильні поля і вирівнювання? Буде легше помітити, як тільки тексти будуть відформатовані, будь-які помилки в друкарні. Таким чином, сторінка виглядає збалансованою і витонченою. На цьому етапі ми можемо присвятити себе вибору шрифту для назв сторінок і навігації. А для контенту нам потрібно обмежитися декількома веб-безпечними шрифтами, в цьому випадку ми дійсно можемо похвалитися, так як під час кодування ми будемо експортувати всі як образ.
Мабуть почнемо з відтворення меню висотою 30 пікселів. Буду малювати щось сіро-біле, щоб макет підходив під практично будь-яку тематику. Наприклад, під будівництво або ремонт, кіно або книги.
Вибираємо інструмент прямокутна область клавішею М. Виділяємо область для меню і інструментом заливка G заливаємо виділену область кольором #BBBBBB. Далі натискаємо в меню Виділення-Модифікація-Стиснути, там вводимо 1 піксель і натискаємо ОК. Тепер заливаємо виділену область кольором #efefef. Натискаємо Ctrl + H щоб приховати напрямні і бачимо ось таку картинку - блок меню з рамкою. Чи не влазить в екран, але ось що приблизно.
Використовуйте напрямні, щоб упевнитися, що кожен елемент вирівняний один з одним і відповідає інтервалу між одним голосом і іншим: якщо є запас в 30 пікселів між «будинком» і «притулком», всі інші посилання також повинні мати, Це відстань між ними. Додайте трохи творчого дотику: ми використовуємо маленьку дівчинку з рекламним щитом, вставленим в нижньому правому куті як «носія повідомлень». Ми можемо ввести слоган, матч з ігровою грою або щось ще.
У каркасі ми бачили, що на домашній сторінці, Крім класичного тексту презентації, повинна бути вбудована невелика фотогалерия. На сторінці ми потім вставляємо заголовок «Фотогалереї», щоб розділити текстовий вміст на фотографії і дати зрозуміти, що це розділ, що не залежить від тексту головної сторінки.
Можна провести ще одну направляючу під меню на відстані 5 пікселів, щоб відокремити менюшку від контенту області. Тепер давайте заповнимо шапку. Створюємо новий шар (Шар-Новий-Шар ... або Crtl + Shift + N). Далі я використовую ось таку іконку, додаю її в шапку. Для цього вам треба зберегти цю іконку, потім відкрити її в фотошопі, виділити її (Ctrl + A) і скопіювати Ctrl + C. Переходимо в наш макет і натискаємо Ctrl + V щоб вставити іконку.
За допомогою інструменту прямокутника ми намалюємо маленькі округлі прямокутники - ми використовуємо цю форму для нагадування округлості зображення в заголовку - і створюємо наші мініатюри. На цьому етапі, як і для зображення в заголовку, ми відкриваємо мініатюри і змінюємо їх розмір відповідно до розміру наших прямокутників. Ми повторюємо цю процедуру для кожної фотографії, поки кожен прямокутник не матиме іншу фотографію в якості заливки.
Ми майже закінчили наш сайт! Цей макет вже гарний, але він начебто відсутня щось. Хіба ви не думаєте, що бічні секції трохи «порожні»? Ну, давайте збагатимо їх трохи графікою. Отже, через короткий час ми повертаємося до цієї теми, на цей раз в поєднанні з панорамним зйомкою.
До речі я придумав тематику макета, давайте зробимо про фільм Iron Man 2 - Залізна людина 2. Думаю це буде приголомшливий фільм - фантастика і активний бойовик в одному сюжеті. Значить вибираємо інструмент горизонтальний текст T і пишемо в шапці назва фільму. Взяв шрифт Trajan Pro розміром 60 пікселів.
А тепер прийшла черга оформлення блоків. Давайте додамо ще одну направляючу, щоб отримати висоту заголовка блоку 30 пікселів. Давайте блоки оформимо в такій же кольоровій гамі, як і меню. Створюємо новий шар. Виділяємо прямокутну область заголовка блоку і заливаємо її кольором #bbbbbb, потім зменшуємо виділення на один піксель і заливаємо кольором #efefef, як я писав вище. Тепер черга тематичної області блоку сайдбара. Виділяємо область нижче заголовка по висоті на око і подібною операцією заливаємо блок. Отримуємо ось що.
Хоча після певних функцій вам потрібно йти в іншому місці, ви можете обробляти панораму з високим динамічним діапазоном, аналогічним чином виконуваних в інших програмах. Основою для зйомки панорамної фотографії є використання штатива і зйомка в ручному режимі. Ми докладно описали в статті, яку ви обов'язково прочитаєте, якщо серйозно подумати про цю фото дисципліни і ще не знаєте, як це зробити.
Брекетинг експозиції або не торкайтеся до мови
Наведена можна коротко викласти в декількох коротких пунктах для тих, хто вже контролює фотографічні методи, або у них немає часу, щоб прочитати текст нижче.
- У режимі брекетинга експозиції швидко знімайте окремі панорами.
- Намалюйте відповідну панораму з кожної експозиції.
Робимо те ж саме для тематичної центральній частині макета, не забудьте створити новий шар. Далі можна скопіювати шар, в якому ми намалювали лівий блок і продублювати його вниз, а також на правий сайдбар. Робиться це так. Знаходимо свій шар в панелі шари (щоб показати в меню Вікно-Шари) і натискаємо правою кнопкою миші по напису шару і вибираємо Створити дублікат шару. Потім вибираємо інструмент переміщення V і тягнемо цей шар вниз, щоб розташувати другий блок під першим.
Як встановити брекетінг експозиції на вашому комп'ютері можна знайти в його керівництві. Тут ви встановлюєте діапазон експозиції як двостороннє відхилення експозиції від значення, яке ви використовуєте за замовчуванням і за замовчуванням. Причина використовувати при зйомці для панорами ресурсів динамічного Експобрекетінг діапазон зусилля, щоб зробити фотографії як можна швидше, так що через деякий час вся панорама зйомки не розчув істотно змінити умови освітлення і зрушення рухомих об'єктів.
Зміна експозиції на камері вручну перед кожним наступним кадрів не споживаючи тільки час, але і дуже дратують і погрожуючи, що колись допустили помилку і фото колекцію для подальшої роботи буде кілька композицій витягів або відсутні.
Додам що-небудь в макет, наприклад текст і картинки, напишу меню. Я додав у меню кілька посилань на розділи сайту. Потім додав картинку в блок новини, додав тексту. Потім продублював до другого блоку. Розмножив блоки в сайдбарі для більшого візуального сприйняття. Ось що вийшло.
Після того, як ви встановили брекетінг експозиції, то це означає, що тепер ваша камеру, щоб зробити знімок з трьох натискань заслінок трьох пострілів, кожен з яких матиме різний вплив. В цьому режимі послідовно виконуйте окремі знімки. На відміну від звичайної панорами, ви знімаєте кожен знімок три рази з іншого експозицією.
Три частини нашої панорами, кожна з яких сфотографована на трьох різних рівнях експозиції
Оснащено серією зображень, які разом складають в цілому трьох панорам композиційних ідентичних, що відрізняються тільки значення експозиції, ми входимо в графічному програмне забезпечення, яке дозволить їх консолідації в Панорамік Імеджс. Сортуйте фотографії відповідно до їх експозиціями і створіть три різні панорами. Повністю автоматизовані функції програмного забезпечення допоможуть вам.
Робимо футер точно також як і блок з менюшку, пропишемо там трохи тексту. Наприклад, ось так як на скріншоті.
А тепер ще один прийом як без малювання пензлем перетворити будь-який елемент в більш красивий. Вибираємо шар, в якому власне знаходиться наша напис в шапці Iron Man 2 великими літерами.
Готова панорама, що складається із зображень із середньою експозицією
Створіть зображення з високим динамічним діапазоном
Коли слайди закінчені, переконайтеся, що програма має всі створені однакові розміри. Якщо їх розміри різні, вам необхідно об'єднати зображення. Таким чином, ми маємо три панорами, один з впливом «нормальними», то другими недотримано, який фіксує деталь і третє переекспонований неба, яке повинні змінити чітку тінь.Весь процес детально описаний в статті, тому ми нагадуємо йому тільки про наступні моменти. Слід зазначити, що, звичайно, вступає в гру і протилежність описаної вище процедури. На жаль, ця процедура менш підходить при зміні умов освітлення в панорамної області. У сьогоднішній роботі ми розглянемо одну з найважливіших і для новачків одну з найгостріших тем.
У віконці, що з'явилося включаємо галочку тінь, тепер пограємось з параметрами тіні. Я зробив ось так, як це видно на малюнку.
Далі ставимо галочку на накладення градієнта і заливаємо жовто-помаранчевим градієнтом, як показано на малюнку.
Вибираємо обведення, ставимо товщину обведення 2 пікселя і чорний колір і натискаємо ТАК, щоб застосувати стилі шару і закрити віконце.
Все макет готовий. Природно, що я не став писати урок про малюванні макета супер-креативного зразка, так як би на це пішло кілька днів. Як ви бачите, не треба нічого малювати, просто попрацювати стандартними операціями вставки-копіювання-заливки і т.д.
Створення привабливих і функціональних веб-макетів - невід'ємна частина життя веб-дизайнера. У цьому уроці ми будемо створювати професійний макет сайту з нуля. В процесі уроку Ви дізнаєтеся деякі корисні трюки при створенні дизайну.
Ресурси уроку:
- Набір іконок (wefunction.com)
Альтернативний набір іконок - Іконка Twitter (iconeden.com)
- Шрифт Bebas (dafont.com)
Крок 1. Mockup
Перш, ніж ми почнемо створювати макет сайту, потрібно створити план-ескіз майбутнього макета, на якому буде видно його функціональність і приблизний зовнішній вигляд.
Крок 2. Створюємо документ.
Ми будемо створювати макет сайту шириною в 960 пікселів. Для цього, створіть новий документ розміром 1200х1500 пікселів. Дозвіл 72 пікселя.
Так, як макет сайту буде шириною в 960 пікселів, нам потрібно визначити цю область, додавши напрямні. Виділіть весь документ ( Ctrl + A).
Перейдіть в меню Виділення - Трансформувати виділену область (Select\u003e Transform Selection). На панелі властивостей у верхній частині екрану встановіть значення ширини 960 пікселів. Це і буде робоча область макета.
Встановіть напрямні точно по межах виділення.
Нам потрібно створити відступ між краями робочої області макета і областю контенту, який ми додамо пізніше. При активному виділенні документа, знову перейдіть в меню Виділення - Трансформувати виділену область(Select\u003e Transform Selection). Зменшіть виділення по ширині до 920 пікселів. Це означає, що з кожного боку макета буде відступ в 20 пікселів, в результаті всього це 40 пікселів.
Встановіть напрямні по новому виділенню:
Крок 3. Створюємо шапку сайту.
Переходимо до створення шапки сайту. Створіть виділення висотою в 465 пікселів у верхній частині макета.
Залийте виділення сірим кольором, а в подальшому використовуйте стилі шару, щоб застосовувати кольори і градієнти.
До шапці додамо градієнтну заливку через стиль шару накладення градієнта(Gradient Overlay). Створіть градієнт з двох кольорів.
Тепер шапка буде виглядати так:
До шапці тепер потрібно додати підсвічування. Створіть новий шар ( Ctrl + Alt + Shift + N) і виберіть м'яку кисть розміром 600 пікселів. Виберіть колір # 19535a і пензлем клікніть один раз у верхній центральній частині шапки.
Створіть на шапці виділення в 110 пікселів.
натисніть Delete, Щоб видалити виділену частину.
Шар з підсвічуванням стисніть по вертикалі (Ctrl + T) .
Потрібно переконатися, що світлове пляма на шапці знаходиться рівно по центру. Для цього, зробіть активними шари з шапкою і підсвічуванням і виберіть інструмент переміщення(Move Tool) (V). На панелі властивостей у верхній частині екрану натисніть кнопку За центрами по горизонталі (Align Horizontal Centers).
Створіть новий шар (Shift + Ctrl + N) і намалюйте інструментом олівець(Pencil Tool) точку, розміром в 1 піксель. Для малювання використовуйте колір # 01bfd2.
Згладимо краю цього шару, використовуючи градиентную маску. Виберіть інструмент градієнт (Gradient Tool) і створіть градієнт, як показано нижче:
Застосуйте новий шар з маскою, яку залийте щойно створеним градієнтом.
Крок 4. Створюємо візерунок
Тепер створимо простий візерунок, який додамо до шапки. інструментом олівець (Pencil Tool) розміром в 2 пікселя намалюйте дві точки, як показано на малюнку. Вимкніть на час видимість фонового шару (клікніть по іконці очі близько фонового шару) і створіть візерунок (Редагування - Визначити візерунок) (Edit\u003e Define Pattern):
Створіть новий шар (Shift +Ctrl +N) і помістіть його під шар з підсвічуванням. Виділіть область, до якої Ви хочете застосувати візерунок і відкрийте вікно Виконати заливку(Fill) (Shift + F5). Натисніть ОК.
Після додавання текстури шапка виглядає так:
Зробіть плавний перехід від візерунка до шапки: до шару з візерунком додайте маску і м'якою кистю білого кольору (#ffffff) з непрозорістю 60% пройдіться по масці.
результат:
Крок 5. Додаємо логотип
Переходимо до додавання логотипу. Виберіть м'яку кисть з кольором # 19535a і намалюйте пляма.
Напишіть текст:
До шару з логотипом додайте стиль шару тінь(Drop Shadow).
Крок 6. Навігація
Додайте текст для навігації.
Намалюйте кнопку навігації, використовуючи інструмент Прямокутна область виділення(Rectangular Marquee Tool). Залийте виділення будь-яким кольором і зменшите параметр Заливка до нуля.
До шару з кнопкою додайте стиль накладення градієнта(Gradient Overlay).
Крок 7. Слайдер для контенту
Створіть виділення розміром 580х295 пікселів.
Залийте виділення будь-яким відтінком сірого.
Помістіть зображення. Закріпіть його з шаром, який створили раніше.
Тепер до слайдеру додамо ефект. Створіть новий шар (Shift + Ctrl + N), Оберіть Пензлик(Brush Tool) з діаметром 400 пікселів. Відкрийте палітру Кисть (F5) і встановіть ті параметри, які показані на скріншоті:
Виберіть чорний колір (# 000000) і намалюйте пляма:
Для пом'якшення країв застосуєте фільтр Розмиття по гаусу (Gaussian Blur).
Виділіть нижню половину тіні і видаліть (Delete).