Підручник: Як розмістити веб-сторінку за допомогою Adobe Photoshop

Існує величезна різноманітність інструментів для створення веб-сторінок та роботи в абсолютно простій та функціональній формі, не вводячи та не торкаючись коду. Їх незліченна кількість, запропонована додатками (Adobe Dreamweaver є прикладом) або безпосередньо онлайн-платформами, такими як Wix. Однак для веб-дизайнера знання ручних процедур є дуже важливим. HTML5 та CSS є основними стовпами для розміщення веб-сайтів та цільових сторінок.

Однак частіше, ніж можна було очікувати, вам доведеться звертатися до таких програм, як Indesign або Adobe Photoshop щоб доповнити вашу роботу з оформлення та надати їм ідеальне закінчення. Сьогодні ми побачимо в цьому великому підручнику, як ми можемо розмістити веб-сторінку за допомогою Adobe Photoshop. У цій першій частині ми продовжуватимемо роботу, яка буде розроблена з Photoshop, хоча в наступних версіях ми побачимо, як ми можемо застосувати цю роботу вже безпосередньо в HTML-коді, щоб зробити її функціональною.

Починаючи з дизайну нашого каркасу

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

Дуже важливо, щоб ми взяли до уваги розміри, які матиме наш веб-сайт, якщо він матиме в коробці або на всю ширину. Вкладена в коробку веб-сторінка буде знаходитися всередині невеликого контейнера, і тому навколо неї з’явиться пробіл. Навпаки, повноцінна веб-сторінка займе весь екран пристрою, що відтворює сторінку. Вибір між тим чи іншим способом відповідає лише стилістичним питанням, а також буде залежати від потреб проекту, над яким ми працюємо. У цьому прикладі ми будемо працювати з боксовим режимом, тому він не буде займати весь простір, який надає браузер.

Для створення нашого каркасу перше, що нам потрібно зробити, це увійти в програму Adobe Photoshop і включити розміри, які ми хочемо мати на нашій сторінці. У цьому прикладі наша сторінка матиме ширину 1280 пікселів. Однак проблема з розміром може відрізнятися залежно від кінцевого пункту призначення або пристрою, на якому ми хочемо відтворити нашу сторінку. Немає сумнівів, що для того, щоб веб-дизайн був функціональним та ефективним, він повинен бути реагувати і він повинен адаптуватися до всіх пристроїв на ринку. Однак у цьому випадку ми будемо працювати над створенням прототипу, який ми будемо відтворювати на настільному комп’ютері. Незважаючи на це, миттєва проблема, з якою ми розглянемо пізніше, наразі, ось ієрархія розмірів екрану, з якою слід працювати в цьому прикладі. Майте на увазі, що в цьому випадку ми зробимо макет цільової сторінки в Adobe Photoshop, а потім перенесемо її на HTML5 І CSS3. Метою цієї невеликої практики є перетворення дизайну, створеного у Photoshop, у корисний та інтерактивний веб-дизайн, який відповідає рухам користувача.

Вимірювання для мобільних телефонів

iPhone 4 і 4S: 320 x 480

iPhone 5 і 5S: 320 x 568

iPhone6: 375x667

iPhone 6+: 414x736

Nexus 4: 384 x 598

Nexus 5: 360 x 598

Galaxy S3, S4, S5: 360x640

HTC One: 360 x 640

Вимірювання таблеток

iPad для всіх моделей, а також iPad Mini: 1024 x 768

Galaxy Tab 2 і 3 (7.0 дюймів): 600 x 1024

Galaxy Tab 2 і 3 (10.1 дюймів): 800 x 1280

Nexus 7: 603 x 966

Nexus 10: 800 x 1280

Microsoft Surface W8 RT: 768 x 1366

Microsoft Surface W8 Pro: 720 x 1280

Вимірювання для настільних комп'ютерів

Маленькі екрани (використовуються, наприклад, у нетбуках): 1024 x 600

Середні екрани: 1280 x 720/1280 x 800

Великі екрани: ширина більше 1400 пікселів, наприклад 1400 x 900 або 1600 x 1200.

Щоб розпочати розповсюдження елементів та призначення розділів у нашому веб-макеті, дуже важливо врахувати пропорції, щоб забезпечити читабельність та мелодійність. Дуже важливо, щоб ви використовували параметри правил та довідників, які можна знайти у верхньому меню Перегляд. Щоб працювати пропорційно і точно, найкраще, щоб ми працювали з відсотків. Ми клацнемо на меню перегляду, а потім на опцію «Новий путівник», щоб вибрати спосіб поділу. У цьому випадку ми зробимо чотири вертикальних поділки на 25%, і ми будемо брати їх за посилання, щоб розмістити наші зображення в нижньому колонтитулі, а зображення нашого логотипу - у верхній частині.

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

