Як намалювати шаблон сайту

Приступимо до малювання макета майбутнього сайту Приступимо до малювання макета майбутнього сайту. Буду малювати звичайно нескладний макет, так би мовити theme framework - мінімальний дизайн, але за допомогою якого можна зробити цілком пристойний і насичений дизайн сайту. Орієнтування - макет для сайту на DLE, класичний трьох-стовпчик веб-дизайн сайту з встановленої CMS DLE версій 7-8. Отже, приступимо, я використовую Adobe Photoshop CS3 офіційну російську версію. У цьому уроці не розглядатимуться основні прийоми роботи з фотошопом такі як вибір будь-якого інструменту, вставка тексту.

Для оператора програми фотошоп - мінімальний. Що ж можна збагнути таке нескладне, але щоб ви зрозуміли як що робиться без особливих зусиль? Намалюємо шапку, ліві і праві блоки, центральну частину і футер (підвал сайту).

Причому дизайн всіх блоків, лівих, правих і центральних буде однаковий, різниця лише в ширині, для блоків візьмемо ширину 200 пікселів, для центральної частини все що залишиться.

Причому дизайн всіх блоків, лівих, правих і центральних буде однаковий, різниця лише в ширині, для блоків візьмемо ширину 200 пікселів, для центральної частини все що залишиться

Також зауважу, що буду малювати макет з фіксованою шириною - стандартна 960-піксельна grid system, щоб наш сайт однаково добре відображався на моніторах з роздільною здатністю від 1024х768 пікселів і вище (це монітор 19 дюймів).

WordPress шаблони, які представлені на маркетплейсе TemplateMonster, можна назвати відмінними помічниками в створенні професійного. У вас не виникне жодних проблем з роботою над онлайн-проектом, адже вам не будуть потрібні знання коду. Сила-силенна готових сторінок, віджетів і доповнень - це саме ті елементи, які заощадять вам просто безліч часу. А сайт буде виглядати не гірше тих, які створені експертами в веб-дизайні.

Запускаємо фотошоп і натискаємо в меню Файл-Новий ... або Ctrl + N. Задаємо ширину 1040 пікселів і висоті 1400 пікселів як показано на малюнку. Я задаю на 80 пікселів більше, щоб візуально бачити сам макет на навколишньому фоні.

Тепер нам треба позначити межі макета, натискаємо Ctrl + R, щоб побачити лінійки Тепер нам треба позначити межі макета, натискаємо Ctrl + R, щоб побачити лінійки. До речі нам треба, щоб одиниці виміру були пікселі, для цього натискаємо правою кнопкою мишки по лінійці і ставимо там галочку на пікселі.
Тепер треба витягнути допоміжні напрямні, і тим самим позначимо кордону макета. Робиться це так - ставимо курсор мишки на лінійку, натискаємо і тягнемо направляючу на 40 пікселів по горизонтальній лінійці. Ми залишимо по боках по 40 пікселів.

Витягуємо справа теж, тільки на шириною 1000 пікселів, ось і отримуємо по 40 пікселів по боках Витягуємо справа теж, тільки на шириною 1000 пікселів, ось і отримуємо по 40 пікселів по боках. Зверху витягнемо теж на 40 пікселів і отримаємо ось таку картинку.

Зверху витягнемо теж на 40 пікселів і отримаємо ось таку картинку

Шапку робимо висотою 160 пікселів, тому витягуємо направляючу на 200 пікселів зверху (160 + 40px). Тепер позначимо лівий і правий сайдбарі, по 200 пікселів кожен. Лівий - витягуємо на 240 (40 + 200px), правий на 800 (1040-40-200px).

Далі зробимо відступ від правого і лівого сайдбарі по 5 пікселів всередину, витягуємо напрямні на 245 пікселів по лінійці і на 795 для правого.

Робимо горизонтальне меню, для цього від шапки зверху внизу відміряє 20 пікселів, витягуємо направляючу на 230 пікселів зверху. Зрештою отримуємо таку картинку.

Мабуть почнемо з відтворення меню висотою 30 пікселів Мабуть почнемо з відтворення меню висотою 30 пікселів. Буду малювати щось сіро-біле, щоб макет підходив під практично будь-яку тематику. Наприклад, під будівництво або ремонт, кіно або книги.

Вибираємо інструмент прямокутна область клавішею М Вибираємо інструмент прямокутна область клавішею М. Виділяємо область для меню і інструментом заливка G заливаємо виділену область кольором #BBBBBB. Далі натискаємо в меню Виділення-Модифікація-Стиснути, там вводимо 1 піксель і натискаємо ОК. Тепер заливаємо виділену область кольором #efefef. Натискаємо Ctrl + H щоб приховати напрямні і бачимо ось таку картинку - блок меню з рамкою. Чи не влазить в екран, але ось що приблизно.

