Трафареты для декора стен (55 фото). Метод трафаретной росписи "сухая кисть"

По многочисленным просьбам читателей, мы сегодня будем делать дизайн, вернее макет сайта в Photoshop. Конечно если с этим никогда не сталкивался, сделать его довольно не просто, возникает множество вопросов, на которые я сегодня постараюсь ответить. Как оказывается, что материала по этому поводу в интернете не так уж и много. Дизайнеров куча, а как сделать макет сайта никто не рассказывает. Может быть я просто плохо искал? :)

Продолжение

В общем давайте уже делать.

Для начала я подготовил не сложный макет, который мы будем полностью с Вами разбирать. Вот как он выглядит:

Как видите, что шаблон получился не сложный, естественно это блоговый шаблон, который позже мы будем верстать в HTML. Ну а пока что только будем рисовать. Ну а теперь поехали.

Программное обеспечение

Первое, что Вам нужно это Photoshop. Если у Вас его нет, покупайте:-)

Создание и размеры документа

Чтобы создать новый документ в Фотошопе нужно зайти в «Файл» и кликнуть «Создать», затем появится окно, в котором нужно задать соответствующие размеры.

Размеры зависят от того какой ширины будет Ваш будущий сайт. Вот например, Вы решили, что готовый сайт будет иметь ширину 1000 рх, следовательно размер документа нужно сделать немного больше где то 1200 рх. Это делается в первую очередь для удобства, что бы Ваш макет смотрелся так же как в браузере.

По поводу высоты, выставляется размер от тематики шаблона. Но желательно делайте больше, 4000 рх думаю хватит. Это делается для того, чтобы в дальнейшем все элементы влезли. Потому что я как то сделал маленькую высоту, и мне пришлось потом переносить всё в новый документ.

В моём случае сайт будет иметь ширину в 1200рх. Таким образом я сделал документ шириной в 1300 рх и высотой в 4000 рх. Остальные настройки оставьте как есть.

Фон шаблона сайта

После того как мы создали документ, в первую очередь сделайте фон для сайта. Не важно, что это будет цвет или картинка но сделайте его. В моём случае это просто белый фон. Выбираем инструмент «Заливка» в палитре цветов выбираем белый цвет, затем просто кликаем по фону.

Ширина будущего сайта в 1200 рх

Теперь нам нужно выставить размер будущего сайта, чтобы он выглядел так же как будет смотреться в браузере. Делать мы будем это с помощью линейки. Если она у Вас не активна, нужно зайти в «Просмотр» и поставить галочку на против «Линейка». Затем она должна появиться у Вас в окне просмотра.

А вот как она выглядит:

Выделяем наш слой, нужно просто один раз кликнуть на него:

А сейчас нужно поставить линейку по центру нашего документа, вернее найти центр. Для этого наводим курсор на линейку на ней же зажимаем левую кнопку мыши и вытягиваем линию на наш документ. Тянем примерно на середину, линейка сама найдёт центр.

После того как мы нашли центр, нужно поместить наш сайт шириной в 1200 рх в центр документа который имеет размер в 1300 рх. Для этого выбираем инструмент «Прямоугольная область», сверху устанавливаем Стиль на Заданный размер, куда пишем вот такие значения: ширина — 1200рх, высота 400рх. Далее просто кликаем по нашему белому фону и у нас появится выделенная область той ширины которая нам нужна.

Теперь нашу выделенную область помещаем с помощью мышки по центру, она найдёт центр сама. Затем нужно вытащить ещё 2 линейки и установить их по обе стороны выделенной области. Таким образом мы обозначаем границы нашего будущего сайта, который будет иметь ширину в 1200 рх. Так же по этим линейка будет проще подгонять элементы дизайна. Если Вам не понятно сделайте так же как на рисунке ниже.

Линейку мы будем использовать и в дальнейшем, так как без неё здесь не обойтись, она позволяет выставить всё ровно.

Теперь мы практически полностью подготовили наш документ. Мы узнали середину, а так же обозначили точный размер за который не нужно вылазить. Теперь переходим к самому интересному, а именно к созданию дизайна сайта (макета).

Создание дизайна или макета сайта

Важно!

