Glyph Icons. Introduction
Итак, сегодня начинаю писать разную хрень для "тренинга", про который я писал пару постов назад.
Кому он будет полезен? В первую очередь конечно же дизайнерам. Всем нам нужны маленькие иконки-глифы(я буду их так называть) для разного применения. В одном случае мы просто вставляем их белыми. В другом добавляем цвет. В третьих эффекты-градиенты-текстуры - вуаля, получаем полноценную иконку. В остальные очереди - начинающим людям, которые хотят делал клевые штуки,но у них не хватает навыков.
Итак, для начала сетапим наш фотошоп - ведь именно в нем мы будем работать.Я знаю, как это сделать в фотошопе, я ДУМАЮ, что отличий между ним и тем же иллюстратором немного. Основной навык, который нам нужен будет - любовь к пухелям и любовь к векторным шейпам. Я вас научу и тому и другому :)
Берем фотошоп. Идеальный вариант - это CS3. Потому что CS4 слегка подглючивает, а в CS2 нету увиличения 3200% (очень знаете ли не хватает :/).
Первое, что нам надо сделать - включить "пиксельную" сетку. Пиксельная сетка - это сетка с размером ячейки 1px.Просто! :)
Стиль сетки - Dashed line - лучше видна рабочая зона. Цвет - на ваше усмотрение - у меня средняя градация серого - (128,128,128).
Следующее, что нам надо сделать - забиндить хоткей на создание нового окна.
Лезем сюда:
Изменяем вот тута:
Я поставил себе на Ctrl+*(звездочка на доп. клавиатуре) - очень удобно. Никаких хоткеев не перекрывает.
Делаем мы этого для того, чтобы основное рабочее окно открыть на максимально возможный зум. А рядом открыть еще 2 окна - 100% отображения и 200%. 100 - для того, чтобы видеть как иконка выглядит в настоящем размере и без пиксельной сетки на экране. 200 - когда не видишь на 100 процентах какую-то мелочь, но на 200 она заметна. Мы будем пытатся сделать так, чтобы все было клева и на 100 и на 200% отображения.
Ну и давайте попробуем создать простую иконку. Скажем прямоугольник со скругленными краями и внутри него стрелочку. Просто и легко :)
Будем делать под ифон - как хорошо распростроненную и востребованную платформу.
Создаем файл размером 30х30px.
Увеличиваем до максимума (на сколько хватает экрана). И создаем рядом два окна - на 100 и 200% отображения. Вот так:
Не сложно заметить, что на двух мы пиксельную сетку отключаем, чтобы не мешала обзору.Хоткей - Ctrl+"(Э на русской раскладке).Дальше,включаем привязку к сетке. И включаем, чтобы создаваемый новый шейп был тоже привязан к сетке. Для этого делаем вот так:
и вот так:
Дальше включаем Smart guide.Очень полезная штука - показывает линиями относительно чего возможно ориентирован тот или иной элемент, если стоит Snap, то автоматически выравнивает по этим линиям. Как результат - одно удовольствие работать по целыми пикселям, а не тратить время на постоянные подправления, когда промахиваешся на полпикселя(да-да, с шейпами такое возможно, как результат получаем размытый контур, что не есть хорошо).
Ну вроде таки все настроили - теперь можно наконец создать нашу первую иконку! :)
Выбираем Rounded rectangle.Ставим кривизну углов - 4px(оптимально по-моему для иконок такого размера). Страемся соблюдать это значение при создании следующих иконок из этого же сета.
Ставим курсор в точку (2,2).Начинаем рисовать, а потом зажимаем и держим Shift. Как результат - получаем квадрат со скругленными краями. Да-да, именно для того, чтобы получить "квадратную" форму(круглую, если рисуем окружность) мы и зажимаем shift. Кстати, если зажать Shift с самого начала, а до этого у нас уже был нарисован шейп,то новый добавится к предыдущему и сложится с ним при помощи выбранной логической операции. Но об этом позже.
Получаем вот такую штуку.
Теперь нам надо нарисовать стрелку. Чтобы было интереснее - нарисуем её в вырезанном круге.
Меняем цвет. Например, на красный. Чтобы лучше был виден новый шейп, когда мы его дорисуем.Начинаем рисовать окружность, опять зажимаем шифт, а потом еще и альт. Окружносьт будет рисовать что называется "от центра" - то есть из той точки, где вы начали рисовать окружность. Смотрим чтобы по краям везде оставалось одинаковое число пикселей. В моем случае - это 3.
Дальше нажимаем Shift+A(или 2 раза), чтобы выбрать инструмент Path Selection Tool. При выборе инструмента мы нажимаем Shift+A, чтобы циклично пройтись через все инструменты, которые забиндены на кнопку А. Дальше выбираем слой с нашим красным кругом. Кликаем "черным курсором" по кругу - получаем все точки векторного шейпа выделенными.Нажимаем Ctrl+X(вырезать). На вопрос что хотим удалить выбираем первый пункт(удалить слой).
Дальше выбираем наш "черный квадрат" и нажимаем Ctrl+V. Видим, что векторная маска поменялась.
Теперь применим логические операции к нашим шейпам. В фотошопе эта штука хитрая. Каждый шейм в таком наборе(пока они не склеены) может иметь свою логическую операцию. В нашем случае оба шейпа сейчас имеют свойство "Add". Нам надо поменять свойство у нашего круга на Subtract(исключить).Снова нажимаем Shift+A чтобы выбрать Path Selection Tool(чисто чтобы убедится, что все в порядке). И выбираем наш круг. Убедитесь, что выбран именно круг - выделены его узловые точки. И нажимаем Subtract на верхней панели. Вот так.
Вуаля, получили круглый вырез в нашем шейпе. Чтобы убедится, что это именно вырез, а не заливка белым - можете залить Background слой любым цветом. Вы его увидите в вырезе.
Теперь будем создавать стрелку. Чтобы стрелка у нас получилась хорошая, нам надо, чтобы толщина основания стрелки была равна четному числу пикселей. Например 6. Хорошая такая толстая стрелка.
Выбираем инструмент Recntagle Tool. Если он у вас не выбран - нажимаем и держим на вот этой иконке и выбираем первый пункт.
Создаем красный прямоугольник.
Теперь создаем наконечник для него. Выбираем Pen Tool:
Начинаем потиху рисовать наконечник. Отсчитываем 3 пикселя от нашего прямоугольника и рисуем наконечник.
Как-то так. Затем выбираем Path Selection Tool(Shift+A или просто А).
Ctrl+X.Ok.Выбираем наш прямоугольник. Ctrl+V.Теперь выбираем прямоугольник И наконечник. Для этого кликаем сначала на прямоугольнике. Потом зажимаем Shift и кликаем на наконечнике. Ctrlx+X.Ок в попапе.Выбираем наш квадрат с вырезом. Ctrl+V. Новоприбывшему слою автоматически присваивается операция Add.Что нам и надо.
Поздравляю! Мы с вами только что создали векторную иконку, которую можно после нанесения на неё градинета использовать в iPhone.
Вопросы/предложения/пожелания счастья? :)
P.s. Уже когда все это написал,то заметил, что чутка промазал и сделал стрелку по высоте 5 пикселей. Не допускайте этого у себя - всегда проверяйте красоту :)
P.p.s. Капец сколько писать ради одной маленькой иконки ^__^
Кому он будет полезен? В первую очередь конечно же дизайнерам. Всем нам нужны маленькие иконки-глифы(я буду их так называть) для разного применения. В одном случае мы просто вставляем их белыми. В другом добавляем цвет. В третьих эффекты-градиенты-текстуры - вуаля, получаем полноценную иконку. В остальные очереди - начинающим людям, которые хотят делал клевые штуки,но у них не хватает навыков.
Итак, для начала сетапим наш фотошоп - ведь именно в нем мы будем работать.Я знаю, как это сделать в фотошопе, я ДУМАЮ, что отличий между ним и тем же иллюстратором немного. Основной навык, который нам нужен будет - любовь к пухелям и любовь к векторным шейпам. Я вас научу и тому и другому :)
Берем фотошоп. Идеальный вариант - это CS3. Потому что CS4 слегка подглючивает, а в CS2 нету увиличения 3200% (очень знаете ли не хватает :/).
Первое, что нам надо сделать - включить "пиксельную" сетку. Пиксельная сетка - это сетка с размером ячейки 1px.Просто! :)
Стиль сетки - Dashed line - лучше видна рабочая зона. Цвет - на ваше усмотрение - у меня средняя градация серого - (128,128,128).
Следующее, что нам надо сделать - забиндить хоткей на создание нового окна.
Лезем сюда:
Изменяем вот тута:
Я поставил себе на Ctrl+*(звездочка на доп. клавиатуре) - очень удобно. Никаких хоткеев не перекрывает.
Делаем мы этого для того, чтобы основное рабочее окно открыть на максимально возможный зум. А рядом открыть еще 2 окна - 100% отображения и 200%. 100 - для того, чтобы видеть как иконка выглядит в настоящем размере и без пиксельной сетки на экране. 200 - когда не видишь на 100 процентах какую-то мелочь, но на 200 она заметна. Мы будем пытатся сделать так, чтобы все было клева и на 100 и на 200% отображения.
Ну и давайте попробуем создать простую иконку. Скажем прямоугольник со скругленными краями и внутри него стрелочку. Просто и легко :)
Будем делать под ифон - как хорошо распростроненную и востребованную платформу.
Создаем файл размером 30х30px.
Увеличиваем до максимума (на сколько хватает экрана). И создаем рядом два окна - на 100 и 200% отображения. Вот так:
Не сложно заметить, что на двух мы пиксельную сетку отключаем, чтобы не мешала обзору.Хоткей - Ctrl+"(Э на русской раскладке).Дальше,включаем привязку к сетке. И включаем, чтобы создаваемый новый шейп был тоже привязан к сетке. Для этого делаем вот так:
и вот так:
Дальше включаем Smart guide.Очень полезная штука - показывает линиями относительно чего возможно ориентирован тот или иной элемент, если стоит Snap, то автоматически выравнивает по этим линиям. Как результат - одно удовольствие работать по целыми пикселям, а не тратить время на постоянные подправления, когда промахиваешся на полпикселя(да-да, с шейпами такое возможно, как результат получаем размытый контур, что не есть хорошо).
Ну вроде таки все настроили - теперь можно наконец создать нашу первую иконку! :)
Выбираем Rounded rectangle.Ставим кривизну углов - 4px(оптимально по-моему для иконок такого размера). Страемся соблюдать это значение при создании следующих иконок из этого же сета.
Ставим курсор в точку (2,2).Начинаем рисовать, а потом зажимаем и держим Shift. Как результат - получаем квадрат со скругленными краями. Да-да, именно для того, чтобы получить "квадратную" форму(круглую, если рисуем окружность) мы и зажимаем shift. Кстати, если зажать Shift с самого начала, а до этого у нас уже был нарисован шейп,то новый добавится к предыдущему и сложится с ним при помощи выбранной логической операции. Но об этом позже.
Получаем вот такую штуку.
Теперь нам надо нарисовать стрелку. Чтобы было интереснее - нарисуем её в вырезанном круге.
Меняем цвет. Например, на красный. Чтобы лучше был виден новый шейп, когда мы его дорисуем.Начинаем рисовать окружность, опять зажимаем шифт, а потом еще и альт. Окружносьт будет рисовать что называется "от центра" - то есть из той точки, где вы начали рисовать окружность. Смотрим чтобы по краям везде оставалось одинаковое число пикселей. В моем случае - это 3.
Дальше нажимаем Shift+A(или 2 раза), чтобы выбрать инструмент Path Selection Tool. При выборе инструмента мы нажимаем Shift+A, чтобы циклично пройтись через все инструменты, которые забиндены на кнопку А. Дальше выбираем слой с нашим красным кругом. Кликаем "черным курсором" по кругу - получаем все точки векторного шейпа выделенными.Нажимаем Ctrl+X(вырезать). На вопрос что хотим удалить выбираем первый пункт(удалить слой).
Дальше выбираем наш "черный квадрат" и нажимаем Ctrl+V. Видим, что векторная маска поменялась.
Теперь применим логические операции к нашим шейпам. В фотошопе эта штука хитрая. Каждый шейм в таком наборе(пока они не склеены) может иметь свою логическую операцию. В нашем случае оба шейпа сейчас имеют свойство "Add". Нам надо поменять свойство у нашего круга на Subtract(исключить).Снова нажимаем Shift+A чтобы выбрать Path Selection Tool(чисто чтобы убедится, что все в порядке). И выбираем наш круг. Убедитесь, что выбран именно круг - выделены его узловые точки. И нажимаем Subtract на верхней панели. Вот так.
Вуаля, получили круглый вырез в нашем шейпе. Чтобы убедится, что это именно вырез, а не заливка белым - можете залить Background слой любым цветом. Вы его увидите в вырезе.
Теперь будем создавать стрелку. Чтобы стрелка у нас получилась хорошая, нам надо, чтобы толщина основания стрелки была равна четному числу пикселей. Например 6. Хорошая такая толстая стрелка.
Выбираем инструмент Recntagle Tool. Если он у вас не выбран - нажимаем и держим на вот этой иконке и выбираем первый пункт.
Создаем красный прямоугольник.
Теперь создаем наконечник для него. Выбираем Pen Tool:
Начинаем потиху рисовать наконечник. Отсчитываем 3 пикселя от нашего прямоугольника и рисуем наконечник.
Как-то так. Затем выбираем Path Selection Tool(Shift+A или просто А).
Ctrl+X.Ok.Выбираем наш прямоугольник. Ctrl+V.Теперь выбираем прямоугольник И наконечник. Для этого кликаем сначала на прямоугольнике. Потом зажимаем Shift и кликаем на наконечнике. Ctrlx+X.Ок в попапе.Выбираем наш квадрат с вырезом. Ctrl+V. Новоприбывшему слою автоматически присваивается операция Add.Что нам и надо.
Поздравляю! Мы с вами только что создали векторную иконку, которую можно после нанесения на неё градинета использовать в iPhone.
Вопросы/предложения/пожелания счастья? :)
P.s. Уже когда все это написал,то заметил, что чутка промазал и сделал стрелку по высоте 5 пикселей. Не допускайте этого у себя - всегда проверяйте красоту :)
P.p.s. Капец сколько писать ради одной маленькой иконки ^__^