Резка дизайна и создание Web-публикации.

1. Тепер переходимо з Photoshop в ImageReady

2.Тепер Нові зміни з Photoshop в ImageReady

3.Пограйтеся з настройками, оптимізуйте зображення

4.Виберіть інструмент Slice Tool, і тепер Вам слід буквально порізати зображення на частини. Роблячи це інтуїтивно, спробуйте внести сенс в резку. Наприклад, слід відокремити зображення посилань один від одного. В останню чергу відокремте головне зображення, де буде текст. кожній розрізний частини присвоюється свій номер.:

Ефект Rollover.

1. Виберіть інструмент Slice select tool і виділіть будь-яке зображення посилання і вона буде активною, її Ви побачите на панелі Web Content. Тепер виділіть цей же шар на панелі Layers. Переконайтеся, що видимість ефектів відключена!

2. А теперь на панели Web Content данного слоя правой клик мышью выберите Add Rollover State => Over. Сделайте Over активным и на панели Layers включите видимость эффектов.

\

Застосуйте дану дію до всіх посилань.

3.А тепер, щоб по посиланнях можна було кудись переходити Вам слід заповнити їх вмісті, тобто ... посиланнями.

7.1.6 Оптимізація зображень.

1. Наступне, що Вам слід зробити це оптимізувати кожен відрізаний шматок дизайну (тобто малюнка). Виділяємо і експериментуємо з настройками. Краще вибирати для маленьких шматків jpg формат, а для великих gif

2. Після цього зберігаємо сторінку File> Save optimized as. У нас вийти hmtl файл і папка з зображеннями.

7.1.7 Створення макету сайту: спосіб 2.

Використовувати файли leafs.png, pixelated_blue_rectangle.png

Крок 1.

Создайте новий документ (Ctrl + N) 1200х750 px. Виберіть Gradient Tool (G) і застосуйте лінійний градієнт зверху вниз від # 792700 до # 000000.

Крок 2

Створіть новий шар, виберіть Brush Tool (В), встановіть м'яку кисть діаметром 300 px і додайте кольору на ваш макет. Автор використав червоний, помаранчевий і блакитний. Назвіть шар color".

Крок 3

Відкрийте зображення з листям і вставте його в ваш документ. Клацніть правою кнопкою миші на шарі і виберіть Convert to Smart Object. Потім Filter> Artistic> Film Grain, встановіть параметри, зазначені на картинці нижче. Далі Filter> Pixelate> Mosaic. Змініть режим накладання шару на Difference, зменшите opacity до 30% і перейменуйте шар в "texture".

Крок 4

Створіть новий шар, виберіть Rounded Rectangle Tool (U), встановіть радіус 3 рх і намалюйте чорний прямокутник з круглими кутами. Двічі клікніть на шарі і застосуйте параметри для Drop Shadow, зазначені нижче. Зменшіть opacity шару до 70% і назвіть його "black shape".

Крок 5

Виберіть всі шари і згрупуйте їх. Назвіть групу "background".

крок 6

Створіть нову групу і назвіть її "home". Створіть ще одну групу всередині "home" і назвіть її "logo".

Крок 7

