Шрифты для Фотошопа Cs5
Продолжаем наши уроки по верстки сайта с нуля. Рекомендую прочитать первые два урока: знакомство с версткой и тем, кто такой верстальщик и что такое блочная верстка, знакомство с сайтом.
Photoshop – графический редактор верстальщика
У Вас уже должен быть фотошоп, я использую Adobe Photoshop CS5 extented. В принципе без разницы, какая версия у Вас, суть не меняется.
Давайте приступим к вырезке необходимых нам элементов. Во-первых, посмотрите на шаблон, что же нам надо? Запомните, чем меньше элементов мы вырежем, тем лучше, и не вырезайте то, что можно сделать с помощью css. Например, однотонный фон, рамки и т. д.
Откройте Psd шаблон в фотошопе, не пугайтесь если выйдет сообщение, что некоторые шрифты у Вас отсутствуют. Вы увидите примерно такую картинку.
Для работы нам необходимы следующие рабочие области:
1 – инструменты/tools (Окно -> Инструменты);
2 – непосредственно рабочая область, где наш шаблон;
3 – Слои (f7/Окно -> Слои)
Если Вы видите направляющие линии (синие полоски), то от них можно избавиться нажатием CTRL+H либо Просмотр -> Вспомогательные линии.
Отлично, все готово. Давайте решим, что нам необходимо вырезать.
- Фон. По сути, он белый. Но если Вы присмотритесь, то в шапке сайта заметите сероватый цвет переходящий в белый.
- Логотип. При этом не только зеленную травку, но и само название нам необходимо сохранить как картинку. Почему? Ответ очевиден, если Вы хотите сохранить такой специфичный шрифт и стиль, то картинка Вас спасет. Потому как вряд ли у каждого есть такой шрифт, и отображаться наш логотип будет у всех по-разному, что не есть хорошо.
- 4 картинки в центре. Думаю, тут объяснять не нужно.
- Зеленые кнопки. В центре, после 4-х блоков с картинками есть 2 зеленые кнопки. Вырежем и их. Понимаю, что можно все это сделать и с помощью css, но мы пока проходим азы.
- Сайдбар. Здесь нам необходимо вырезать форму под текстом твиттера и саму птичку.
- Футер. Здесь только 2 социальные иконки.