Це був би кінцевий результат нашого каркасні. Як ми бачимо, він розділений на заголовок, що складається із зображення, в якому буде знайдено логотип і який буде служити посиланням на домашню сторінку, що супроводжується двома вкладками, пошуковою системою та чотирма кнопками у вікні пошуку. Окрім того, вже в межах тіла ми включили бічну панель, що складається з розділювальної смуги та серії категорій, що класифікують тип вмісту, який буде на нашому веб-сайті. Ще один розділ з нумерацією, що включає записи, які існуватимуть на нашому сайті, і нарешті список із найбільш репрезентативними мета-тегами на нашому сайті.

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

Як нижній колонтитул ми включили чотири зображення, які слугуватимуть посиланням на інші області нашої сторінки. Сюди ми можемо включити логотипи чи інші цікаві розділи. Хоча насправді ця сфера буде діяти більше як попередній колонтитул, оскільки сам нижній колонтитул піде трохи далі з політикою використання, юридичним повідомленням та авторським правом.

Після того, як ми визначили основну структуру або скелет нашої сторінки, нам доведеться перейти на наступний рівень. Це буде полягати в правильному дизайні кожної з областей нашого веб-сайту. Іншими словами, ми почнемо "заповнювати" кожну з цих областей вмістом, який нарешті буде вставлений на наш веб-сайт. Рекомендується не починати проектувати ці елементи перед початком роботи над каркасом, оскільки дуже ймовірно, що якщо ми зробимо це в такому порядку, пізніше нам доведеться змінити їх пропорції. Ми ризикуємо спотворити наші зображення і доводиться переробляти дизайн кожного з елементів, що стане або марною тратою часу, або результатом нижчої якості.

У цьому випадку дизайн нашого веб-сайту буде надзвичайно простим. Ми будемо використовувати заповіді дизайну матеріалу, оскільки ми будемо використовувати логотип Google для прикладу цієї практики. Потрібно пояснити, що мета цього підручника - проілюструвати технічні знання, тому естетичний результат у цьому випадку не має значення. Як бачите, ми потроху заповнювали простір усіма областями, які ми раніше визначили у нашій схемі. Однак ми зробили невелику модифікацію в останню хвилину. Як ви могли помітити, ми значно зменшили розмір нашого логотипу та включили розділювальну лінію в нижню область заголовка, яка ідеально поєднується з верхнім меню. У цьому випадку ми використовували кнопки та матеріали з банку ресурсів. Як дизайнери ми можемо розробити їх самі (особливо цей варіант рекомендується, якщо ми хочемо, щоб він представляв дуже схожий тонік до того, що представлений зображенням бренду або логотипом).

Важливо пам’ятати, що для викладу цього прикладу ми будемо працювати на двох різних рівнях. З одного боку, ми будемо працювати над об’єктами, а з іншого - зовнішнім виглядом веб-сайту. Тобто, з одного боку в скелеті нашого веб-сайту, а з іншого - у всіх плаваючі елементи, які цей скелет буде підтримувати. Ви зрозумієте, що є області, які взагалі не будуть плавати, наприклад, область, яку буде займати наша бічна панель, попередній колонтитул або розділювальна панель, що розділяє заголовок від тіла.

Конструкції 1, 2, 3 і 4 будуть частиною фон з нашого веб-сайту, тому насправді нам не буде потрібно експортувати як такий із Adobe Photoshop, хоча ми можемо це зробити, це не потрібно. Коли справа доходить до Плоскі кольори (одна з найважливіших особливостей плоского дизайну та дизайну матеріалів, їх можна ідеально застосувати за допомогою коду за допомогою таблиці стилів CSS). Однак решту елементів потрібно зберегти для подальшої вставки в наш HTML-код. На цій невеликій схемі ми також відтворили області, які належать до фону сторінки, щоб ми мали чітке уявлення про те, яким буде остаточний вигляд нашого сайту.

Як ви зможете зрозуміти, метою створення цієї схеми в Adobe Photoshop є отримання реального виміру кожного елемента та уточнення розташування та структури кожного елемента. Звичайно, текстовому змісту не місце на цій фазі процесу, оскільки воно повинно бути постачається з нашого редактора коду. Ми також повинні зазначити, що в цій практиці ми будемо працювати з кнопками та статичними елементами, хоча зазвичай вони зазвичай застосовуються з таких фреймворків, як Bootstrap або безпосередньо з Jquery.

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