Всегда создавайте группы для слоёв и давайте им названия. Потому что в дальнейшем точно запутаетесь!

Группы

Создаём группу, и называем её «Хидер» (Шапка) в ней же создаём под группу «Верхнее меню» так как будем начинать именно с него. В группе создаём новый слой и называем его «фон». Это будет фон нашего верхнего меню.

Вот что должно получиться:

Верхнее меню

Опять вытягиваем линейку и выставляем её как на рисунке:

Выбираем инструмент «Прямоугольная область» и выделяем вдоль горизонтальной линейки:

В палитре цветов вбиваем вот этот цвет #0dbfe5, выбираем инструмент «Заливка» и заливаем выделенную область, затем нужно отменить выделение во вкладке «Выделение» нажмите на «Отменить выделение»:

Кликаем на инструмент «Горизонтальный текст». Сверху в панели выбираем шрифт «Segoe UI». Теперь кликаем на голубом фоне меню и пишем название наших страниц. Потом Вы можете переместить текст куда Вам нужно.

Теперь создаём разделители между страницами. И сделаем им небольшой эффект вдавленности. Создаём новый слой, выбираем инструмент «Линия». Затем зажимаем Shift и рисуем вертикальную линию через весь голубой фон нашего меню.

По слою с фигурой нажимаем два раза мышкой, откроется окно со стилем слоя. Ставим галочки на против «Наложение цвета» И вбиваем туда вот этот цвет #0aaacc.

Переходим в пункт «Тень» и задаём следующие параметры:

Вот, что должно получиться:

После этого просто копируем слой с нашей линией и выставляем после каждого слова. Вот что у меня получилось:

Иконки социальных закладок

Здесь же в меню только с правой стороны мы добавим иконки закладок. В моём случае это , но можно поставить и обычные скачанные иконки. Скачать можете вот .

Для начала с помощью линейки нужно выставить высоту наших иконок, что бы они были ровными. Вот, что нужно сделать:

Потом создаём группу, называем её «Социальные закладки», создаём в ней новый слой. Теперь кликаем по инструменту «Произвольная фигура» выбираем нужную фигуру:

Наводим курсор в то место где будет иконка, зажимаем Shift, (для того чтобы иконка появилась ровная) и растягиваем до нужных размеров. И такой же процесс повторяем со следующими фигурами. В конечном итоге вот что должно получиться:

Переходим к логотипу. Опять же создаём отдельную группу для логотипа и в новый слой.

Логотип

Переходим на этот сайт и качаем шрифт. Выбираем инструмент «Горизонтальный текст». Ищем в поле со шрифтами название нашего шрифта Olivier. Кликаем на то место где будет располагаться лого и пишем название на Английском, потому что этот шрифт не поддерживает кириллицу. Вот что должно получиться:

Создаём группу «Нижнее меню» и новый слой.

Нижнее меню (Главное)

Выставляем линейки как на рисунке:

Выбираем инструмент «Прямоугольная область» и выделяем. Затем выделенную область заливаем вот этим цветом #303030. Вот что должно получиться:

Отменяем выделение во вкладке «Выделение». Теперь идём во вкладку Фильтры — Шум и выбираем Добавить шум. Потом выставляем такие значения:

Добавляем линии. Делаются они так же как и в верхнем меню только изменён сам цвет линии. Думаю, что вы справитесь, и должно получиться вот что:

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

Как обычно в группе «Хидер» создаём группу «Инфо панель» с новым слоем.

Панель с информацией

Для начала добавляем полосы с линейки как на рисунке ниже:

Выбираем инструмент «Прямоугольная область» и выделяем область прям под меню, и заливаем её чёрным цветом #000000

Отменяем выделение, берём «Горизонтальный текст» изменяем размер шрифта на 48 пт и цвет #a4a4a4. Пишем «Последние Записи». Вот, что у Вас должно получиться в итоге:

Контент

Переходим к разметке середины нашего будущего сайта. Нам нужно с помощью линейки разметить где будут находиться блоки постов и блок сайтбара (Правой колонки).

Сразу же нужно создать 2 отдельных группы:

Метки — в эту группу мы будем добавлять текст с размером наших колонок.
Контент — группа где будет находиться вся наша середина сайта.