Можна провести ще одну направляючу під меню на відстані 5 пікселів, щоб відокремити менюшку від контенту області Можна провести ще одну направляючу під меню на відстані 5 пікселів, щоб відокремити менюшку від контенту області. Тепер давайте заповнимо шапку. Створюємо новий шар (Шар-Новий-Шар ... або Crtl + Shift + N). Далі я використовую ось таку іконку, додаю її в шапку. Для цього вам треба зберегти цю іконку, потім відкрити її в фотошопі, виділити її (Ctrl + A) і скопіювати Ctrl + C. Переходимо в наш макет і натискаємо Ctrl + V щоб вставити іконку.

До речі я придумав тематику макета, давайте зробимо про фільм Iron Man 2 - Залізна людина 2 До речі я придумав тематику макета, давайте зробимо про фільм Iron Man 2 - Залізна людина 2. Думаю це буде приголомшливий фільм - фантастика і активний бойовик в одному сюжеті. Значить вибираємо інструмент горизонтальний текст T і пишемо в шапці назва фільму. Взяв шрифт Trajan Pro розміром 60 пікселів.

А тепер прийшла черга оформлення блоків А тепер прийшла черга оформлення блоків. Давайте додамо ще одну направляючу, щоб отримати висоту заголовка блоку 30 пікселів. Давайте блоки оформимо в такій же кольоровій гамі, як і меню. Створюємо новий шар. Виділяємо прямокутну область заголовка блоку і заливаємо її кольором #bbbbbb, потім зменшуємо виділення на один піксель і заливаємо кольором #efefef, як я писав вище. Тепер черга тематичної області блоку сайдбара. Виділяємо область нижче заголовка по висоті на око і подібною операцією заливаємо блок. Отримуємо ось що.

Робимо те ж саме для тематичної центральній частині макета, не забудьте створити новий шар Робимо те ж саме для тематичної центральній частині макета, не забудьте створити новий шар. Далі можна скопіювати шар, в якому ми намалювали лівий блок і продублювати його вниз, а також на правий сайдбар. Робиться це так. Знаходимо свій шар в панелі шари (щоб показати в меню Вікно-Шари) і натискаємо правою кнопкою миші по напису шару і вибираємо Створити дублікат шару. Потім вибираємо інструмент переміщення V і тягнемо цей шар вниз, щоб розташувати другий блок під першим.

Додам що-небудь в макет, наприклад текст і картинки, напишу меню Додам що-небудь в макет, наприклад текст і картинки, напишу меню. Я додав у меню кілька посилань на розділи сайту. Потім додав картинку в блок новини, додав тексту. Потім продублював до другого блоку. Розмножив блоки в сайдбарі для більшого візуального сприйняття. Ось що вийшло.

Робимо футер точно також як і блок з менюшку, пропишемо там трохи тексту Робимо футер точно також як і блок з менюшку, пропишемо там трохи тексту. Наприклад, ось так як на скріншоті.

А тепер ще один прийом як без малювання пензлем перетворити будь-який елемент в більш красивий А тепер ще один прийом як без малювання пензлем перетворити будь-який елемент в більш красивий. Вибираємо шар, в якому власне знаходиться наша напис в шапці Iron Man 2 великими літерами.

У віконці, що з'явилося включаємо галочку тінь, тепер пограємось з параметрами тіні У віконці, що з'явилося включаємо галочку тінь, тепер пограємось з параметрами тіні. Я зробив ось так, як це видно на малюнку.

Далі ставимо галочку на накладення градієнта і заливаємо жовто-помаранчевим градієнтом, як показано на малюнку Далі ставимо галочку на накладення градієнта і заливаємо жовто-помаранчевим градієнтом, як показано на малюнку.

Вибираємо обведення, ставимо товщину обведення 2 пікселя і чорний колір і натискаємо ТАК, щоб застосувати стилі шару і закрити віконце Вибираємо обведення, ставимо товщину обведення 2 пікселя і чорний колір і натискаємо ТАК, щоб застосувати стилі шару і закрити віконце.

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

На головну На головну

Читайте також:

Що ж можна збагнути таке нескладне, але щоб ви зрозуміли як що робиться без особливих зусиль?

Уважаемые партнеры, если Вас заинтересовала наша продукция, мы готовы с Вами сотрудничать. Вам необходимо заполнить эту форму и отправить нам. Наши менеджеры в оперативном режиме обработают Вашу заявку, свяжутся с Вами и ответят на все интересующее Вас вопросы.

Или позвоните нам по телефонам: (048) 823-25-64

Организация (обязательно) *

Адрес доставки

Объем

Как с вами связаться:

Имя

Телефон (обязательно) *

Мобильный телефон

Ваш E-Mail

Дополнительная информация: