Show Posts
16
Обложки / Skins / Re: Помощь по созданию эффектов в графических редакторах!
« on: January 09, 2010, 17:36:24 »
мы рассмотрим способ создания простой панели в виде прямоугольника непрозрачного чёрного стекла, и кнопок на ней, находящихся в небольшом углублении.
начнём.
для начала я создал новый документ размером 512х512. этот размер не принципиален, главное, чтобы вам было комфортно умещать в нём то, что вы будете рисовать. фон я залил серым цветом 393939, чтомы белый фон не затенял то, что мы будем рисовать.
1. рисуем чёрную панель.
рисуем чёрный прямоугольник со скруглёнными краями. для этого жмём U, выбираем скруглённый прямоугольник и устанавливаем радиус скругления в 3 (или больше) пикселя.
устанавливаем в качестве основного цвета (тот цвет, которым рисует кисть) белый. для этого можно нажать D, затем X. заходим в layer style нашего прямоугольника. в настройках gradient overlay выбираем белый градиент с прозрачностью. он белый именно потому, что основным цветом был выбран белый цвет.
устанавливаем scale в 150%, и opacity в 25%. если градиент снизу-вверх, ставим флаг reverse. остальные настройки не трогаем, и идём на вкладку inner shadow. opacity ставим 50%, size - 0, angle - -90, а distance подбираем так, чтобы тень заканчивалась посередине нашей панельки. теперь добавляем обводку в 1 пиксель на вкладке stroke. opacity ставим 50%.
оперируя всего тремя эффектами, мы изобразили стеклянную панель, на которой будут находиться наши кнопки. попробуйте только не согласиться, что это было несложно.
2. рисуем кнопки.
в принципе, мы могли бы изобразить все кнопки тем же способом, что и нашу панель, но в данном уроке вы так просто не отвертитесь. мы сделаем более сложные в плане отрисовки круглые стеклянные кнопки, и углубление в панели, в котором они будут утоплены.
для начала рисуем небольшой круг. для этого снова жмём U, выбираем круг, и с зажатым shift изображаем его в новом слое. я взял цвет 181818.
снова ставим основным белый цвет, и заходим в layer style. здесь нам нужен всё тот же gradient overlay. на этот раз в поле style выставляем reflected, и если градиент идёт из центра к краям, ставим флажок reverse. opacity у нас будет 25%, остальное не трогаем. добавляем чёрную обводку в 1 пиксель, с прозрачностью 50%, и закрываем layer style.
теперь самое зобавное: выделяем наш кружок в палитре слоёв, и жмём ctrl+j. у нас получилось два одинаковых слоя, один над другим. заходим в контекстное меню копии слоя, и жмём clear layer style. открываем его layer style, и в blending options - fill opacity ставим на 0. визуально слой должен исчезнуть, но не исчезнет его великое дело. идём в inner shadow, в качестве цвета тени берём белый, blend mode ставим normal, opacity 25%, angle 90, distance и size нам придётся подбирать в зависимости от размеров нашего круга самим, но чуть позже. сейчас закрываем свойства.
вам непонятно, зачем мы создавали для этих эффектов новый слой, когда могли сделать те же настройки в исходном? сейчас вы всё поймёте, но будет уже поздно.
жмём ctrl+t, выбрав копию исходного круга. сжимаем его снизу-вверх примерно на треть, точность не нужна.
кликаем правой кнопкой по трансформируемому слою, выбираем perspective, и сжимаем его снизу, чтобы края слоя полностью оказались внутри краёв нижнего слоя.
это ещё не всё. теперь снова кликаем правой кнопкой по слою, и выбираем режим трансформации warp. втягиваем нижнюю сторону четырёхугольника немного внутрь. всё должно оставаться симметричным.
применяем трансформацию, нажав enter. теперь самое время снова зайти в настройки тени, которые мы оставили. подбираем distance и size так, чтобы она более всего походила на градиент. эмпирическим путём приходим к чему-то похожему на изображенное на скриншоте ниже. в своём случае я использовал значения distance - 7 и size - 9.
кнопка готова. теперь нужно объединить составляющие её слои в группу. выделяем оба слоя, и жмём ctrl+g. выделяем группу в палитре слоёв, и нажав V, размещаем кнопку поверх нашей панели. чтобы сделать ещё несколько подобных кнопок, просто нажимаем V, а затем с нажатым alt перетаскиваем группу, тем самым копируя её. первая кнопка будет у нас кнопкой плей. давайте сделаем остальные кнопки.
для этого, скопировав группу, нажимаем ctrl+t. трансформация группы сохранит пропорции и позиции слоёв в группе относительно друг друга. уменьшите вторую кнопку на 20% отностельно предыдущей, и скопируйте её несклько раз. четвёртую кнопку я уменьшил ещё на 30%. допустим, это будет кнопка самоуничтожения аимпа.
наши кнопки выглядят довольно неплохо, но на этом останавливаться рано. мы хотели поместить их в углубление, и отступать уже поздно.
выделяем все наши группы (это делается также, как выделение файлов в проводнике), и в контекстном меню жмём duplicate layers. в появившемся диалоге жмём ok, ничего не меняя. все копии групп выделены (если нет - выделите их), теперь жмём ctrl+e. мы объединили все группы, превратив их в один слой без эффектов наложения. перемещаем этот слой в палитре слоёв сразу после чёрной панели, и открываем layer style.выставляем размах stroke по своему вкусу. цвет должен быть чёрным, а прозрачность отсутствовать.
создайте новый пустой слой (ctrl+shift+n), выделите его и наш слой из групп, и снова нажмите ctrl+e. теперь мы снова имеем слой без всяких эффектов, но обводка никуда не делась. идём в свойства этого слоя, и открываем многострадальный gradient overlay. снова выбираем белый градиент с прозрачностью (что делать, если его нет в списке, вы уже знаете). на этот раз нам нужно как раз чтобы градиент был снизу-вверх, поэтому флажок reverse не ставим. прозрачность устанавливаем 15%, и любуемся достигнутым эффектом:
начало положено. на панель можно добавить экраны и кнопки сделанные тем же способом, что и сама панель - скажем, кнопки управления окном, открытия плейлиста и эквалайзера. всё упирается только в вашу фантазию)
в аттаче .psd, с которой я работал, делая туториал.
начнём.
для начала я создал новый документ размером 512х512. этот размер не принципиален, главное, чтобы вам было комфортно умещать в нём то, что вы будете рисовать. фон я залил серым цветом 393939, чтомы белый фон не затенял то, что мы будем рисовать.
1. рисуем чёрную панель.
рисуем чёрный прямоугольник со скруглёнными краями. для этого жмём U, выбираем скруглённый прямоугольник и устанавливаем радиус скругления в 3 (или больше) пикселя.
устанавливаем в качестве основного цвета (тот цвет, которым рисует кисть) белый. для этого можно нажать D, затем X. заходим в layer style нашего прямоугольника. в настройках gradient overlay выбираем белый градиент с прозрачностью. он белый именно потому, что основным цветом был выбран белый цвет.
устанавливаем scale в 150%, и opacity в 25%. если градиент снизу-вверх, ставим флаг reverse. остальные настройки не трогаем, и идём на вкладку inner shadow. opacity ставим 50%, size - 0, angle - -90, а distance подбираем так, чтобы тень заканчивалась посередине нашей панельки. теперь добавляем обводку в 1 пиксель на вкладке stroke. opacity ставим 50%.
оперируя всего тремя эффектами, мы изобразили стеклянную панель, на которой будут находиться наши кнопки. попробуйте только не согласиться, что это было несложно.
2. рисуем кнопки.
в принципе, мы могли бы изобразить все кнопки тем же способом, что и нашу панель, но в данном уроке вы так просто не отвертитесь. мы сделаем более сложные в плане отрисовки круглые стеклянные кнопки, и углубление в панели, в котором они будут утоплены.
для начала рисуем небольшой круг. для этого снова жмём U, выбираем круг, и с зажатым shift изображаем его в новом слое. я взял цвет 181818.
снова ставим основным белый цвет, и заходим в layer style. здесь нам нужен всё тот же gradient overlay. на этот раз в поле style выставляем reflected, и если градиент идёт из центра к краям, ставим флажок reverse. opacity у нас будет 25%, остальное не трогаем. добавляем чёрную обводку в 1 пиксель, с прозрачностью 50%, и закрываем layer style.
теперь самое зобавное: выделяем наш кружок в палитре слоёв, и жмём ctrl+j. у нас получилось два одинаковых слоя, один над другим. заходим в контекстное меню копии слоя, и жмём clear layer style. открываем его layer style, и в blending options - fill opacity ставим на 0. визуально слой должен исчезнуть, но не исчезнет его великое дело. идём в inner shadow, в качестве цвета тени берём белый, blend mode ставим normal, opacity 25%, angle 90, distance и size нам придётся подбирать в зависимости от размеров нашего круга самим, но чуть позже. сейчас закрываем свойства.
вам непонятно, зачем мы создавали для этих эффектов новый слой, когда могли сделать те же настройки в исходном? сейчас вы всё поймёте, но будет уже поздно.
жмём ctrl+t, выбрав копию исходного круга. сжимаем его снизу-вверх примерно на треть, точность не нужна.
кликаем правой кнопкой по трансформируемому слою, выбираем perspective, и сжимаем его снизу, чтобы края слоя полностью оказались внутри краёв нижнего слоя.
это ещё не всё. теперь снова кликаем правой кнопкой по слою, и выбираем режим трансформации warp. втягиваем нижнюю сторону четырёхугольника немного внутрь. всё должно оставаться симметричным.
применяем трансформацию, нажав enter. теперь самое время снова зайти в настройки тени, которые мы оставили. подбираем distance и size так, чтобы она более всего походила на градиент. эмпирическим путём приходим к чему-то похожему на изображенное на скриншоте ниже. в своём случае я использовал значения distance - 7 и size - 9.
кнопка готова. теперь нужно объединить составляющие её слои в группу. выделяем оба слоя, и жмём ctrl+g. выделяем группу в палитре слоёв, и нажав V, размещаем кнопку поверх нашей панели. чтобы сделать ещё несколько подобных кнопок, просто нажимаем V, а затем с нажатым alt перетаскиваем группу, тем самым копируя её. первая кнопка будет у нас кнопкой плей. давайте сделаем остальные кнопки.
для этого, скопировав группу, нажимаем ctrl+t. трансформация группы сохранит пропорции и позиции слоёв в группе относительно друг друга. уменьшите вторую кнопку на 20% отностельно предыдущей, и скопируйте её несклько раз. четвёртую кнопку я уменьшил ещё на 30%. допустим, это будет кнопка самоуничтожения аимпа.
наши кнопки выглядят довольно неплохо, но на этом останавливаться рано. мы хотели поместить их в углубление, и отступать уже поздно.
выделяем все наши группы (это делается также, как выделение файлов в проводнике), и в контекстном меню жмём duplicate layers. в появившемся диалоге жмём ok, ничего не меняя. все копии групп выделены (если нет - выделите их), теперь жмём ctrl+e. мы объединили все группы, превратив их в один слой без эффектов наложения. перемещаем этот слой в палитре слоёв сразу после чёрной панели, и открываем layer style.выставляем размах stroke по своему вкусу. цвет должен быть чёрным, а прозрачность отсутствовать.
создайте новый пустой слой (ctrl+shift+n), выделите его и наш слой из групп, и снова нажмите ctrl+e. теперь мы снова имеем слой без всяких эффектов, но обводка никуда не делась. идём в свойства этого слоя, и открываем многострадальный gradient overlay. снова выбираем белый градиент с прозрачностью (что делать, если его нет в списке, вы уже знаете). на этот раз нам нужно как раз чтобы градиент был снизу-вверх, поэтому флажок reverse не ставим. прозрачность устанавливаем 15%, и любуемся достигнутым эффектом:
начало положено. на панель можно добавить экраны и кнопки сделанные тем же способом, что и сама панель - скажем, кнопки управления окном, открытия плейлиста и эквалайзера. всё упирается только в вашу фантазию)
в аттаче .psd, с которой я работал, делая туториал.
