Во второй части урока мы остановились на 7-м шаге, создание блока социальных ссылок
Продолжаем работу. Используя Line Tool, создайте 1px линию, как показано на скриншоте ниже.
Инструментом Text Tool добавьте текст Follow us. Используемый шрифт Helvetica Roman 18pt #ffffff.
Откройте социальные иконки, которые вы скачали, и разместите их соответствующим образом, как показано на скриншоте ниже. Просто измените их размер с помощью трансформирования Ctrl + T, я также добавил 1px тень.
Виджет О нас
Виджет будет содержать эскиз, и заголовок, содержимое и кнопку далее. Сначала вам нужно создать базовый слой с таким же цветом заливки, как и у социальных иконок, размер будет 340px на 210px. Когда вы закончите, разместите текст заголовка в том же текстовом формате.
Используя инструмент Rectangle Tool с заливкой цветом #121b1b, создайте форму размерами 90px на 90px. Поместите её, как показано на скриншоте ниже.
Используя Text Tool, добавьте фиктивный текст, цвет заливки #CCCCCC. Текст должен иметь 1px тень, так же, как и на нашем заголовке. Кроме того, разместите копию кнопки читать далее. Измените цвет заливки на # 616161 и поместите её как показано на скриншоте ниже.
Вкладки
Наши вкладки будет содержать последние сообщения и наиболее популярные. Для начала с помощью Rectangle Tool создайте форму 125px на 50px. Ярлык с текстом Most Recent напишите шрифтом Helvetica Roman 14pt #ffffff, также примените 1px тень. Дублируйте второй слой и измените текст ярлыка на Most Popular.
Для блока Most Recent применить этот режим смешивания.
Gradient Overlay: #4f4f4f, #141e1e
Для блока Most Popular применить этот режим смешивания.
Gradient Overlay: #353535, #505050
Мы создадим базовый слой, чтобы вместить все сообщения вкладки most recent. Используя инструмент Rectangle Tool с заливкой цветом #4f4f4f, создайте форму размерами 302px на 435px.
Возьмите копию сообщений, что мы делали в области категорий. Поместите её, как показано на скриншоте ниже.
Используя Line Tool, добавьте 1px линию, как показано на скриншоте ниже.
Реклама
Просто возьмите образец рекламного баннера размерами 125px на 125px и разместите его, как показано на скриншоте ниже.
Шаг 8: Работа над Footer
Footer (подвал) будет содержать twitter feed, виджет о нас, flickr виджет и топ комментариев. Для начала мы создадим базовый слой, который будет содержать все элементы, которые встанут в нашу область нижнего колонтитула. Базовый слой подвала такой же как базовый слой боковой панели. Просто повторите шаги, размер будет 960px на 345px.
Twitter Feed
Используя Rectangle Tool, создайте боксы.
Примените эти стили слоя
Gradient Overlay: #353535, #505050
Выберите инструмент Text Tool, установите шрифт Arial Regular – Italic 12pt #c7c7c7. Кроме того, примените 1px DropShadow.
Возьмите иконку Twitter и поместите её как показано на скриншоте ниже. Также с помощью инструмента Text Tool добавьте ссылку на Twitter-аккаунт и количество подписчиков.
Последним шагом будет добавление 1px линии, используя Line Tool. Цвет линии будет такой же, как в нашей боковой панели.
Виджет О нас
Просто возьмите копию виджета, который мы сделали для боковой панели, и поместите её как показано на скриншоте.
Продолжение урока здесь
Продолжаем работу. Используя Line Tool, создайте 1px линию, как показано на скриншоте ниже.
Инструментом Text Tool добавьте текст Follow us. Используемый шрифт Helvetica Roman 18pt #ffffff.
Откройте социальные иконки, которые вы скачали, и разместите их соответствующим образом, как показано на скриншоте ниже. Просто измените их размер с помощью трансформирования Ctrl + T, я также добавил 1px тень.
Виджет О нас
Виджет будет содержать эскиз, и заголовок, содержимое и кнопку далее. Сначала вам нужно создать базовый слой с таким же цветом заливки, как и у социальных иконок, размер будет 340px на 210px. Когда вы закончите, разместите текст заголовка в том же текстовом формате.
Используя инструмент Rectangle Tool с заливкой цветом #121b1b, создайте форму размерами 90px на 90px. Поместите её, как показано на скриншоте ниже.
Используя Text Tool, добавьте фиктивный текст, цвет заливки #CCCCCC. Текст должен иметь 1px тень, так же, как и на нашем заголовке. Кроме того, разместите копию кнопки читать далее. Измените цвет заливки на # 616161 и поместите её как показано на скриншоте ниже.
Вкладки
Наши вкладки будет содержать последние сообщения и наиболее популярные. Для начала с помощью Rectangle Tool создайте форму 125px на 50px. Ярлык с текстом Most Recent напишите шрифтом Helvetica Roman 14pt #ffffff, также примените 1px тень. Дублируйте второй слой и измените текст ярлыка на Most Popular.
Для блока Most Recent применить этот режим смешивания.
Gradient Overlay: #4f4f4f, #141e1e
Для блока Most Popular применить этот режим смешивания.
Gradient Overlay: #353535, #505050
Мы создадим базовый слой, чтобы вместить все сообщения вкладки most recent. Используя инструмент Rectangle Tool с заливкой цветом #4f4f4f, создайте форму размерами 302px на 435px.
Возьмите копию сообщений, что мы делали в области категорий. Поместите её, как показано на скриншоте ниже.
Используя Line Tool, добавьте 1px линию, как показано на скриншоте ниже.
Реклама
Просто возьмите образец рекламного баннера размерами 125px на 125px и разместите его, как показано на скриншоте ниже.
Шаг 8: Работа над Footer
Footer (подвал) будет содержать twitter feed, виджет о нас, flickr виджет и топ комментариев. Для начала мы создадим базовый слой, который будет содержать все элементы, которые встанут в нашу область нижнего колонтитула. Базовый слой подвала такой же как базовый слой боковой панели. Просто повторите шаги, размер будет 960px на 345px.
Twitter Feed
Используя Rectangle Tool, создайте боксы.
Примените эти стили слоя
Gradient Overlay: #353535, #505050
Выберите инструмент Text Tool, установите шрифт Arial Regular – Italic 12pt #c7c7c7. Кроме того, примените 1px DropShadow.
Возьмите иконку Twitter и поместите её как показано на скриншоте ниже. Также с помощью инструмента Text Tool добавьте ссылку на Twitter-аккаунт и количество подписчиков.
Последним шагом будет добавление 1px линии, используя Line Tool. Цвет линии будет такой же, как в нашей боковой панели.
Виджет О нас
Просто возьмите копию виджета, который мы сделали для боковой панели, и поместите её как показано на скриншоте.
Продолжение урока здесь
Всего комментариев: 0
Оставь комментарий первым!
