Розробка макету сайту з використанням Adobe Photoshop

 

МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ

ЧЕРКАСЬКИЙ ДЕРЖАВНИЙ ТЕХНОЛОГІЧНИЙ УНІВЕРСИТЕТ

КАФЕДРА ІНФОРМАЦІЙНОЇ БЕЗПЕКИ ТА

КОМП’ЮТЕРНОЇ ІНЖЕНЕРІЇ

 

 

 

 

 

ЗВІТ

З лабораторної роботи №1

З дисципліни: «Web-дизайн»

На тему: «Розробка макету сайту з використанням

Adobe Photoshop»

 

 

 

 

Перевірив: доц. кафедри ІБКІ Тазетдінов В.А. __________________ __________________

Виконав: студент 4 курсу групи КМ-115 Єременко Р. К.

 

 

 

 

 

 

Черкаси 2014 
Лабораторна робота №1

Тема роботи: Розробка макету сайту з використанням програми Adobe Photoshop.

 Мета роботи: отримати навички щодо створення графічного макету сайту в програмі Adobe Photoshop. Вивчити основні прийоми роботи і способи компонування інформаційних блоків сайту.

 

Хід роботи

1. Ознайомлення з інтерфейсом програми Adobe Photoshop.

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

Рисунок 1 – Створення нового файлу

3. У вкладці «Просмотр» створюємо «Направляющие», для комфорної роботи з симетричним розташуванням даних, графіки та інщих блоків. Створюємо фон за допомогою «Градієнта» установивши колір від #dcdcdc до #ffffff:

Рисунок 2 – Створення «Направляющих»

4. Створюємо header для web-сторінки. Для цього використовуємо інструмент «прямоугольная область», виділяємо область, та заливаємо «Градієнтом», таким способом будуємо другий прямокутник, заливаємо його і натиснувши комбінацію сtrl+alt+T, заходимо в режим трансформування, там повертаємо прямокутник під потрібний нам кут. Будуємо меню. Для активного елемента меню «home» фон створюємо за допомогою «прямоугольника с кругленными углами», так же заливаємо фон.

 

Рисунок 3 - header для web-сторінки

5. Для написання будь-якої інформації на сторінці використовуємо інструмент «горизонтальный текст». Задаємо параметри тексту:

Шрифт: Rockwell

Розмір: 36 пт

Колір: #e8204e

Рисунок 4 – Написання тексту

 

6. Побудова «content» для web-сторінки. На сторінці будуть розташовані зображення та текст. Для написання інформації на сторінці використовуємо інструмент «горизонтальный текст», вставляємо 3 зображення, розміщаємо їх на сторінці. Для створення тіней під зображенням, для початку виділяємо область під ними за допомогою інструмента «Овальна область», далі використовуємо «Фильтр» > «Размытие» > «Размытие по Гауссу».

Рисунок 5 - «content» для web-сторінки

7. Робота над footer. Розташовуємо меню та Copyright.

Рисунок 6 - Робота над footer

Результати роботи

Рисунок 7 – Кінцевий результат

 

ВИСНОВКИ

На даній лабораторній роботі, я отримав навички щодо створення графічного макету сайту в програмі Adobe Photoshop. Ознайомився з функціоналом та інтерфейсом програми. Для створення макетів використовував програму Adobe Photoshop CS5. Вивчив основні прийоми роботи і способи компонування інформаційних блоків сайту.