Займемся фотошопом. У меня для вас интересный урок от зарубежного коллеги. Урок неприменно повысит ваши скиллы, ну и с ним убьете свое время, если оно у вас лишнее.

Создать страничку "скоро"  важно, если вы запускаете новый сайт или новый продукт. Или вы хотите модернизировать сайт. Таким образом, вы можете сообщить пользователям время оставшееся до запуска сайта.  Вы даже можете начать собирать е-майл адреса на этой страничке, чтобы сообщить людям, когда открывается сайт в точности. Хорошо сделанная страница будет говорить пользователям о том, что перед ними профессионалы.

Итак, сегодня я собираюсь показать вам шаг за шагом, как разработать страницу "скоро..." (или "на  реконструкции") в Photoshop. Вы можете скачать файл PSD в конце этого урок. Во второй части урока я также собираюсь кодировать эту страницу в HTML / CSS / Jquery.

Давайте начнем.

1. Настройка документа и фона

Создаем новый документ ("Файл> Создать" или "Ctrl + N") и установите размер 1280 х 980 пикселей:

Сохраните новый проект ("Файл> Сохранить" или "CTRL + S").

Создайте новый слой, чтобы использовать его в качестве фона для страницы. Теперь мы собираемся применить шаблон к этому слою. Скачать Orman Clark‘s  узоры отсюда Как только Вы их загрузите,  извлеките их и дважды щелкните по файлу subtle-patterns.pat.

Щелкните правой кнопкой мыши на слое, который мы создали выше, выберите Blending Options, а затем Pattern Overlay. Выберите рисунок, названный “subtle-light-6″ и примените эти настройки:

 

Теперь фон должен выглядеть следующим образом (нажмите на изображение, чтобы увидеть его в полном размере):

2. Создание header (заголовка)

2.а) Создание контейнера header

Выберите инструмент " Rectangle Tool " и установить его размер равным 1300 x 305 пикселей:

Кликните по рабочей области,  чтобы создать прямоугольник и переместить его в  верхнюю часть страницы (с  помощью Move Tool).  Дважды щелкните по иконке слоя и установите цвет # 3d3d3d.

Теперь страница должна выглядеть следующим образом:

2б) Стилизуем header

Щелкните правой кнопкой мыши на  слое заголовок (header) и выберите Blending Options. Добавьте эти стили к слою:

Drop Shadow (цвет # 000000):

 

Inner Shadow (цвет  #000000):

Gradient Overlay (от  #ffffff  к прозрачному):

Pattern Overlay (использовать “subtle-light-6″ паттерн, который мы использовали для фона):

Stroke (цвет  #ffffff):

Теперь дублируйте   слой с header(правой кнопкой мыши и выберите Duplicate Layer). Очистите стиль  продублированного слой (щелкните правой кнопкой мыши и   выберите Clear Layer Style). Установите ему заливку -  0%:

Примените следующие стили слоя:

Inner Shadow (цвет # 000000):

Pattern Overlay (использовать “subtle-light-6″ паттерн, который мы использовали выше):

Создайте новый прямоугольник на новом слое, используя инструмент Rectangle Tool   с размерами 1320 x 60 пикселей. Поместите этот слой под заголовком слоя (первый слой, который мы создали в шаге 2.a.). Переместить создали прямоугольник под   header  и установить ему заливку - 0%:

 

Примените этот стиль слоя:

Gradient Overlay (от # FFFFFF к прозрачному):

После этого шага страница должна выглядеть следующим образом:

 

Теперь мы собираемся добавить 2 пунктирные границы в header. Создайте новую группу ("Layer> New> Group") выше слоя  header и назовите его "пунктирная граница" или как угодно. Выберите инструмент Rectangle Tool , установите размер 10 х 2  (точно выбирайте высоту, а то получится жирная плюха как у меня, когда я вместо 2 пикселей всандарила 4) пикселя и создайте новый прямоугольник. Слой  прямоугольника должен  быть внутри группы, созданной выше. Установите заливку - 0% и примените эти стили слоя:

Drop Shadow (цвет # 000000):

Color Overlay (цвет # 2d2d2d):

Дублируйте слой прямоугольника и переместить его на 10 пикселей вправо. Используйте линейки, ("View> Rulers") и направляющие ("View> Show> Guides"), чтобы установить правильное положение. Повторите этот шаг, пока не будет создана вся пунктирная граница. Нажмите на кнопку "пунктирная граница" группы, созданной выше, отодвиньте границу и расположите ее  на 15 пикселей ниже верхнего края заголовка.

Теперь вам нужно продублировать  "пунктирную граница" и расположить  новую границу на  15 пикселей выше края header. Так должна выглядеть  страница :

2.c) Создание таймера обратного отсчета

Нам понадобиться специальный шрифт  " Open Sans" скачать.  После того как скачаете его  в формате TTF, установить его на свой компьютер и перезагрузите Photoshop, если это необходимо (убедитесь, что вы сохранили проект).

Создайте новый слой и выберите инструмент Horizontal Type Tool.

Применить эти настройки для Type Tool и установите цвет текста на # FFFFFF:

 

Фразу "*В разработке *" (или "скоро") заглавными буквами. Выберите две звезды (asterisks) с Type Tool и измените цвет на # ff5640. Нажмите на "В разработке” (или "скоро") текстового слоя, выберите Blending Options и примените этот стиль:
Drop Shadow (цвет # 000000):

Поместите "В разработке”  на 50 пикселей ниже верхнего края  header  и также переместите его в центре страницы. Используйте Guides and Rulers (чтобы установить правильно). После этого страница должна выглядеть следующим образом:

Теперь  создадим таймер обратного отсчета. Создайте новую группу и назовите ее "Таймер". Создайте новый слой внутри группы и выберите инструмент Horizontal Type Tool. Применить эти настройки для текста и установите цвет # FFFFFF:

Введите какое-нубудь время (в цифрах). В этом примере было набрано "09: 17: 48: 34", (реальный счетчик будет разибираться во второй части урока). Примените этот стиль к слою счетчика:
Drop Shadow (цвет # 000000):

Поместите счетчик в центр страницы, чтобы было 160 пикселей от низа header.
Для создания текста «Дни Часы Минуты Секунды", выберите инструмент Horizontal Type Tool снова, применить настройки ниже и установите цвет текста # EEEEEE:

Введите текст. Обратите внимание, что слова в этом тексте должны быть в разных слоях, так что вы можете перемещать их самостоятельно. Эти слои должны быть внутри группы "Таймер", так что вы можете переместить их вместе.
Перемещайте "Дней Часов Минут Секунд" текст, пока не получите такой результат:

3. Создание электронной формы подписки
Создайте новую группу и назовите ее "форма подписки на новости". Создайте новый слой внутри группы. Выберите инструмент Horizontal Type Tool, установите цвет текста на # 666666 и примените следующие настройки:

Как вы можете видеть, используется шрифт  "Times New Roman" и центрированный текст для этой части страницы. Теперь введите:

"Наш новый, удивительный сайт уже почти готов. Вы можете использовать форму ниже, чтобы подписаться на рассылку новостей. "
Выберите "удивительный сайт" и "новости"   и установите им цвет #02a2a2. Выделите весь текст и устанавите высоту  36 пикселей из палитры символов (“Window > Character”). Поместите созданный текст на 60 пикселей ниже нижней кромки header. Страница должна выглядеть следующим образом:

Теперь мы собираемся создать форму подписки. Создайте новый слой внутри группы"формы подписки" . Выберите инструмент Rounded Rectangle Tool    с закругленными углами и установите размер 680 х 82 пикселей с границей радиуса 8 пикселей:

 

Кликните  на странице,  чтобы создать новый прямоугольник. Дважды щелкните на пиктограмме слоя прямоугольника и установите цвет # 3d3d3d. Примените следующие стили слоя:

Drop Shadow (цвет # 000000):

Inner Shadow (цвет #000000):

Gradient Overlay (от  #ffffff  к празрачному):

Pattern Overlay (используйте “subtle-light-6″ паттерн):

Прямоугольник должен выглядеть следующим образом:

Но мы еще не закончили, мы собираемся добавить больше стиля прямоугольнику. Дублируем слой с прямоугольником. Установливаем заливку нового слоя - 0%, очистите стиль слоя и применить этот новый стиль:
Pattern Overlay (используйте “subtle-light-6″ паттерн):

Снова дублируем слой прямоугольника и перемещаем новый слой ниже слоя прямоугольника. Установите заливку нового слоя 0%, очистите стиль слоя и добавить этот новый стиль:
Stroke (цвет #ffffff):

Дублируйте слой прямоугольника в последний раз и переместите новый слой ниже слоя основного прямоугольника. Установите его заливку   0% и очистите стиль слоя. Теперь переместите вниз этот новый прямоугольник с помощью "Move Tool (V)", как на картинке ниже:

Примените следующие стили слоя:

Stroke(цвет # FFFFFF):

Inner Shadow (цвет #000000):

Форма должна выглядеть следующим образом:

Теперь мы собираемся создать поле ввода.
Выберите инструмент Rounded Rectangle Tool, установите размер 440 х 52 пикселей и границу с радиусом   8 пикселов. Нажмите на страницу для создания прямоугольника. Дважды щелкните на пиктограмме слоя прямоугольника и установите цвет # f5f5f5. Примените следующие стили слоя:
Drop Shadow (цвет # 000000):

Inner Shadow (цвет # 000000):

Перемещайте поле ввода, пока не получите этот результат (вы должны поместить его  на 15 пикселей  ниже от верхнего края формы):

Создайте новый слой, выберите инструмент Horizontal Type Tool  установите тексту цвет  # 888888.

Введите текст "Введите свой e-mail ...» и разместить его в центр поля ввода

Теперь мы создадим кнопку "РЕГИСТРАЦИЯ". Создайте новый слой, выберите инструмент Rounded Rectangle с закругленными углами и установите размер 200 х 52 пикселей с границей радиуса 8 пикселей. Нажмите на страницу для создания прямоугольника. Дважды щелкните на пиктограмме слоя прямоугольника и установите цвет # 02a2a2. Примените следующие стили слоя:
Drop Shadow (цвет # 000000):

Inner Shadow (цвет # FFFFFF):

Gradient Overlay (от # FFFFFF  к прозрачному):

Перемещайте прямоугольник (с кнопкой), пока не получите результат как на фото ниже. Вы должны установить ее приблизительно на 10 пикселей от правой части поля ввода.

Создайте новый слой, выберите инструмент Horizontal Type Tool, установите цвет текста на # FFFFFF и примените эти параметры к тексту:

Введите текст "РЕГИСТРАЦИЯ" и поместите его в центр  кнопки. Должен получиться такой вот результат:

4. Создание информационного блока

4а) Создание "О нас"
Создайте новую группу и назовите ее "Info". Создайте новую группу внутри "Info" и назовите его "о нас". Создайте новый слой внутри группы "о нас" , выберите инструмент Horizontal Type Tool, установите цвет текста   # ff5640 и примените эти параметры:

Введите текст, «О нас» и применить этот стиль слоя для слоя "о нас"
Drop Shadow (цвет # FFFFFF):

Теперь мы создадим пунктирную границу, как тогда, когда мы создали границу для header (заголовка). Создайте новую группу внутри группы "о нас" и назовите ее "пунктирная граница". Создайте новый слой внутри группы "пунктирная граница" . Выберите инструмент Rectangle Tool и установите размер 10 х 3 пикселей. Нажмите на странице, чтобы создать новый прямоугольник. Дважды щелкните на пиктограмме слоя прямоугольника и установите цвет # FFFFFF. Примените этот стиль слоя:

Inner Shadow (цвет # 000000):

Сделайте дубликат  слоя прямоугольника и поместить новый прямоугольник на 10 пикселей справа от первого прямоугольника. Повторите этот шаг, пока не будут  созданы всей границы. "О нас" блок  должен быть шириной 300 пикселей, так что границы должны иметь одинаковую ширину. (Это потому, что во второй части урока  будет использоваться 960 Grid System для кодирования страницы в HTML / CSS, так что нижний колонтитулы должны быть шириной 960 пикселей.)

Теперь выберите инструмент Horizontal Type Tool, установите цвет текста   # 555555 и примените следующие параметры  к тексту

Введите немного текста (лучше lorem ipsum - это тексты пустышки задайте в поисковике для поиска)   Выделите весь текст и установите высоту  26 пикселей из палитры символов (“Window > Character”). Вы должны получить такой результат:

Примените этот стиль слоя к слою образца текста:
Drop Shadow (цвет # FFFFFF):

Теперь блок "О нас"  должен выглядеть следующим образом:

4.b) Создание блока "Контакты"
Создайте новую группу внутри "Инфо" и назовите его "контакт". Применить те же настройки текста и стилей слоя, который мы использовали в шаге 4а) для создания "О нас" блока. (. Вы можете дублировать "о нас" группы и отредактировать его, чтобы создать "Контакт") Вы должны получить такой результат:

Для "E-mail", "тел", "сайт" и "Адрес" установите цвет текста  # 888888. Поместите разделе "контакты" на 30 пикселей в право от блока "О нас" . Выровняйте горизонтально два блока  и разместить их на 70 пикселей ниже  электронной формы подписки. Страница должна выглядеть следующим образом:

4.c) Создание социального блока
Текст "Следуйте за нами" и пунктирная граница такие же как выше.  В этом шаге я только объясню, как создать четыре социальные кнопки.
Создайте новую группу внутри "Инфо" и назовите его "следовать за нами". Создайте новую группу внутри «следуйте за нами" и назовите его "facebook". Создайте новый слой внутри группы "facebook" . Выберите Ellipse Tool и установите размер 60 х 60 пикселей.

Нажмите на странице, чтобы создать эллипс. Дважды щелкните на пиктограмме слоя эллипса и установите цвет # 555555.

Примените следующие стили слоя:
Drop Shadow (цвет # 000000):

Inner Shadow (цвет # 000000):

Pattern Overlay (использовать  “subtle-light-6″, который мы использовали выше):

Кнопка должна выглядеть следующим образом:

 

Дублируйте  слой эллипса. Переместите новый слой ниже первого слоя. Установите заливку нового слоя -  0% и очистите стиль слоя.  Вид нового эллипс  на рисунке ниже:

Примените следующие стили слоя на новый слой:
Inner Shadow (цвет # 000000):

Stroke (цвет #ffffff):

Кнопка должна выглядеть следующим образом:

Теперь мы собираемся добавить логотип Facebook. Создайте новый слой и выберите инструмент Horizontal Type Tool. Установите цвет тексту  - # FFFFFF и примените эти параметры к тексту:

К букве "F"  примените этот стиль слоя:
Drop Shadow (цвет #000000):

Поместите логотип Facebook в центр кнопки. Кнопка должна выглядеть следующим образом:

Для других кнопок повторите описанные выше шаги (или дублируйте слой). Вы найдете логотипы Twitter, RSS Dribble в PSD файлах, которые можно скачать в конце этого урока.

Поместите социальные кнопки на 20 пикселей друг от друга, пока не получите такой результат:

Теперь страница "в разработке"  должна выглядеть следующим образом:

5. Создание Footer'a
Footer очень простой. Мы только должны создать пять звезд. Итак, создайте новую группу и назовите ее “footer”. Создайте новый слой внутри группы. Выберите инструмент Horizontal Type Tool и применить эти параметры к тексту:

Символ "**" (с пробелом в середине)  установите  заливку слою - 0%. Примените следующие стили слоя:
Drop Shadow (цвет # FFFFFF):

Color Overlay (цвета # 2d2d2d):

Вот результат:

Создайте новый слой и выберите инструмент Horizontal Type Tool. Применить те же настройки текста, как указано выше, установить цвет текста   # ff5640 и введите "*". Заливка слоя, должна быть   100%. Примените этот стиль к слою:

Drop Shadow(цвет # 000000):

 

Теперь дублируйте первый слой (с двумя звездами). Выровняйте горизонтально звезды и перемещайте их, пока не получите такой результат:

Поместите эти пять звезд на 80 пикселей ниже блока  "Информация".
И это все!
Вот конечный результат:

Можете скачать

И отдохнуть вы проделали большую работу...

Нет меток к этой записи