В группе контент создаём под группу «Левый», в которой будут находиться наши блоки с записями.

Выбираем инструмент «прямоугольная область», задаём ей стиль «заданный размер» и выставляем ширину 800рх высоту 100рх. Вот итог:

Добавляем линии с линейки как на рисунке, и отменяем выделение:

В группе «Контент» делаем под группу с названием «Правый» (Сайтбар). Будем размечать место для правой колонки сайта.

Опять берём «прямоугольная область», а вот в стиле области задаём немного меньший размер в ширину 350рх высоту оставим ту же в 100рх. И далее делаем всё как на рисунке:

Вот теперь мы точно знаем где будут блоки с записями и сайтбар. И всё будет ровно.

Помните мы создали группу метки? Там просто создайте слой с надписями размеров блоков, вот как у меня:

Эти метки очень помогут при вёрстке. Не нужно будет вспоминать размеры.

Блоки с записями

Начнём мы пожалуй с блоков с записями, делаются они в данном случае очень просто.

В группе «Левый» создаём подгруппу «блок» и новый слой.

Опять выбираем инструмент «Прямоугольная область». В стиле задаём размеры 800 х 300. Подгоняем под линии. Потом заливаем вот этим цветом #d9d9d9. Это у нас получилась миниатюра.

В той же группе добавьте метку с помощью текста как у меня на рисунке выше.

Теперь давайте добавим заголовок к записи. Берём «Горизонтальный текст» ставим размер в 35 пт и цвет чёрный. Добавляем прям под миниатюрой:

Добавляем информацию к посту. Ставим размер шрифта в 14 пт и цвет ближе к серому:

И описание к посту:

Теперь добавляем текст и смотрим, что у нас получилось:

Чтобы записи хоть не много разделить, давайте создадим простой разделитель из кругов.

Создаём группу «Разделитель», выбираем «Овальная область» создаём слой. И под блоком записей зажимая Shift рисуем круг, затем заливаем его вот этим цветом #efefef.

Отменяем выделение и ищем середину круга с помощью линейки

Выбираем слой с нашим кружком на нём же нажимаем правую кнопку мыши и выбираем «Создать дубликат слоя». Перетащите его немного влево.

В верхней панели заходи во вкладку «Редактирование» — Трансформирование и выбираем Масштабирование. И делаем круг немного меньше первого, при этом зажимая Shift чтобы круг получился ровным.

Вот что должно получиться:

Копируем слой этого маленького круга опять перемещаем его влево. Так же точно уменьшаем его размер как написано выше, чтобы получилось вот так:

Сейчас Вам нужно создать дубликат среднего круга и переместить его вправо, и тоже самое сделать с маленьким кругом. Чтобы было понятнее сделайте как на рисунке:

А вот что получилось только в нормальном размере:

Сейчас размещаем блок записей под блоком. Создаём дубликат нашей группы «Блок» На панели инструментов выбираем курсор (самый верхний). И перетаскиваем наш блок записей вниз. и так делаем раз 5.

Сайдбар (правая колонка)

Находим нашу группу «Сайдбар», и создаём в ней подгруппу «Поиск». С помощью линии делаем вот так:

Выбираем инструмент «Прямоугольная область» и выделяем поле для поиска, затем заливаем его вот этим цветом #eeeeee

Не забываем отменить выделение, кликаем на инструмент «Горизонтальный текст» и в сером поле пишем слово Поиск

Слева выбираем инструмент «Произвольная фигура» и сверху ищем фигуру лупы. Она есть в стандартных фигурах. Создаём слой в группе «Поиск» наводим на поле и рисуем нашу фигуру удерживая Shift.

Поле поиска готово. Теперь переходим к виджетам.

Создаём группу «виджет» и новый слой в ней. Затем добавляем линий как на рисунке. Это будет фон нашего заголовка, и заливаем его эти цветом #eeeeee

В наш заголовок теперь нужно добавить сам заголовок, делаем это с помощью текста. А ещё добавим иконку к заголовку. Для этого нужно выбрать любую фигуру которая по душе, и которая по смыслу подходит:) Не забываем зажимать Shift когда добавляем фигуру. И залейте её вот этим цветом #0dbfe5