Создайте шар в групі "logo". Виберіть Type Tool (T) і напишіть логотип сайту (колір # f4f4f4). Двічі клікніть на шарі і застосуйте параметри, вказані нижче. Створіть новий шар і додайте теглайн (колір # eeeeee).

Крок 8.

Создайте нову групу, назвіть її "Sign up | Login". Виберіть Rounded Rectangle Tool (U) і намалюйте прямокутник як на картинці. Двічі клацніть на шарі і застосуйте параметри, вказані нижче. Встановіть білий колір foreground і за допомогою Type Tool (T) напишіть на кнопці "Sign up | Login". Зменшіть opacity текстового шару до 75%.

Крок 9

Створіть нову групу "Navigation". Додайте новий шар, виберіть Single Row Marquee Tool і створіть виділення висотою 1 px. Залийте виділення # 406f94 кольором і видаліть області, що знаходяться поза чорного прямокутника, використовуючи Rectangular Marquee Tool (M). Зменшіть opacity шару до 40% і назвіть його "Line".

Крок 10

Створіть новий шар. За допомогою Rectangular Marquee Tool (M) створіть виділення як у автора (замітка: можете використовувати напрямні для точності). Візьміть Gradient Tool (G) і застосуйте градієнт знизу вврех від # 35423e до прозорого. Зніміть виділення. Потім Filter> Noise> Add Noise і встановіть параметри, зазначені на картинці. Назвіть цей шар "gradient" і встановіть відстань між лінією і градієнтом в 1 px

Крок 11

Виберіть Type Tool (T) і напишіть назви сторінок на навігаційній панелі. Двічі клацніть на текстовому шарі і застосуйте параметри, вказані нижче. Автор використав шрифт Greyscale Basic.

Крок 12

Чоздайте новий шар, виберіть Single Column Marquee Tool і клацніть один раз на макеті. Потім виберіть Rectangular Marquee Tool (M), клікніть на кнопці "Intersect with selection" на панелі опцій і створіть виділення як на картинці. Залийте виділення білим, зніміть виділення.

Крок 13

Дважди клацніть на шарі, створеному в попередньому кроці, встановіть параметри, вказані нижче. Назвіть шар "line 1".

Крок 14

Продублюйте шар "line 1" і назвіть копію "line 2". Виберіть Move Tool (V) та натисніть один раз на праву стрілку на клавіатурі, щоб зрушити лінію на 1 рх вправо. Двічі клікніть на шарі, застосуйте параметри, вказані нижче.

Крок 15

Виділіть шари "line 1" і "line 2", клікніть на них правою кнопкою миші і виберіть Convert to Smart Object. Назвіть об'єкт "separator".

Крок 16

Створіть новий шар під "separator". Виберіть Rectangular Marquee Tool (M), створіть виділення як на картинці, залийте його # 35423e кольором. Клацніть правою кнопкою миші на шарі і виберіть Convert to Smart Object. Потім Filter> Blur> Gaussian Blur, Filter> Noise> Add Noise (для обох фільтрів встановіть параметри, зазначені нижче). Встановіть opacity шару 60% і назвіть його "highlight".

Крок 17

Виберіть шар "separator", потім Layer> Layer Mask> Reveal All. Виберіть Gradient Tool (G) і застосуйте градієнт знизу до середини від чорного до прозорого.

Крок 18

Виділіть шари "separator" і "highlight". Виберіть Move Tool (V), утримуючи клавіші Alt і Shift, клацніть в документі і потягніть мишку. Тепер у вас є копії виділених шарів. За допомогою Move Tool (V) посуньте шари вправо. Повторіть цей крок і створіть стільки роздільників, скільки потрібно.

Крок 19

Виберіть всі шари "separator" і "highlight" і згрупуйте їх. Назвіть групу "separators".

Крок 20

Виберіть Rectangle Tool (U) і створіть прямокутник. Помістіть шар під усіма верствами з назвами сторінок. Двічі клікніть на шарі і встановіть наступні параметри для Gradient Overlay. Назвіть шар "active menu", встановіть opacity 50%.

крок 21

Створіть нову групу, назвіть її "search" і розташуйте її під групою "navigation". Виберіть Rounded Rectangle Tool (U), встановіть радіус 3 рх і створіть прямокутник, як показано нижче (використовуйте # 104f59 колір). Назвіть цей шар "text field" і встановіть opacity 80%.

\

крок 22

Виберіть Rectangle Tool (U) і створіть прямокутник. Помістіть його справа на панелі пошуку. Двічі клацніть на шарі і встановіть параметри, вказані нижче. Клацніть правою кнопкою миші на шарі і виберіть Create Clipping Mask.

крок 23

Виберіть Type Tool (T) і напишіть "search" білим кольором. Встановіть opacity шару 75%.

крок 24

Виберіть Line Tool (U) і намалюйте вертикальну лінію (використовуйте колір # 123036). Назвіть шар "line", розташуйте його під шаром "button" і за допомогою Move Tool (V) розмістіть його між панеллю пошуку і кнопкою.

крок 25

Створіть нову групу і назвіть її "Showcase". Створіть ще одну групу всередині цієї групи і назвіть її "background". Виберіть Rectangle Tool (U) і створіть прямокутник (використовуйте колір # 219aad). У автора ширина прямокутника 983 рх, висота 273 рх. Встановіть opacity шару 55% і назвіть його "bg4".

Крок 26

Відкрийте зображення з піксельним блакитним прямокутником, вставте його в документ і розташуйте його над шаром "bg4". Встановіть opacity 55%, назвіть шар "bg3".

крок 27

Утримуючи Ctrl, клацніть на масці шару "bg4", потім створіть новий шар, виберіть Gradient Tool (G) і застосуйте градієнт знизу вгору від # 56b8e5 до прозорого. Зніміть виділення.

крок 28

Створіть новий шар, виберіть Rectangular Marquee Tool (M) і створіть виділення. Візьміть Gradient Tool (G) і застосуйте градієнт знизу вгору від # 0f2b42 до # 2a607f. Зніміть виділення і назвіть шар "bg1".

крок 29

Створіть групу "sign up button". Виберіть Rounded Rectangle Tool (U), встановіть радіус 2 рх і намалюйте прямокутник. Двічі клікніть на шарі і застосуйте параметри, вказані нижче. Виберіть Type Tool (T) і напишіть "sign up" білим кольором.

крок 30

Повторіть попередній крок і створіть іншу кнопку, але тепер напишіть на кнопці "learn more". Створіть новий шар, виберіть Custom Shape Tool (U) і намалюйте білу стрілку.

крок 31

Створіть групу "left arrow". Виберіть Ellipse Tool (U) і створіть окружність кольору # 406f94. Двічі клікніть на шарі і встановіть параметри.

крок 32

Створіть новий шар, виберіть Custom Shape Tool (U) і намалюйте білу стрілку. Двічі клікніть на шарі, встановіть вказані параметри. Встановіть opacity шару 50%.

крок 33

Повторіть попередній крок і створіть другий стрілку на правій стороні блакитного прямокутника.

крок 34

Створіть нову групу "image". Вставте невелике зображення в цю групу і назвіть шар "image". Двічі клікніть на шарі і встановіть параметри.

крок 35

Далі Layer> Layer Style> Create Layer, потім Layer> Layer Mask> Reveal All. Виберіть Gradient Tool (G) і застосуйте градієнт від низу картинки до середини від чорного до прозорого. Назвіть шар "shadow".

крок 36

Створіть нову групу, виберіть Type Tool (T) і додайте текст. Назвіть шар "text".

крок 37

Створіть групу "content". Створіть ще одну групу в цій групі і назвіть її "shadows". Виберіть Rectangle Tool (U) і намалюйте прямокутник білого кольору. Назвіть шар "white shape" і встановіть opacity 90%.

Крок 38

Утримуючи Ctrl, клацніть на масці шару "white shape". Створіть новий шар, виберіть Gradient Tool (G) і застосуйте градієнт від # 8f8f8f до прозорого. Встановіть opacity 50% і назвіть шар "top shadow". Виберіть Move Tool (V) і двічі натисніть на стрілку "вниз".

Крок 39

Створіть новий шар. За допомогою Rectangular Marquee Tool (M) створіть виділення. Потім використовуючи Gradient Tool (G), застосуйте градієнт від # 8f8f8f до прозорого. Додайте маску і за допомогою великої чорної кисті замаскуйте центр тіні. Встановіть opacity 30% і назвіть шар "vertical shadow 1". Продублюйте шар, назвіть його "vertical shadow 2" і посуньте праворуч.

Крок 40

Виберіть Line Tool (U) і створіть горизонтальну лінію шириною 1 рх (використовуйте колір # aebcc7). Назвіть шар "line".

крок 41

Виберіть Type Tool (T) і додайте зміст. Ви також можете використовувати зображення.

Крок 42

Створіть групу "footer". Створіть новий шар всередині групи, виберіть Rectangular Marquee Tool (M) і створіть виділення. Встановіть колір foreground # 555555, візьміть велику м'яку кисть і малюйте їй на верхньому краю виділення. Встановіть opacity шару 50% і назвіть його "gradient".

крок 43

Створіть новий шар, виберіть Single Row Marquee Tool і клацніть в документі. Залийте виділення білим, зніміть виділення. Потім Layer> Layer Mask> Reveal All, візьміть велику м'яку чорну кисть і малюйте на масці. Встановіть opacity 15% і назвіть шар "line".

Крок 44

Виберіть Type Tool (T) і додайте текст на колонтитул.

Результат

Завдання для виконання роботи

1. На основі вище описаних прикладів ви повинні створити шаблон сайту та Web-публікацію про улюблену квітку, тварину або марку автомобіля тощо.

2. Оформити протокол лабораторної роботи, який повинен відображати всі етапи створення Web-публікації і містити висновки про виконану роботу.

7.3 Контрольні питання

1. Яка мета створення макету сайту?

2. Опишіть етапи створення макету сайту.

3. Що дає ефект Rollover?

4. Для чого робиться оптимізація зображень?

Лабораторна робота 8

Тема: Ознайомлення з мовою програмування 12-14542.php"> ⇐ Назад