Поточний стан макету повинен виглядати приблизно так:
До цього часу було додано логотип та верхнє меню. Наступним кроком є вставка трохи більшого зображення, яке повинно бути непосредньо нижче навігації.
Принцип створення нових шарів вже був описаний у попередньому посібнику. Тепер я хочу вам показати ще щось інше. Прямо під верхнім меню має бути показано більше зображення. Результат буде виглядати наступним чином:
Якщо ви вставляєте зображення, воно повинно мати правильні розміри. Тому, якщо потрібно, спершу редагуйте його. Потім оберіть Файл>Відкрити та оберіть зображення. Обране зображення буде показано в новому вікні. Натисніть Ctrl+C, щоб скопіювати зображення до буферу обміну. Тепер, щоб вставити зображення як шар з правильним розміром, оберіть Правка>Вставка як>Новий шар. Новий шар автоматично матиме розміри зображення, і ви зможете легко перемістити його у потрібне місце. Таким чином всі зображення, які ви хочете вставити, можна взяти в макет та розмістити їх там.
Потім вставте текст у ті місця, де він фактично повинен бути видимий пізніше. Під час стадії проектування для цього зазвичай використовується так званий "бліндтекст".
Перш ніж ви приступите до написання випадкового тексту, я рекомендую вам відвідати сторінку http://www.blindtextgenerator.de/.
Там ви зможете автоматично згенерувати різні види бліндтексту. Потім ці тексти можна легко вставити в дизайн-макет, використовуючи Копіювати & Вставити. Також раджу вам звернути увагу на сторінку http://dummyimage.com/. На цій сторінці можна генерувати пусті зображення будь-якого розміру. Далі ці пусті зображення можна використовувати як заміну для ще не створених оригінальних графік в ваших макетах.
Проблема з прозорими шарами
Якщо ви вставляєте текст, він складатиметься з декількох елементів, таких як заголовки, абзаци тощо. Тому вам слід об'єднувати відповідні тексти у власні шари. Таким чином ви зможете зручно переміщувати їх разом. Щоб це зробити, оберіть Шари>Новий шар. Потім встановіть розмір шару та, якщо потрібно, колір фону. Зазвичай ви встановите прозорий фон. Проблема полягає в тому, що важко переміщувати прозорі шари. Часто ви натраплятимете на підшари. Цю проблему можна легко уникнути. Важливі налаштування знаходяться у вікні Панель інструментів. Активуйте в ньому Інструмент переміщення. У нижній частині вікна виберіть опцію Переміщати активний шар.
Таким чином ви зможете переміщувати прозорі шари у будь-яке місце.
Вирізання елементів
Якщо ви задоволені макетом, настав час для практичного перетворення його в HTML-сторінку. Тут на сцену виходить Різання, або ж вирізання. Це різання - це ніщо інше, як поділ макету на окремі частини, які потім знову об'єднуються за допомогою HTML та CSS. Вам потрібно вирізати всі елементи, які потім мають бути відображені окремо. Виняток становлять відверта всі графічні елементи, які вже існують окремо. Я хочу показати вам, як вирізати елементи. Намалюйте відсічки, щоб виділити необхідний елемент. Нарешті намальовані відсічки визначатимуть межі обрізки. Тому тримайте їх правильно.
Okружіть бажану область і натисніть комбінацію клавіш Ctrl+Shift+C. (Це стосується як GIMP, так і Photoshop). Потім створіть новий файл. У Photoshop він зразу матиме правильний розмір. У GIMP це не працює так просто. Тому ви просто створюєте файл з необхідними розмірами. Використовуючи Ctrl+V, вставте зміст з буфера обміну.
