Делаем кнопку «Добавить в друзья» для ЖЖ
Как вы, наверное, успели заметить, я занялась кнопками для своего журнала.
Я люблю лаконичность и мультики, поэтому мои кнопки без рамок, фона и т.д. анимаций.
Как сделать кнопку?
Давайте условимся, что у вас стоит Photoshop, и вы выбрали изображение для кнопки.
Обычно, это либо иконки, либо пиктограммы, либо какие-то векторные иллюстрации.
Возьмём самый простой вариант - иконка в формате .png
Открываем её в нашем Фотошопе. Этот формат хорош тем, что открываемое изображение обычно не имеет фона, т.е. при необходимости вы можете его добавить.
При открытии иконка выглядит так:
Далее мы должны куда-то поставить надпись. Я решила, что в данном варианте будет уместно поставить её слева рядом с рукой девушки.
Для этого нам необходимо увеличить холст (не путать с увеличением самого изображения).
Нажмите в верхнем меню Image. В открывшемся списке выбирайте Canvas Size. Откроется такое окно с параметрами.
Следующий рисунок показывает параметры, которые нужно применить. В окошке Anchor точку из центра мы передвигаем вправо, сантиметры из выпадающего меню меняем на проценты, и вместо 100% в ширине (width) меняем значение на 250 и нажимаем ОК.
Должно получится вот так:
Теперь добавим надпись.
На панели инструментов (она находится слева) выбираем значок Т (type), и им рисуем область примерно как на скрине ниже (справа во вкладке Layers вы увидите новый текстовый слой над предыдущим с картинкой):
Теперь сделаем нужную надпись.
В верхней панели вы можете выбрать гарнитуру (шрифт), его кегль (размер), написание жирным или курсивом, отцентрировать её по любому краю или по центру, и обязательно поставьте атрибут Strong - это необходимо для правильного, не размытого отображения надписи в интернете. Сделать всё это можно тут:
Давайте теперь выберем цвет самой надписи. Для этого выделите, как и в обычном документе всю надпись и нажмите на верхний цветной квадратик в панели инструментов. Откроется палитра, где можно вбить уже нужный вам цвет, либо перебирать их, понажимав на самой палитре кнопкой мыши.
Второй способ выбора цвета. Текст всё также выделен, и также открыто окно выбора цвета. Но мы видим, что курсор принял форму пипетки. Это значит что мы можем ткнуть в любое место нашего изображения (например, на волосы или платье девушки) и получить цвет-оттенок с самого изображения. Этот вариант лучше, т.к. цвет в любом случае будет гармонировать с самой иллюстрацией. Для принятия изменении необходимо нажать галочку в верней панели.
Передвигаем нашу надпись в нужное место. Например, так:
Как мы видим, здесь надпись поместилась в изначальном рисунке, поэтому можно было и не увеличивать холст (для других изображений эта манипуляция, скорее всего, все-таки пригодится, поэтому скрины оставлю).
Теперь нужно обрезать всё лишнее. В панели инструментов выберете Crop Tool. И обрежьте ненужное.
Не забудьте нажать сверху галочку, что принять изменения.
Теперь снова обратимся к нашему тексту.
Для интернета его нужно растрировать.
Для этого нажмите правой кнопкой на сам слой с текстом и выберите в отрывшемся меню Rasterize Type. После этой процедуры с текстом ничего нельзя будет сделать, кроме как перемещать.
Теперь посмотрим на размер изображения и поменяем его, скажем на 200 пикселей по ширине.
Для этого нужно зайти в меню Image - Image Size, и в открывшемся окошке в поле ширина (width) поставить 200 пикселей
Теперь давайте сохраним наше изображение.
Для интернета лучше это сделать таким образом:
В верхнем меню нажмите File - Save for Web. Откроется окно, там можно ничего не менять и снова нажимать Save. Далее вам нужно просто выбрать путь куда сохранить изображение.
Скачать данную девушку для экспериментов =)
Получилось так:
Для того, чтобы сделать это изображение кнопкой, загрузите его в ваш альбом в жж и два раза на него нажмите.
Откроется окно
Здесь вы можете уменьшить картинку, но больше нас интересует строка URL страницы
В неё можно добавить ссылку на ваш любой пост, например, или же добавить такую ссылку:
http://www. livejournal.com/friends/add.bml?user=ani_vartanova, где вместо ani_vartanova ставите свой юзернэйм и убрав пробел после www.
Так вы получите кнопку «Добавить в друзья», как у меня ниже.
На этом пока всё. Буду рада комментариям, понятно ли я объясняю.
Решила испробовать на легком, чтобы понять как подавать более сложные уроки в будущем.
Заранее спасибо!
Я люблю лаконичность и мультики, поэтому мои кнопки без рамок, фона и т.д. анимаций.
Как сделать кнопку?
Давайте условимся, что у вас стоит Photoshop, и вы выбрали изображение для кнопки.
Обычно, это либо иконки, либо пиктограммы, либо какие-то векторные иллюстрации.
Возьмём самый простой вариант - иконка в формате .png
Открываем её в нашем Фотошопе. Этот формат хорош тем, что открываемое изображение обычно не имеет фона, т.е. при необходимости вы можете его добавить.
При открытии иконка выглядит так:
Далее мы должны куда-то поставить надпись. Я решила, что в данном варианте будет уместно поставить её слева рядом с рукой девушки.
Для этого нам необходимо увеличить холст (не путать с увеличением самого изображения).
Нажмите в верхнем меню Image. В открывшемся списке выбирайте Canvas Size. Откроется такое окно с параметрами.
Следующий рисунок показывает параметры, которые нужно применить. В окошке Anchor точку из центра мы передвигаем вправо, сантиметры из выпадающего меню меняем на проценты, и вместо 100% в ширине (width) меняем значение на 250 и нажимаем ОК.
Должно получится вот так:
Теперь добавим надпись.
На панели инструментов (она находится слева) выбираем значок Т (type), и им рисуем область примерно как на скрине ниже (справа во вкладке Layers вы увидите новый текстовый слой над предыдущим с картинкой):
Теперь сделаем нужную надпись.
В верхней панели вы можете выбрать гарнитуру (шрифт), его кегль (размер), написание жирным или курсивом, отцентрировать её по любому краю или по центру, и обязательно поставьте атрибут Strong - это необходимо для правильного, не размытого отображения надписи в интернете. Сделать всё это можно тут:
Давайте теперь выберем цвет самой надписи. Для этого выделите, как и в обычном документе всю надпись и нажмите на верхний цветной квадратик в панели инструментов. Откроется палитра, где можно вбить уже нужный вам цвет, либо перебирать их, понажимав на самой палитре кнопкой мыши.
Второй способ выбора цвета. Текст всё также выделен, и также открыто окно выбора цвета. Но мы видим, что курсор принял форму пипетки. Это значит что мы можем ткнуть в любое место нашего изображения (например, на волосы или платье девушки) и получить цвет-оттенок с самого изображения. Этот вариант лучше, т.к. цвет в любом случае будет гармонировать с самой иллюстрацией. Для принятия изменении необходимо нажать галочку в верней панели.
Передвигаем нашу надпись в нужное место. Например, так:
Как мы видим, здесь надпись поместилась в изначальном рисунке, поэтому можно было и не увеличивать холст (для других изображений эта манипуляция, скорее всего, все-таки пригодится, поэтому скрины оставлю).
Теперь нужно обрезать всё лишнее. В панели инструментов выберете Crop Tool. И обрежьте ненужное.
Не забудьте нажать сверху галочку, что принять изменения.
Теперь снова обратимся к нашему тексту.
Для интернета его нужно растрировать.
Для этого нажмите правой кнопкой на сам слой с текстом и выберите в отрывшемся меню Rasterize Type. После этой процедуры с текстом ничего нельзя будет сделать, кроме как перемещать.
Теперь посмотрим на размер изображения и поменяем его, скажем на 200 пикселей по ширине.
Для этого нужно зайти в меню Image - Image Size, и в открывшемся окошке в поле ширина (width) поставить 200 пикселей
Теперь давайте сохраним наше изображение.
Для интернета лучше это сделать таким образом:
В верхнем меню нажмите File - Save for Web. Откроется окно, там можно ничего не менять и снова нажимать Save. Далее вам нужно просто выбрать путь куда сохранить изображение.
Скачать данную девушку для экспериментов =)
Получилось так:
Для того, чтобы сделать это изображение кнопкой, загрузите его в ваш альбом в жж и два раза на него нажмите.
Откроется окно
Здесь вы можете уменьшить картинку, но больше нас интересует строка URL страницы
В неё можно добавить ссылку на ваш любой пост, например, или же добавить такую ссылку:
http://www. livejournal.com/friends/add.bml?user=ani_vartanova, где вместо ani_vartanova ставите свой юзернэйм и убрав пробел после www.
Так вы получите кнопку «Добавить в друзья», как у меня ниже.
На этом пока всё. Буду рада комментариям, понятно ли я объясняю.
Решила испробовать на легком, чтобы понять как подавать более сложные уроки в будущем.
Заранее спасибо!