Розробка сайту з нуля
Привіт друзі! Сьогодні я починаю цикл уроків з розробки сайтів. Сайт будемо створювати з повного нуля. Тобто намалюємо його скетч / дизайн в фотошопі, зверстаємо і застосуємо фреймворк bootstrap для адаптивного дизайну і в кінці «натягнемо» на CMS WordPress. Створювати я буду блог про гірському туризмі. Верстка адаптивна.
Скетч мого прототипу (корявий, але для мене зрозумілий):
Додаткові матеріали до даного уроку:
1. Завантажити плагін сітки Guide Guide можна тут - guideguide.me
2. Розрахунок сітки Guide Guide йде за такою формулою:
- Ширина сторінки (ваша) мінус розмір шрифту в пікселях. Наприклад, 1170 (ширина bootstrap сітки) - 16px шрифт = 1 154 px
- Розмір однієї клітини. Шрифт 16px * 1,5 (1,5 це ідеальний розмір) = 24px
- Кількість колонок. Як правило, 12. Можна більше.
- Кількість зазорів. 12 колонок + 1 = 13.
- Ширина одного зазору. Число беремо з розміру однієї клітини, тобто 24 px.
- Сумарна ширина зазорів. Ширина одного зазору * кількість зазорів. 24px * 13 = 312 px.
- Сумарна ширина колонок. Ширина сторінки 1154 px - сумарна ширина зазорів 312 px = 842 px
- Ширина однієї колонки. Сумарна ширина колонок 842 px ділимо на 12 (842/12) = 70, 1. Округляем до 72 (тому що ділитися на 3, по 24 px).
Всі ці параметри використовуємо при настройках в плагіні Guide Guide.
3. Відмінні уроки можете подивитися у Максима Лобанова. По сітках, скетчам і дизайнам. На жаль, зараз його уроки не доступні, де знайти уроки не підкажу.
4. Встановити шрифт в Windows 7 можна зайшовши в меню Пуск> Панель керування> Оформлення та персоналізація> Шрифти. Завантажуєте потрібний шрифт в інтернеті і закидаєте його в папку Шрифти. Просто перетаскуєте або копіюєте як звичайний об'єкт. Перезапускаєте фотошоп і насолоджуєтеся новим шрифтом.
Швидкий доступ в фотошопі використані в уроці:
1. Переміщення по полотну - пробіл + ЛКВ (ліва клавіша миші).
2. Збільшити / віддалити полотно ALT + коліщатко миші.
3. Масштаб 100% CTRL + ALT + 0.
4. Включити / відключити клітини CTRL + »(або російською буква« е »).
5. Включити напрямні сітки GUIDE GIUDE, якщо включена CTRL +. (Або російською буква «ж»).
6. Склоніровать об'єкт CTRL + J.
7. Згрупувати об'єкт CTRL + G.
8. Включити лінійку CTRL + R.
9. Вибрати інструмент текст. Клавіша T.
10. Вибрати Rectangle Tool. Клавіша U.
11. Вибрати інструмент переміщення. Клавіша V.
12. Трансформація об'єкта CTRL + T. Об'єкт повинен бути виділений.
13. Перетягування об'єкта за допомогою точок. Клавіша A. Об'єкт повинен бути виділений.
14. Підняти шар в самий вгору CTRL + SHIFT +> (або буква «ред» російською).
15. Опустити шар в самий низ CTRL + SHIFT + <(или буква «Х» на русском).
Трохи про себе:
Мене звуть Сміла. Закінчив Алматинський Технологічний Університет за спеціальністю обчислювальна техніка та програмне забезпечення. Я завжди був в захваті від IT індустрії і сучасних технологій. Більшу частину своєї кар'єри я присвятив адміністрування малих корпоративних мереж. Але пізніше зрозумів, що небайдужий до веб-дизайну і розробки сайтів. Ця та професія, яка допомагає розкрити мій творчий потенціал і всю пристрасть в улюбленій справі. Зараз я повністю перейшов на веб-розробку. Тому, якщо ви потребуєте в моїх послугах, сміливо звертайтеся. Буду радий з вами попрацювати.
Як видалити елемент не додали в список гарячих клавіш.
Добрий вечір! Дякую за уроки! Підкажіть, сітку bootstrap в PSD 1170, але розміри листа чомусь не 1170, а 1920 і сітка фотошопа але збігається з межами guide сітки Як вирішити проблему? Заздалегідь дякую!
Здрастуйте, у мене грубо кажучи пригоріло, не де не можу знайти. як встановити плагін вашої сітки ... Допоможіть будь ласка. не розумію що роблю не так. Може він десь і знаходиться, але я його знайти в самому фотошопі не можу.
Сам довго провозився. Коротше спробуй більш ранню версію плагіна не 4, а 3, (3 встановлюється Файл-> Сценаріі-> Огляд це в PhotoShop) і вибрати файл install в папці модуля. Якщо не встановиться навіть третій, то проблема в твоєму фотошопі, можливо у тебе як у мене урізана версія, видалив скачав повну версію. І все встановилося без проблем.