rss

Создаем красивую страницу «Скоро…» в Photoshop. Часть 1

(3 оценили, 11 баллов, средний: 3,67 из 5)
{lang: 'ru'}

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

Финальная страница

Финальная страница

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

Итак, сегодня я собираюсь показать вам шаг за шагом, как разработать страницу "скоро..." (или "на  реконструкции") в 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.

Настройки  слоя

Настройки слоя

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

header шаг 1

header шаг 1

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

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

Drop Shadow (цвет # 000000):

drop shadow настраиваем

drop shadow настраиваем

 

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

Конечный вариант шага2

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

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

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

horizontal-type-tool

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

Настройки текста

Настройки текста

 

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

Тень

Тень

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

С надписью

С надписью

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

step2c-text-settings2

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

Еще раз тень

Еще раз тень

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

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

Финальный вид  с таймером

Финальный вид с таймером

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″ паттерн):

step3-pattern-overlay

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

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

Тот же паттерн

Тот же паттерн

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

step3-stroke

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

step3-form-preview2

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

Stroke(цвет # FFFFFF):

step3-stroke

Inner Shadow (цвет #000000):

step3-inner-shadow2

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

step3-form-preview3

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

step3-drop-shadow2

Inner Shadow (цвет # 000000):

step3-inner-shadow3

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

step3-form-preview4

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

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

step3-form-preview5

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

step3-drop-shadow3

Inner Shadow (цвет # FFFFFF):

step3-inner-shadow4

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

step3-gradient-overlay2

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

step3-form-preview6

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

step3-text-settings3

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

step3-preview2

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

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

step4a-text-settings

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

step4a-drop-shadowstep4a-preview

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

Inner Shadow (цвет # 000000):

step4a-inner-shadow

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

step4a-preview2

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

step4a-preview3

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

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

step4a-drop-shadow

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

step4a-preview4

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

step4b-preview

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

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

step4c-ellipse-tool

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

step4c-preview

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

step4c-drop-shadow

Inner Shadow (цвет # 000000):

step4c-inner-shadow

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

step4c-pattern-overlay

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

step4c-preview2

 

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

step4c-preview3

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

step4c-inner-shadow2

Stroke (цвет #ffffff):

step4c-inner-shadow

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

step4c-preview4

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

step4a-text-settings

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

step4c-drop-shadow2

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

step4c-preview5

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

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

step4c-preview6

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

step4c-preview7

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

step5-text-settings

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

step5-drop-shadow

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

step5-color-overlay

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

step5-preview

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

Drop Shadow(цвет # 000000):
step5-drop-shadow2

 

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

step5-preview2

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

under-construction-page

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

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

Смотрим улетное видео

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

Получайте уроки по почте:

7 Comment , источник - wordpress-f1.ru

Comments (7)

  1. ZenCoder:

    Неплохо. У меня наверное какой-то неправильный взгляд на дизайн. Я сначала долго смотрю на то, что нравится, потом начинаю хреначить на CSS, потом потихоньку добавляю рюшечки, картинки и прочее, выскребая их по сусекам :D

    Владение стилями в классическом исполнении автора нравится.

    По спрайтам, подрезке репитерных фонов и оптимизации что-то будет интересное?

  2. wordpress-f1:

    Будет-будет) Все будет

  3. ZenCoder:

    А к чему ты стремишься? )

  4. ZenCoder:

    Пожалуйста, верни ей ноги. Кисточка -> цвет -> пипетка -> клик … крестик, дальше разберешься ;)

    Ластиком, пипеткой и кисточской рисовать можно (:

  5. Отлично.Вот уж правда говорят «ВЕК ЖИВИ…».Нашла для себя полезный прием.Спасибо.

Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: