Мирчар на полочке
    Вход через социальные сети
    E-mail:
    Пароль:
    Воспользуйтесь формой, если у вас не получается войти через uID.
    Администрация Каталога: Tinory (Профиль в Мирчар).
     
    Главная » Статьи » Web-чар

    Рисуем шапку по шаблону

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

    Время собирать камни. Склейка

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

    1. Выясним высоту верхней картинки (5.jpg): Image - Canvas Size: Current Size (Изображение - Размер холста: Текущий размер) - Высота 29 пикселей.

    2. Добавим места для верхнего фрагмента на основной картинке (6.jpg): Image - Canvas Size: New Size (Изображение - Размер холста: Новый размер). Отметим галочку для Relative (Относительно), прижмем изображение к нижнему краю и выставим размер: 29 пикс.


    3. Теперь выделим все изображение (ctrl+A) верхней картинки и вставим в основную. С помощью инструмента Move Tool поставим фрагмент на место - фотошоп поможет нам в этом.

    4. Повторим тоже самое для нижнего фрагмента. Только теперь, когда будем изменять размер холста, прижмем основное изображение (пока еще файл 6.jpg) к верхней границе и увеличим холст на 23 пикселя. Скопируем и вставим на место нижний фрагмент шапки.

    А не пора ли нам сохранить нашу работу? Сохраняем как psd - в собственном формате фотошопа, чтобы потом продолжить работу со слоями. Обзовем наш основной файл head.psd.


    Зафиксируем эти слои, чтобы с ними ничего не случилось - они послужат образцом для новой шапки: на панели Слои (Layers) нажмем для каждого слоя на "замочек" - Lock.

    Рисуем (часть творческая, необязательная)

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

    5. Начнем с фона. Создадим новый слой ("Фон"). Возьмем пипеткой (Eyedropper) цвет с фона образца (#73573f) и зальем им новый слой. Сделаем слой невидимым - пока он нам только мешает.

    Вот, конфуз. Фон оказался не однотонным, а градиентным. Я заметила это уже в процессе установки на сайт. Ничего страшного. Перепишем пятый пункт:

    5-дубль два. Мы уже создали слой "Фон". Выберем инструмент Прямоугольное выделение и выделим короткий фрагмент сверху донизу у самого края рисунка, так чтобы в выделение попал только коричневый фон. В меню Edit выберем пункт Copy Merged (Скопировать совмещенно) и вставим этот фрагмент в слой "Фон". Инструментом Move растянем фрагмент на весь рисунок по горизонтали.

    Если до этого вы плохо дружили с фотошопом, на этом этапе может возникнуть проблема: чтобы растащить фрагмент, нужно видеть маленькие прямоугольные маркеры по краям, а иногда их не видно. Проверьте настройку инструмента под строкой меню: установите галочку Show Transform Controls (Показать элементы трансформации).

    Нарисуем бежевые прямоугольники. 

    6. Возьмем пипеткой цвет прямоугольника. Обратите внимание, что края у него светлее, поэтому цвет нужно брать посредине. Создаем новый слой. Инструментом Прямоугольник с указанными настройками (Fill pixel, Anti-alias снять) обрисовываем прямоугольник образца.


    7. Для эффекта осветленных краев применим к слою эффект внутреннего свечения с настройками согласно скрину:


    Рисуем "сеточку".

    8. Создаем слой "Line1". Оградим рабочую область с помощью инструмента Single Colomn Marquee (Выделение колонки). Возьмем карандаш темно-коричневого цвета и обозначим края линеечки. Промежуток легко залить "банкой".


    Нарисуем всю сетку и продублируем этот слой два раза. Уберем лишнее и для каждого слоя зададим прозрачность заливки по 10-15%. В результате мы получим ступенчатую сеточку, как в оригинале. Чтобы оценить цвет и прозрачность, можно периодически во время работы включать слой "Фон".


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

    9. Продублируем слой с оригинальным нижним фрагментом шапки (это чтобы оригинал остался не тронутым на всякий случай). Обзовем этот слой "Bottom" и передвинем наверх, чтоб было видно после того, как мы включим фон, созданный в п.5.

    Мы видим кусочек чайника, который нам страшно мешает. Давайте от него избавимся, это просто.

    10. Выделим на слое "Bottom" небольшой фрагмент без чайника и тени. С помощью инструмента Move растянем фрагмент, чтобы он перекрыл чайник. Вот и готово. Едем дальше.


    Подготовим основу для картинки, которая ляжет вместо пейзажа.

    9. Новый слой назовем "Picture". Обведем фрагмент с пейзажем инструментом Прямоугольник с такими же настройками, как в п.7, цвет любой.

    10. Слою "Picture" нужна тень, но не простая, а со всех сторон, чего фотошоп просто так не сделает. Продублируем "Picture", назовем новый слой "Shadow" и поместим его ниже "Picture". Перекрасим "Shadow" в черный цвет, воспользовавшись "заливкой".

    11. Применим к слою "Shadow" фильтр Box Blur с радиусом 6 пикселей. Установим прозрачность слоя 50%.


    Нарисуем для "Picture" "сеточку" по п.8 светло-бежевого цвета. Включим видимость слоя "Фон".

    База готова.


    Остальное - дело вкуса и фантазии. Вот, что у нас в итоге получилось.


    Время разбрасывать камни. Разрезаем шапку

    Вы могли выпустить весь предыдущий этап, рисовать все по-своему, но вот к разрезке шапки нужно отнестись очень внимательно.

    12. Поставим направляюшие, которые помогут в точной разрезке картинки: View - New Guide: Horisontal (Вид - Новая направляющая: Горизонтальная) 29 пикс. Как вы помните, высота верхнего фрагмента шапки - 29 пикселей. Вторая направляющая - 250 пикс.: 273 (полная высота шапки) - 23 (высота нижнего фрагмента).

    13. С помощью инструмента простого прямоугольного выделения выделяем верхний фрагмент. Благодаря направляюшей фотошоп точно установит область.

    14. Скопируем фрагмент. Простое копирование нам не подойдет, поскольку картинка многослойная. Нужна команда "Копировать совмещено" (Edit - Copy Merged).

    15. Создадим в фотошопе новый документ (File - New), в появившемся окне выберем в качестве предустановки в раскрывающемся списке Буфер (Preset: Clipboard) - фотошоп установит нужные размеры.

    16. Вставим в новый документ картинку из буфера и сохраним для веб (Save for Web & Devices). Формат jpg, качество высокое (60%). Назовем файл 5.jpg.

    Повторим пп 13-16 для второго фрагмента (6.jpg) и третьего (1.gif). Почему для нижнего фрагмента использовали gif? Вы помните, что этот кусочек должен встроиться в дизайн и совпасть с нижеследующей картинкой пиксель в пиксель? Для этого лучше всего подходит gif.

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


    Рисуем шапку по шаблону
    Web-чар | | 6306 | 2 | 5.0/1 | дизайн
    Еще по теме:
    Всего комментариев: 2
    avatar
    0
    2 aldeberskova • 14:28, 27.10.2016
    Статья очень интересная. Но руки из ж*пы достать не реально особенно мои.Если на бумаге хоть как то могу рисовать и улучшать свои навыки. То сделать элементарные вещи на компе, я уже не в состоянии. Даже то что описано тут. Просматривая работы сделанные на компьютере я удивляюсь и задаюсь единственным вопросом "как так?" я часами смотрела обучающие видео, пробовала сама разбираться но видимо это дано не всем...
    avatar
    0
    1 Мирчаровец sleiter • 20:54, 24.10.2016
    Для меня как чайника в фотошопе тут не хватает картинок для каждого пункта действий, без них трудно понять что именно нужно делать, даже при таком простом объяснении, но с картинками все же было бы проще и понятнее.
    ComForm">
    avatar