И конечно же нужно добавить записи к нашим виджетам. Нужно выбрать инструмент «горизонтальный текст», затем установить размер в 16 пт. И сделать ка на рисунке ниже

Затем просто создаём дубликат группы и перетаскиваем виджет вниз. Делаем то же самое что и с постами.

Вот теперь мы можем наблюдать почти готовый и простой макет для нашего будущего сайта.

Футер (Низ сайта)

Ну как же без него. В этом шаблоне он тоже не сильно сложный.

Всё как обычно создаём группу «Футер» и слой в ней. И размечаем его с помощью линейки, выбираем наш уже любимый инструмент «прямоугольная область» выделяем его и заливаем #0dbfe5

Отменяем выделение. Берём «Горизонтальный текст» находим тот шрифт, который мы скачали (Olivier), и вписываем наш логотип, только цвет текста делаем чуть темнее.

А с правой стороны нашего футера добавляем меню такое же как сверху только без линии. Его даже можно просто скопировать и переместить вниз.

Вот и всё, друзья, у нс готовый макет, который уже можно верстать:)

Ещё, вот Вам его PSD файл. Скачивайте, и смотрите если что то не поняли.

Друзья, если Вам что нибудь будет не понятно, обязательно спрашивайте в комментариях.

До скорых встреч.

Для оформления займа онлайн достаточно на сайте МФО заполнить форму заявки, содержащую паспортные данные, желаемую сумму займа и некоторую другую информацию. Также, если планируется получение денег на карту, потребуется наличие именной Visa или MasterCard с CVV2 для получения средств.

Решение по заявке принимается от нескольких минут до получаса. Если сумма займа превышает 30-50 тысяч руб., заявка рассматривается вручную, что влияет на время её рассмотрения. Скорость поступления денег зависит от выбранного способа получения - на счет, на карту, на электронный кошелек или наличными и от суммы займа. Деньги переводятся в любое время суток, а также в праздничные и в выходные дни.

Увеличить срок займа можно на период 1-30 дней. В некоторых случаях, при наличии веских причин, продление займа осуществляется без переплат. В остальных случаях за пролонгацию займа оплачивается дополнительный комиссионный сбор. Количество возможных продлений необходимо уточнять в МФО.

В первый раз можно занять сумму от 1 тысячи рублей до 30 тысяч рублей в зависимости от разных условий. На размер первого займа влияет размер дохода заемщика, срок займа, наличие хорошей кредитной истории, условия по определенным программам.

МФО проверяет действительность паспорта через базу ФМС, адрес регистрации, контактные данные заемщика, оценивает его платежеспособность, смотрит открытые делопроизводства по базе ФССП. Анкеты онлайн-клиентов проверяются автоматизированной скоринговой системой. Проверяются также данные из БКИ, сведения о банковской карте.

Плохая кредитная история еще не причина для ожидания отказа. Если КИ испорчена по вине банка кредитора, можно обратиться в БКИ с заявлением. В остальных случаях можно попробовать её исправить цепочкой последовательно взятых и своевременно погашенных небольших микрозаймов.

Если займ не дают, следует выяснить причину. Например, получить свою КИ и изучить её - нет ли там просрочек образовавшихся по вине банков. Может у вас скопилась задолженность по коммунальным платежам - её нужно погасить. Можно через некоторое время повторно обратиться в МФО за получением меньшей суммы для займа. Несколько последовательно взятых и своевременно возвращенных небольших займов улучшат ваши позиции в МФО.

Если в положенное время деньги не будут возвращены в МФО, вам будут начисляться пени в течение определенного срока предусмотренного договором. Если за это время вы не выйдете на связь и не вернете займ, ваше дело будет передано в коллекторское агентство, которое будет работать с вами по урегулированию способа возврата денег. Если вы будете избегать общения с коллекторами, дело будет передано судебным приставам, которые:

арестуют средства на зарплатной карте;
ограничат выезд за рубеж;
произведут арест вашего личного имущества.

Рисовать по трафарету можно очень многими способами и инструментами. Вот неполный список подходящих предметов: кусок посудной губки, трафаретная кисть, поролоновый валик, обычная ветошь... Не важно, чем Вы рисуете, важно соблюдать всего два главных правила:

