Случвало ли ви се е да имате идея и ясна представа за това как искате да изглежда вашия сайт, но да сте принудени да се примирите с нещо различно, понеже не знаете как да го постигнете?
С този практически наръчник ще се научите как да правите дизайн на уеб сайтове с Photoshop® – най-добрата програма за редактиране и създаване на растерни изображения.
В първата част се разглеждат основите на използването на Photoshop®. Тази част е предназначена за абсолютно начинаещи потребители, които никога не са виждали Photoshop®, или са виждали, но никога не са го използвали.
Втората част е практическа. В нея са представени в детайли различните тънкости в дизайна отделните видове уеб сайтове – от най-елементарния макет за сайт, през оформянето на целева страница, ефектна шапка за бизнес сайт и макет за блог до разработването на макет за интернет магазин.
Третата част съдържа съвети и препоръки към начинаещите уеб дизайнери. Тук са посочени простите, но изключително важни правила, които водят до положителен резултат. Особено внимание е отделено на психологията на цветовете, както и на избора на цветова схема и шрифтове. Полезно ще ви бъде и показването на типичните грешки, които допуска уеб дизайнера.
Освен за начинаещите потребители, които искат сами да разработят графичната концепция за своя сайт, тази книга ще е полезна и на онези, които вече имат сайт, но искат да го усъвършенстват.
Съдържание
Въведение…7
Част 1. – Основи на Adobe® Photoshop®
Глава 1.
Интерфейс на програмата…10
1.1. Главен прозорец …10
1.2. Понятието “работна среда”…14
1.3. Панел с инструменти…16
1.4. Работа с документи…18
1.4.1. Създаване на нов документ…18
1.4.2. Отваряне на документ…19
1.4.3. Запазване на документ…20
1.4.4. Получаване на информация за файла…22
1.5. Оптимизиране на изображенията за интернет…23
1.6. Подробно за файловите формати…27
1.6.1. Формат BMP (Windows Bitmap)…27
1.6.2. Формат JPEG…29
1.6.3. Формат GIF…31
1.6.4. Формат PNG…32
1.6.5. Формат TIFF…33
1.6.6. Форматите X BitMap и X PixMap…34
1.6.7. Прости формати за запазване на изображения…35
Глава 2.
Селекция на фрагменти от изображение…36
2.1. Инструменти за селекция…36
2.1.1. Правоъгълна област…37
2.1.2. Овална област…37
2.1.3. Инструментите „ласо“…38
2.1.4. Инструментите Quick Selection Tool и Magic Wand Tool…38
2.2. Операции с маркираните области…40
2.3. Избор на област на фокусиране…41
2.4. Избор на цветови диапазон…43
2.5. Отмяна и изчистване на селекцията…44
2.6. Селекция на цялото изображение. Инверсия на селекцията…44
2.7. Редактиране на селектирана област…44
2.7.1. Трансформация на селекция…44
2.7.2. Меню Select, Modify…48
Глава 3.
Операции с изображението и негов фрагмент…50
3.1. Операции с фрагмент от изображението…50
3.1.1. Копиране и преместване на фрагмент…50
3.1.2. Мащабиране…52
3.1.3. Завъртане…52
3.1.4. Наклон…52
3.1.5. Изкривяване…52
3.1.6. Перспектива…55
3.1.7. Свободна трансформация…55
3.1.8. Огледално отражение…58
3.1.9. Деформация на фрагмент…58
3.2. Завъртане на изображение…58
3.3. Промяна на размерите на изображение…59
Глава 4.
Рисуване и ретуш…60
4.1. Инструменти за рисуване…60
4.1.1. Инструменти за рисуване на най-прости геометрични фигури…60
4.1.2. Инструменти за заливане…61
4.1.3. Инструментът Brush…64
4.1.4. Инструментът Pencil…67
4.1.5. Инструментът Color Replacement…68
4.1.6. Инструментът Mixer Brush…71
4.1.7. Инструментите History Brush и Art History Brush…71
4.1.8. Подробно за градиента…71
4.2. Инструменти за ретуш…74
Глава 5.
Цветови модели и режими на изображение…79
5.1. Цветови модели…79
5.1.1. Моделът RGB…79
5.1.2. Моделът HSB…81
5.1.3. Моделът CMYK…82
5.2. Режими на изображенията…83
5.2.1. Режимите RGB, CMYK и Lab…83
5.2.2. Градации на сивото…83
5.2.3. Режимът Duotone…84
5.2.4. Индексирано изображение…84
5.2.5. Режимът Bitmap…85
Глава 6.
Коригиране на тона…86
6.1. Понятие за коригиране на тона…86
6.2. Инструментът Levels…88
6.3. Инструментът Curves…89
6.4. Инструментът Brightness/Contrast…92
6.5. Прозорецът Shadows/Highlights…93
6.6. Тониране в стил HDR…94
Глава 7.
Коригиране на цвета…97
7.1. Понятие за коригиране на цвета…97
7.2. Цветово преместване…97
7.3. Прозорецът Color Balance…101
7.4. Прозорецът Selective Color…101
7.5. Автоматично коригиране на цветовото преместване…102
7.6. Пребоядисване на обекти…104
Глава 8.
Канали и маски…108
8.1. Какво представляват каналите и маските…108
8.2. Цветови канали…109
8.3. Алфа-канали…111
8.3.1. Маски и алфа-канали…111
8.3.2. Създаване и дублиране на канала…116
8.4. Пример за практическо използване на каналите…117
8.5. Бърза маска…118
Глава 9.
Работа със слоеве…121
9.1. Въведение в слоевете…121
9.2. Копиране на изображенията върху отделни слоеве…125
9.2.1. Използване на инструмента Move…125
9.2.2. Използване на буфера за обмен…126
9.2.3. Командата Place…127
9.3. Палитрата Layers…128
9.4. Действия със слоевете…129
9.4.1. Създаване на нов слой…130
9.4.2. Премахване на слой…130
9.4.3. Ред за наслагване на слоеве…130
9.4.4. Селектиране на няколко слоя…130
9.4.5. Преименуване на слой…132
9.5. Режими на наслагване…133
9.6. Ефекти на слоевете…141
9.7. Маски на слоевете…144
Глава 10.
Работа с текст…147
10.1. Въвеждане и редактиране на текст…147
10.2. Кратък текст и текстов блок…150
10.3. Въвеждане на текст във фигура…151
10.4. Форматиране на текст…152
10.4.1. Базово форматиране на текст…152
10.4.2. Палитрата Character…154
10.4.3. Палитрата Paragraph…157
10.5. Текстови ефекти…158
Глава 11.
Филтри…160
11.1. Понятие за филтър…160
11.2. Намаляване на цифровия шум…161
11.2. Филтърът HDR Efex Pro 2…164
11.3. Цветова корекция с филтър Color Efex Pro 4…166
11.4. Филтър за повишаване на резкостта…166
11.5. Филтри за изкривяване…171
Част 2. – Създаване на различни видове дизайн за уеб сайтове
Глава 12.
Създаване на най-простия макет на сайт…174
12.1. Създаване на изображения и задаване на текстурата…174
12.2. Създаване на фон за текста…178
12.3. Меню и бележка с контакти…179
12.4. Текстът на страницата…181
12.5. Украсяваме макета…181
Глава 13.
Създаване на макет за интернет магазин…184
13.1. Създаване на нов документ…184
13.2. Заглавие…188
13.3. Меню…191
13.4. Слайдер със стоките…197
13.5. Лява колонка…200
13.6. Централна колонка…204
13.7. Дясна колонка…206
13.8. Footer на сайт…210
13.9. Кулминация…214
Глава 14.
Макет на блог…215
14.1. Подготовка за създаване на макета…215
14.2. Горната част на блога…217
14.3. Рисуваме слайдер…220
14.4. Основна част…224
14.5. Рисуваме footer…228
Глава 15.
Целева страница…230
15.1. Системи решетки…230
15.2. Подготовка на документа…232
15.3. Основа…233
15.4. Подготовка на фоновото изображение за шапката…234
15.5. Навигационен панел…236
15.6. Лого…238
15.7. Заглавие…241
15.8. Основна част…242
15.9. Долна част на сайта…244
Глава 16.
Създаване на ефектна шапка за бизнес страница…247
16.1. Предистория на написването на тази глава…247
16.2. Концепция за шапка на сайт…248
16.3. Подготвяме фон за шапката…248
16.4. Разработка на реда за менюто…249
16.5. Добавяме изображение на продукта върху шапката…251
16.6. Слоган…253
16.7. Създаване на бутон за зареждане…253
Част 3. – Полезни съвети
Глава 17.
Основни правила на уеб дизайна. Седем правила на добрия тон…258
17.1. Правило 1: Сайтът трябва да изглежда еднакво добре за всички…258
17.2. Правило 2: Не използвайте хоризонтален преглед…259
17.3. Правило 3: Използвайте минимално количество шрифтове…260
17.4. Правило 4: Не превръщайте сайта в пачуърк одеяло…260
17.5. Правило 5: Използвайте различни цветове за текста и фона…260
17.6. Правило 6: Навигацията трябва да бъде проста и разбираема…261
17.7. Правило 7: Използвайте безопасни шрифтове…261
Глава 18.
Психология на цветовете…263
18.1. Въведение в психологията на цветовете…263
18.2. Цветовете в уеб дизайна…264
18.3. Умението за правилно съчетаване на цветовете…264
18.4. Основните цветове и техните значения…267
18.4.1. Бял цвят…267
18.4.2. Черен цвят…268
18.4.3. Червен цвят…270
18.4.4. Син цвят…271
18.4.5. Зелен…274
18.4.6. Жълт цвят…274
18.4.7. Оранжев цвят…275
18.4.8. Розов цвят…276
18.4.9. Сив цвят…276
18.4.10. Други цветове…277
18.5. Фън-шуй и цветовете…277
18.6. Някои съвети…277
Глава 19.
Типичните грешки на уеб дизайнера…279
19.1. А какво се случва след създаването на макета?…279
19.2. Неправилен цветови профил…279
19.3. Неподготвен макет…281
19.4. Още веднъж за цвета…282
19.5. Единици за измерване, символи и абзаци…283
19.6. Параметри на наслагване и стилове на слоя…283
19.7. Водачи…284
Глава 20.
За шрифтовете в уеб дизайна…285
20.1. Трябва ли да се използват шрифтове?…285
20.2. Избор на уеб шрифт…285
20.3. Рендиране на шрифта в браузъра…286
20.4. Размер на файла с шрифтовете…287
20.5. Различни формати шрифтове…289
20.6. Хинтоване…290
20.7. Файлови формати за шрифтовете…291
20.8. Различните стилове на шрифта в уеб дизайна…292
20.9. Еквиваленти…292
20.10. Откъде да купим шрифтове?…293
Вместо заключениe…295