Важливо, що ми навчимося зберігати будь-які предмети самостійно, щоб зберегти їх з відповідними розмірами і точно. Будь-яка помилка, якою б незначною вона не була, може вплинути на всі елементи, які є частиною вашої веб-сторінки. Майте на увазі, що вони будуть пов’язані між собою і повинні мати ідеальні розміри, щоб їх можна було ввести з HTML у кінцевій мережі. У цьому випадку нам потрібно буде самостійно вирізати та зберегти такі елементи:

• Наш логотип.
• Усі кнопки (ті, що є частиною головного меню та інші).
• Всі зображення.

Ми можемо зробити це різними способами, і, можливо, ви знайдете альтернативу, яка є більш ефективною для вас. Але якщо ви збираєтеся робити такий тип макету вперше, рекомендую дотримуватися наступних порад.

• По-перше, ви повинні перейти до папки, де знаходиться файл PSD, що містить наш каркас, і продублювати його стільки разів, скільки елементів, які ви збираєтесь експортувати. У цьому випадку ми створили 12 копій з оригіналу та зберегли їх у тій же папці. Далі ви перейменуєте кожну з копій і призначите кожній з них ім’я елемента, який вона містить. Наші 12 копій будуть перейменовані: Логотип, кнопка меню 1, кнопка меню 2, рядок пошуку, верхня кнопка 1, верхня кнопка 2, верхня кнопка 3 і верхня кнопка 4. Решта чотири будуть перейменовані у: Зображення 1, Зображення 2, Зображення 3 та Зображення 4.
• Після цього ми відкриємо файл із назвою логотипу.
• Ми перейдемо до нашої палітри шарів і знайдемо шар, що містить наш логотип. Тоді будемо тиснути Ctrl / Cmd поки ми натискаємо на мініатюру згаданого шару. Таким чином логотип буде обраний автоматично.
• Наступним кроком буде сказати Photoshop, що ми хочемо, щоб він точно вирізав цей логотип. Для цього нам потрібно буде лише викликати інструмент обрізання за допомогою клавіші або команди C.
• Щойно ми це зробимо, ми клацнемо на нашу кнопку Enter, щоб підтвердити вирізання.
• Тепер ми перейдемо до верхнього меню "Файл", щоб натиснути "Зберегти як". Ми виберемо назву, яка в даному випадку буде «Логотип», і призначимо їй формат PNG, тому що це файл, який пропонує найвищу якість в Інтернеті.
• Ми повторимо процес із усіма копіями та елементами. Коли ви обрізаєте, переконайтеся, що решта шарів у нашій палітрі є невидимий або ліквідовано. Таким чином ми можемо зберегти кожен елемент із прозорим фоном.

У цьому випадку ми вибираємо нашу кнопку меню 2 з палітри шарів. На скріншоті ви можете побачити, як автоматично вибрано межі нашої кнопки.

Після вибору інструмента обрізання за допомогою клавіші C наше полотно зменшується лише до розмірів нашої кнопки.

Зараз саме час зберегти по одному всі елементи, які є частиною нашого веб-сайту, та включити їх до папки із зображеннями, які ми будемо використовувати пізніше. Ми будемо дзвонити з нашого коду і продовжуватимемо макет, але відтепер із нашого редактора коду.

Хоча існує безліч інструментів та альтернатив розміщення веб-сторінки, які роблять процес абсолютно інтуїтивним, дуже важливо, щоб ми навчились робити це за керівництво. Таким чином ми дізнаємось, що є основою дизайну веб-сторінки.

Резюме:

1. Дизайн структура веб-сайту, приділяючи особливу увагу вмісту, який ви хочете передати, та розділам, які ви повинні створити на своєму веб-сайті.
2. Попрацюйте над своїм скелетом або каркасні із Adobe Photoshop із зазначенням, у яких областях відображатиметься вміст та їх формат.
3. Покладаючись на заходи та бренди, які ви вже розробили, починайте дизайн поверхні Мережі. Включає всі елементи (як плаваючі, так і нерухомі). Не забудьте включити відповідні кнопки, логотип та зображення.
4. Виріжте по одному всі елементи, які є частиною проекту. Переконайтесь, що вони вжили правильних заходів, і щоб вони потім не створювали вам проблем.
5. Збережіть усі елементи у форматі PNG у папці images всередині папки проекту HTML.
6. Майте на увазі, що цей проект матиме вихід у веб-вікно, тому дуже важливо врахувати кольоровий режим і застосувати RGB.
7. Надихайтеся іншими веб-сайтами, якими ви захоплюєтесь, перш ніж приступати до справи, і не забудьте обговорити це з членами вашої команди. Якщо це проект для клієнта, спробуйте дотримуватися брифінг наскільки це можливо.