Краски - минимум!

(на губке, кисти, валике краски должно быть совсем чуть-чуть. Грубейшая ошибка - набрать побольше краски, чтобы побыстрее нарисовать и цвет чтобы погуще. Нет, нет и нет! Лучше десять раз макнуть губку и три раза пройти по одному месту для насыщенности, чем созерцать неряшливые подтеки)

Кистью не возить!

(движения кистью или губкой или чем там Вы рисуете - должны быть перпендикулярны поверхности. Недопустимо рисовать привычным способом - наклоняя кисть и волоча ее по трафарету)

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

Хорошо потрясите закрытую банку с краской, чтобы на внутренней поверхности ее крышки образовалась миниатюрная палитра. Макните в краску всего лишь кончики волосков кисти .

Затем на бумажном полотенце или листе бумаги сделайте несколько круговых движений этой кистью . Энергичные вращения кисти поднимут краску верх по щетине. Сделайте один последний оборот на чистой поверхности полотенца чтобы удалить краску с кончиков щетинок. Все это звучит странно на первый взгляд. Но попробуйте просто слепо повторить наш совет - и результат Вас удивит!

Прежде, чем приступать к трафарету, сделайте пробный мазок на листе бумаги и сразу же проведите по нему пальцем. Смазался? Тогда возвращайтесь назад к бумажному полотенцу! Это просто удивительно, как мало краски Вам нужно и как надолго ее хватит. На картинке ниже - слишком мало краски (вверху), слишком много краски (слева), почти в самый раз (справа).

Тампонирование или набивка происходит путем постукивания плоской частью Вашей кисти о поверхность рисования. При этом кисть должна быть всегда строго под углом 90 градусов к поверхности . Только в этом случае щетина кисти не подлезет под мостики на трафарете.

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

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

Ну вот и все, Вы уже и профессионал трафаретной росписи! Шутки шутками, но даже этой краткой инструкции достаточно. чтобы результат Вам приятно удивил и порадовал Ваших близких, родных и гостей.

Урок 1. Подготовка к работе, расстановка направляющих.

Тема: Веб-дизайн

Время ролика: 15:41

Cложность: легкая

Прикладные программы: Adobe Photoshop CS5

JavaScript. Быстрый старт

В этом уроке мы сделаем разметку макета, используя направляющие. Это необходимо чтобы все элементы сайта были выровнены, а не "налазили" и "прятались" друг за другом. Направляющие в дальнейшем значительно облегчат вёрстку сайта.

Урок 2. Шапка сайта.

Тема: Веб-дизайн

Время ролика: 58:53

Cложность: средняя

Прикладные программы: Adobe Photoshop CS5

В этом уроке мы сделаем коллаж на тему путешествия из предметов, которые берём с собой или встречаем во время путешествий. В процессе мы обработаем каждую картинку: осветляя, затемняя, добавляя блики, тени, рисуя свои фигуры с нуля, деформируя и изменяя формы разных предметов и многое другое. Мы сделаем из кучи картинок гармонично вписывающуюся шапку в общий дизайн блога, когда посетитель будет заходить на сайт – он сразу будет понимать, куда попал и что его здесь ждёт.

Урок 3. Проработка меню, контента, правого блока и футера.

Тема: Веб-дизайн

Время ролика: 57:52

Cложность: средняя

Прикладные программы: Adobe Photoshop CS5

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

Урок 4. Продумываем разметку страницы и нарезаем макет.

Тема: HTML, CSS

Время ролика: 57:52

Cложность: средняя

Прикладные программы:

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

Урок 5. Верстаем область основного контента.

Тема: HTML, CSS

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Время ролика: 66:41

Cложность: средняя

Прикладные программы: Adobe Photoshop CS2, DreamWeaver 8

В этом уроке мы сверстаем область основного контента, навигацию по рубрикам и «подвал» сайта. Чтобы уменьшить количество используемых картинок и не увеличивать вес страницы, при верстке будем использовать новые свойства CSS3. А также, чтобы уменьшить количество используемых классов, будем активно применять псевдо-классы.

Урок 6. Устанавливаем слайдер, дорабатываем сайт.

Тема: HTML, CSS

Время ролика: 23:01

Cложность: средняя

Прикладные программы: Adobe Photoshop CS2, DreamWeaver 8

Как известно, Internet Explorer ниже 9-ой версии не поддерживает свойства CSS3. В данном уроке мы все-таки «заставим» Internet Explorer поддерживать эти свойства, чтобы сайт смотрелся одинаково во всех браузерах. Также в данном уроке мы установим слайдер на нашу страницу для прокрутки изображений.

Урок 7. Создание темы WordPress. Часть 1.

Тема:

Время ролика: 87:31

Cложность: средняя

Прикладные программы: WordPress 3.2.1-ru_RU

В этом уроке мы начнем с необходимых теоретических пояснений и установки CMS WordPress. В частности, узнаем об особенностях создания темы для выбранной нами системы управления сайтом, разберем структуру любой темы, поговорим о том, что необходимо знать для успешного создания темы. После установки CMS WordPress и создания папки для будущей темы, мы начнем постепенное изучение функций WP, знание которых является неотъемлемой частью при создании любой темы. После краткого знакомства с функциями мы перенесем имеющийся у нас шаблон в папку с создаваемой темой. После переноса шаблона в тему мы разделим шаблон на логические части (header, footer, sidebar), которые подключим к главному шаблону темы (index). В конце первого урока осуществляется динамический вывод краткого текста статей на страницы блога.

Это первая часть статьи по проектированию делового веб-сайта. Первая часть статьи будет посвящена проектированию сайта в фотошопе. Во второй части мы преобразуем PSD результат в XHTML шаблон.

Конечный результат

На изображении проект, который мы будем делать. Кликните по изображению и увидите проект в натуральную величину.

Общее представление

В этой статье я предполагаю, что вы имеете базовый представления о фотошопе и знаете, о том, как делать базовые вещи, например, добавить текст, нарисовать форму, изменить размеры, вращать объект.

Моя цель в этой статье показать, что не всегда необходимо большое количество эффектов в дизайне, чтобы сделать привлекательный шаблон. Несколько шрифтов и немного эффектов, позволят спроектировать профессиональный дизайн, который произведет на ваших посетителей приятное впечатление.

У дизайна, который мы собираемся проектировать есть header, который содержит название компании и область навигации. В области под header на первый план выдвигаются основные моменты бизнеса и вспомогательные детали.

С помощью отзывов клиентов и краткого обзора проекта попытаемся построить доверительные отношения с потенциальными клиентами.

Наконец, в самом низу у нас будет нижняя сноска, которая содержит стандартную информацию об авторских правах.

Создание документа

1 Создайте новый документ размером 1100px X 1500px. Затем добавьте 2 вертикальные направляющие на 70px и 1030px, что даст нам ширину в 960px, которая легко приспособится к большинству экранам.

Создание Header

2 Начнем создавать header с добавления фона. Выберите инструмент Rectangle Tool (прямоугольник), в качестве основного цвета (Foreground Color) установите темно-серый цвет (#333333), и затем протяните прямоугольник высотой 130px от левого края до правого.

Добавление названия сайта, логотипа

3 Чтобы добавить название компании, установите шрифт Myriad Pro. Установите размер шрифта 60px, цвет светло-серый (#EEEEEE), расстояние между буквами (tracking) -40px. Вы можете установить все эти значения в панели Character (шрифт) (Window > Character). С помощью инструмента Horizontal Type Tool (T) напечатайте название компании и расположите его напротив левой направляющей.

Создание навигации

4 Чтобы добавить навигационную область, установите шрифт Arial. Размер шрифта 16px и цвет #EEE. Напечатайте некоторые названия (например, о проекте, реклама, контакты, услуги) и разделите двумя дефисами.

Создание первой контент секции

5 Для того чтобы создать область с контентом, нам необходимо добавить заголовок в эту область. Установите шрифт Myriad Pro, назначьте толщину шрифта bold, размер шрифта 60px, расстояние между буквами (tracking) -40px и цвет #333333. Напечатайте название с помощью инструмента Horizontal Type Tool (T).

6 Чтобы немного выделить заголовок, изменим цвет амперсанды (&) на светло-синий (#00BFF3).

7 Снизу нам необходимо добавить подзаголовок. Установите шрифт Myriad Pro, толщину шрифта Regular, шрифт 50px, и цвет #ссс. Напечатайте заголовок и поместите его под основной заголовок.

8 Теперь нам необходимо добавить краткий обзор того, что делает наша компания. Установить размер шрифта 30px, цвет #CCCCCC и напечатайте ряд точек от левой направляющей до правой.

9 Создайте копию (выберите текстовый слой на панели слоев и затем нажмите Ctrl/Cmd + J) этой горизонтальной пунктирной линии, и затем поместите ее примерно на 100px ниже первой линии.

10 Теперь нам необходимо добавить текст между линиями. Установите шрифт Myriad Pro, размер шрифта 34px, цвет #555555, межстрочный интервал (letter spacing) 42px, расстояние между буквами (tracking) -40px, и затем напечатайте несколько строчек текста.

11 Вы можете захотеть выделить некоторые ключевые слова, тогда сделайте их шрифт жирным, чтобы акцентировать на них внимание; я выбрал случайные слова.

Добавление деталей сервиса

12 Теперь нам требуется добавить некоторые детали о наших услугах. Выберите инструмент Rectangle Tool (прямоугольник), в качестве основного цвета (Foreground Color) установите #00AEEF, и нарисуйте прямоугольник размером 280x350px, расположите его напротив левой направляющей.

13 Чтобы немного выделить эту коробку, применим стиль слоя Drop Shadow (Отбросить тень) (двойной клик мышки по слою откроет диалоговое окно Стиль Слоя); в Drop Shadow, где цвет, установите серый цвет (#AAAAAA).

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

14 Сейчас нам требуется добавить название нашему сервису. Выберите инструмент Horizontal Type Tool и установите шрифт Myriad Pro, размер шрифта 40px, и цвет текста белый (#FFFFFF). Растяните текстовый блок от правого края коробки до левого края и назначьте выравнивание текста по центру. Затем напечатайте заголовок.

15 Сейчас установите размер шрифта 18px и напечатайте ряд точек, которые станут пунктирной линией.

16 После этого, установите размер шрифта 15px и протяните текстовый блок от левого края коробки до правого, затем напечатайте текст, описывающий вашу услугу.

17 . Наконец, нам требуется добавить кнопку у основания коробки. Выберите инструмент Rectangle Tool, установите синий цвет (#0076A3), и нарисуйте блок размером 230x40px.

18 Зайдите в стили слоя и примените Inner Glow (внутреннее свечение) к кнопке, где цвет установлен темно-синий - я использовал #235162.

19 Промаркируем кнопку. Установите размер шрифта 18px и тип uppercase (заглавные буквы), напечатайте, например, "УЗНАТЬ БОЛЬШЕ".

Первые блок сделан.

20 Создайте две копии этого блока, дублируя первый блок и весь контент внутри него. Воспользуйтесь инструментом перемещение (Move Tool), чтобы расположить блоки равномерно. Также поменяйте детали в каждом блоке.

21 Чтобы закончить с этим разделом, сделайте копию пунктирной линии, которую мы сделали в предыдущем шаге, и расположите ее у основания раздела.

Добавление клиентских отзывов

22 Для клиентского блока нам для начала необходимо сделать заголовок. Установите шрифт Myriad Pro, размер шрифта 24px, цвет темно-серый (#555555), и напечатайте текст «мнения клиентов» Horizontal Type Tool (T).

23 Теперь для первого клиента, оставившего рекомендацию, создадим рамку. Выберите инструмент Rectangle Tool, установите светло-серый цвет (#CCCCCC), и нарисуйте блок размером 84px X 84px.

24 Теперь добавьте свою фотографию, которая имеет размеры чуть меньшие, чем блок.

25 Далее, нам требуется добавить некоторый текст, следующий за фото. Установите шрифт Arial, размер шрифта 14px, и воспользуемся темно-серым цветом, который мы использовали для клиентского заголовка (#555555), напечатайте какой-нибудь фиктивный текст.