Веб-дизайн. Стеклянные кнопки, иконки, аватары.

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

Сначала хочу поблагодарить всех вас за ваши отзывы, вопросы и коментарии. Вы помагаете жить и развиваться нашему сайта. Я не могу отвечать в комментариях на все ваши Спасибы и поэтому решил сказать здесь. СПАСИБО всем кто учавствует в жизни сайта и всем кто еще придет к нам!)

Итак приступим к нашему уроку. Я буду создавать просто кнопку с надписью.

Шаг 1.

Создаем новый документ нужного вам размера. У меня размер документа 300Х300. Выбираем в меню File>New(Файл>Новый) или нажимаем Ctrl+N и в появившемся окошке поставим нужные вам размеры Width(Ширина) и Height (Высота).

but_1.jpg

Шаг 2.

Выберем фон для нашего документа. Здесь уже на ваше усмотрение… кому какой цвет нравится)

but_2.jpg

Шаг 3.

Выберем нужную форму будущей кнопки. Я выбрал прямоугольник с скругленными углами. Выбираем инструмент Rounded Rectangle Tool (Скругленный прямоугольник). И задаем в панели опций радиус скругления углов Radius(Радиус) равный 10.

but_3.jpg

Шаг 4.

Рисуем наш прямоугольник нужного размера.

but_4.jpg

Шаг 5.

Выберем цвет для нашей кнопки. Дважды кликните по только что созданному слою и в появившемся окне выставьте следующие параметры.

but_5.jpg

Шаг 6.

Создадим белый кант вокруг прямоугольника. Для этого создаем новый слой Ctrl+Shift+N. Удерживая клавишу Ctrl нажимам по пиктограммке слоя, созданного в 4 шаге. Тем самым получим выделение. Затем в меню выберите Edit>Stroke (Редактирование>Выполнить обводку). В появившемся окошке выберите цвет обводки, толщину в 1px и нажмите ОК.

but_6.jpg

Шаг 7.

Сделаем блик. Создаем новый слой. Если вы убрали выделение, то верните его обратно как написано в предыдущем шаге. Затем выбираем инструмент Elliptical Marquee Tool (Овальная область) и удерживая клавиши Alt+Shift рисуем сверху нашего выделения овал как показано на рисунке.

but_7.jpg

В результате у вас должно получится вот такое выделение.

but_8.jpg

Теперь берем инструмент Gradient Tool (Градиент). Нажимаем клавишу D, чтобы сбросить основной и вспомогательный цвета на черный и белый, затем клавишу X, чтобы поменять эти цвета местами. В результате у вас в панели инструментов основным цветом должен быть белый. Выбираем в панели опций тип градиента от белого к прозрачному.

but_9.jpg

И протянем градиент с верху вниз.

but_10.jpg

Шаг 8.

Стерем немного в нижних углах нашу белую обводку для того чтобы придать эффект внутреннего свечения. Для этого выберите инструмент Eraser Tool (Ластик), потом выберите слой с вашей обводкой. Убедитесь что жесткость кисти стоит на минимуме, т.е. ластик должен стирать плавно. Для этого нажмите правой кнопка в любом месте вашего документа у становите Hardness (Жесткость) на минимум.

but_11.jpg

Немного стерли и должны получить примерно такой результат.

but_12.jpg

Шаг 9.

Вот в принципе наше стеклышко и готово. Теперь добавим на нее текст, чтобы сделать из него кнопку. Выберите инструмент Horizontal Type Tool(Горизонтальный текст) выделите область в которой будете писать и напишите что-нибудь на вашей кнопке. Цвет, шрифт, размер и другие настройки текста вы можете изменить в панели опции.

but_13.jpg

Шаг 10.

Придадим тексту немного свечения. Кликнем по слою с текстом дважды и в появившемся окне Layer Style (Стиль слоя ) выставим следующие параметры.

but_14.jpg

Вот и все. Вот что у нас получилось

final_1.jpg

А после некоторых действий вы можеть вот так украсить ваш аватар.

final_1_0.jpg

Для этого сделайте фон чуть светлее, чтобы были видны тени. Для этого выберите нужный цвет, затем самый нижний слой с ваши фоном и нажмите Alt+Del, чтобы выполнить заливку фона нужным цветом. Затем поместите свое изображение между слоем с фигурой нашего стекла и слоем с белой обводкой. Обрежьте углы вставленного изображения. Затем дважды кликните по слою с нашей фигурой, которую создавали в шаге 4. И в появившемся окне установите следующие параметры.

but_15.jpg

Затем выберите все слои кроме фона. Сначала выберите первый слой, затем нажмите клавишу Shift и выберите последний слой. Затем скопируйте эти слои путем перетаскивания на кнопку Create a new layer (Создать новый слой) и нажмите Ctrl+E чтобы склеить их в один слой.

but_16.jpg

Выберите в меню Edit>Transform>Flip Vertical (Редактировани>Транформация>Отразить по вертикали) и перетащите этот слой так чтоб он оказался под нашим первым результатом. Выберите инструмент Move Tool (Перемещение) и просто перетяните его в нужное место.

but_17.jpg

Осталось только добавить маску слоя и сделать отражение более реалистичным. Чтобы создать маску слоя нажмем на кнопочку Add Vector Mask (Добавить векторную маску) внизу палитры слоев Layers (Слои).

but_18.jpg

Теперь берем инструмент Gradient Tool (Градиент). Нажимаем клавишу D, чтобы сбросить основной и вспомогательный цвета на белый и черный, затем клавишу X, чтобы поменять эти цвета местами. В результате у вас в панели инструментов основным цветом должен быть черный. Выбираем в панели опций тип градиента от черного к прозрачному. И протягиваем градиаент снизу вверх. Только убедитесь что выбрана именно маска слоя, а не сам слой.

but_19.jpg

Надеюсь вам понравилось и пригодится)

final_1_0.jpgfinal_1.jpg

Комментарии
Пользователь: samitnyk 29.01.2010 16:19
Аватар пользователя samitnyk

Спасибо за урок и за оперативность его разработки.Мне очень понравилось.

Пользователь: vt vt 30.01.2010 21:05
Аватар пользователя vt vt

Здравствуйте! У меня в шаге 6 ( Удерживая клавишу Ctrl нажимам по пиктограммке только что созданного слоя.) пишет - Внимание: небыло выделено не одного пикселя ((((

Пользователь: vt vt 30.01.2010 21:28
Аватар пользователя vt vt

ой, похоже разобралась)))))))

Пользователь: vt vt 30.01.2010 22:25
Аватар пользователя vt vt

Ура, у меня все в общем то получилось. Спасибочки. Вот только фото которое я поставила не цветное, а черно-белое почему то. И ластиком не получилось стереть закругления (уголки) (((( Что я сделала не так, подскажите.

Пользователь: mrkaktooz 31.01.2010 00:17
Аватар пользователя mrkaktooz

если фото получается не цветное, то в самом начале выберите Image>Mode>RGB(Изображение>Режим>RGB). При стирании ластиком выдает ли фотошоп какое-нибудь сообщение?

Пользователь: Екатерина 08.03.2015 20:49
Аватар пользователя Екатерина

Стесняюсь спросить, а если мне надо сделать из нескольких картинок аватар?...а далее еще множество картинок сделать в одном стиле с аватаром, как мне быть? Какие уроки смотреть?

Пользователь: Serg 31.01.2010 11:14
Аватар пользователя Serg

У меня CS4 русский. В 6 шаге никакого выделения не получается. В "Редактировании" нет никакой "Обводки". Дальше и смотреть не стал.
В общем, не морочьте людям голову. Не стоит выставлять на всеобщее обозрение такие "шедевры".

Пользователь: mrkaktooz 31.01.2010 12:11
Аватар пользователя mrkaktooz

Исправил шаг 6. Вместо пункта меню "Обводка" должен быть "Выполнить обводку). А на счет "шедевра"... мы делаем то, что просят наши посетители)

Пользователь: Гость 23.02.2010 06:28
Аватар пользователя Гость

если ты болван слеповат то незрен других винить

Пользователь: Serg 31.01.2010 13:16
Аватар пользователя Serg

Да кнопка то просто отличная!!! Под "шедевром" я подразумевал сам урок.
А обводку не могу сделать, пишет что нечего обводить.
Если честно, то меня уже колбасит от вашего урока. Пойду к другим, может получше учителя попадутся.

Пользователь: mrkaktooz 31.01.2010 22:34
Аватар пользователя mrkaktooz

если чтото непонятно, то я всегда помагаю... Урок пишется и проверяется на практике... так что если у кого-то что-то не получается, то чаще всего из-за невнимательности. Если вы рассчитываете изучить фотошоп за 10 минут и без трудностей, то хочу вас огорчить... это невозможно!!!

Пользователь: IMHO 01.02.2010 21:54
Аватар пользователя IMHO

да. все бяки. только ты хороший. уссаццца. ;)

Пользователь: vt vt 01.02.2010 11:02
Аватар пользователя vt vt

При стирании ластиком нет ни каких сообщений

Пользователь: mrkaktooz 01.02.2010 11:23
Аватар пользователя mrkaktooz

Я вроде ни про какие сообщения при стирании ластиком не писал).. Если имеете ввиду панель с настройками кисти ластика, то чтобы она появилась нужно кликнуть именно в области самого документа.

Пользователь: vt vt 01.02.2010 12:15
Аватар пользователя vt vt

в 6 шаге у меня тоже была проблемма (может быть у Вас немного не понятно написано, а может я не совсем так поняла, возможно по этому и ластик у меня потом не срабатывает), у меня пишет-внимание не было выделено ни одного пикселя, а дальше (Редактирование>Выполнить обводку)- пишет нечего обводить. Тогда я все начинала сначала (незнаю правильно я сделала или нет) , вобщем " Удерживая клавишу Ctrl нажимам по пиктограммке только что созданного слоя."- я нажимала на пиктограмму ниже где написано "фигура 1" миниатюра векторной маски. Ну а дальше все как у Вас, вроде бы все получилось. И еще я не знаю как обрезать уголки фото.

Пользователь: vt vt 01.02.2010 12:24
Аватар пользователя vt vt

))))) С цветным фото разобралась, спасибо, а при стирании ластиком, у меня не стираются уголки как у Вас, фотошоп никаких сообщений не выдает (нет, я имела ввиду не панель с настройками кисти)

Пользователь: mrkaktooz 01.02.2010 12:43
Аватар пользователя mrkaktooz

убедитесь, что работаете с нужным слоем и проверьте настройки кисти ластика в панели опций Opacity (Непрозрачность) и Flow (Нажим). Эти значения не должны быть очень маленькими. И попробуйте перед тем как стирать нажать Ctrl+D если у вас вдруг осталось выделение

Пользователь: vt vt 01.02.2010 13:27
Аватар пользователя vt vt

воооот, теперь все с ластиком получилось, )))))) спасибочки огромное. а как обрезать фото, что бы углы фото не выходили за круглые края кнопки

Пользователь: mrkaktooz 01.02.2010 14:09
Аватар пользователя mrkaktooz

выберите слой, который нужно обрезать. Удерживая Ctrl кликаете на фигуре вашей кнопки (так же как делали с контуром), чтобы получить выделение. Затем нажимаете Ctrl+Shift+I чтобы интвертировать выделение и Del, чтобы удалить ненужные места.

Пользователь: smile 01.02.2010 13:30
Аватар пользователя smile

А после некоторых действий вы можеть вот так украсить ваш аватар.
Для этого сделайте фон чуть светлее, чтобы были видны тени. Для этого выберите нужный цвет, затем самый нижний слой с ваши фоном и нажмите Alt+Del, чтобы выполнить заливку фона нужным цветом. Затем поместите свое изображение между слоем с фигурой нашего стекла и слоем с белой обводкой. Обрежьте углы вставленного изображения. Затем дважды кликните по слою с нашей фигурой, которую создавали в шаге 4. И в появившемся окне установите следующие параметры.

Объясните мне как поместить изображение? не получается что-то

Пользователь: mrkaktooz 01.02.2010 14:06
Аватар пользователя mrkaktooz

выберите в меню File>Place(Файл>Поместить), затем выберите нужный файл и нажмите Ок. Осталось только подогнать вставленное изображение по размеру)

Пользователь: vt vt 01.02.2010 21:27
Аватар пользователя vt vt

спасибочки, получилось. СПС за Ваш сайт и Ваши уроки)))))))

Пользователь: vt vt 05.02.2010 23:58
Аватар пользователя vt vt

Здравствуйте. Хотела попробовать сделать надпись и что бы она тоже немного отражалась ( как у Вас на сером фоне) так ничего и не получилось(((( подскажите как?

Пользователь: mrkaktooz 06.02.2010 12:36
Аватар пользователя mrkaktooz

Отражение надписи делается так же как и отражение самой кнопки/аватарки.

Пользователь: vt vt 06.02.2010 21:03
Аватар пользователя vt vt

Спасибо, разобралась))))

Пользователь: Dr.Cherkasov 06.02.2010 00:59
Аватар пользователя Dr.Cherkasov

Подскажите я вот сделал все правильно все получилось спасибо за урок)))
тока вот как сохранить картинку чтоб можно было выставлять на аватарки??

Пользователь: mrkaktooz 06.02.2010 12:41
Аватар пользователя mrkaktooz

Выберите в меню File>Save(Файл>Сохранить) или File>Save As (Файл>Сохранить как). В появившемся окошке внизу выберите тип файла JPG, имя файла любое можно, но желательно латинскими буквами (если собираетесь вылаживать файл в интернете). Жмете кнопку Сохранить. Появится еще одно окошко, в котором вы можете настроить качество сохраняемой картинки. выберите нужно качество (от 8 до 10 обычно) и нажмите кнопку ОК. Все ваш файл сохранен и готов к применению)

Пользователь: Dr.Cherkasov 06.02.2010 16:05
Аватар пользователя Dr.Cherkasov

Спасибо огромное)))
Ты так все объясняешь хорошо, СПАСИБО тебе)))

Пользователь: Sergey 16.02.2010 13:25
Аватар пользователя Sergey

У меня цвет не получается выбрать,делаю синий ничего не происходит(,что не так?

Пользователь: mrkaktooz 16.02.2010 13:45
Аватар пользователя mrkaktooz

В каком именно шаге?

Пользователь: Гость 23.02.2010 06:26
Аватар пользователя Гость

В шаге семь не иогу выделить так как это написано нажимаю ctrl+shift начинаю выделять и начинается какое то прямо угольное выделение причем после выделения нет ни одного следа что я что то выделял у меня ps cs4

Пользователь: mrkaktooz 23.02.2010 09:23
Аватар пользователя mrkaktooz

Я извиняюсь! по моему я ошибся в сочетании клавиш(( вместо Ctrl+Shift попробуйте Alt+Shift.

Пользователь: Гость 24.02.2010 23:38
Аватар пользователя Гость

капец, шаг 6. не выделено ни одного пиксела. не могу втыкнуть!!! помогите

Пользователь: Гость 24.02.2010 23:45
Аватар пользователя Гость

зажимаю ctrl новый слой и в эдит иду обводку делать. задаю параметры, а он пишет "Обводка слоя не возможна: нечего обводить"

Пользователь: mrkaktooz 25.02.2010 09:19
Аватар пользователя mrkaktooz

попробуйте кликнуть удерживая Ctrl по слою с созданной вами фигуры

Пользователь: sanek_ak-90 01.03.2010 16:26
Аватар пользователя sanek_ak-90

Помогите, у меня какая-то фигня с рисованием прямоугольника с округленными углами (шаг 4). Когда я рисую прямоугольник у меня получается круг, либо что-то напоминающее его. Я ничего с кнопками не путаю, (нажимаю прямоугольник с скругленными углами), но у меня рисуется круг.

Пользователь: mrkaktooz 01.03.2010 17:58
Аватар пользователя mrkaktooz

В панели опций (под главным меню) есть поле Radius(Радиус). Введите туда меньше (необходимое) значение и нарисуйте прямоугольник снова

Пользователь: sanek_ak-90 02.03.2010 16:13
Аватар пользователя sanek_ak-90

Спасибо. Я выставил 0.2 см и у меня получилось. Но почему всё так получилось не понятно.

Пользователь: mrkaktooz 02.03.2010 16:54
Аватар пользователя mrkaktooz

что именно не понятно? почему стояло большое значение?

Пользователь: sanek_ak-90 03.03.2010 16:15
Аватар пользователя sanek_ak-90

Да. Почему вместо 10 надо вводить 0.2. Видимо это какой-то глюк)))

Пользователь: mrkaktooz 04.03.2010 09:37
Аватар пользователя mrkaktooz

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

Пользователь: sanek_ak-90 03.03.2010 16:17
Аватар пользователя sanek_ak-90

Кстати, напишите, можно ли накладывать несколько градиентов на один рисунок?

Пользователь: mrkaktooz 04.03.2010 09:38
Аватар пользователя mrkaktooz

конечно)

Пользователь: Гость 07.03.2010 00:45
Аватар пользователя Гость

спасибо за урок, наконец-то разобрался

Пользователь: zonder 05.04.2010 08:41
Аватар пользователя zonder

Круто смотрится - вот что получилось у меня -
keykey2key3

ZONDER free-light

Пользователь: DEKI 09.05.2010 14:13
Аватар пользователя DEKI

у тебя оч. классно получилось!! молодец! подскажи как сделал такие светящиеся буквы. да и где ваще нашёл такие шрифты?? заранее спс!

Пользователь: Tomas.zal 28.04.2010 09:16
Аватар пользователя Tomas.zal

Не получается выполнить 10-ый шаг с аватаркой. Пожалуйста помогите!

Пользователь: admin 28.04.2010 09:53
Аватар пользователя admin

Что именно не получается?

Пользователь: Tomas.zal 28.04.2010 10:00
Аватар пользователя Tomas.zal

Не получается зделать фотку прозрачной.
Показанно так:
final_1_0.jpg
А у меня выходит вот так:
bezymyannyy.jpg

Пользователь: admin 28.04.2010 16:39
Аватар пользователя admin

попробуйте переместить слой с вашей картинкой еще ниже (в панели Layers (Слои))

Пользователь: Tomas.zal 29.04.2010 18:24
Аватар пользователя Tomas.zal

Если сделать как Вы сказали то фигура закрывает картинку я это уже пробовал.

Пользователь: admin 30.04.2010 10:05
Аватар пользователя admin

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

Пользователь: Tip-top 07.05.2010 21:41
Аватар пользователя Tip-top

В 7 шаге у меня не получается именно такое же выделение, получается только верхняя часть, которая у вас на рисунке выделена пунктиром, а квадрат нижний пропадает. Почему?
В результате я не могу правильно наложить градиент.

Пользователь: mrkaktooz 10.05.2010 21:58
Аватар пользователя mrkaktooz

Вам и нужно только верхнее выделение.

Пользователь: DEKI 09.05.2010 14:10
Аватар пользователя DEKI

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

Пользователь: mrkaktooz 10.05.2010 22:03
Аватар пользователя mrkaktooz

Выберите слой с вставленной картинкой в панели Слои (Layers) и нажмите по нему правой кнопкой мыши. Затем выберите в появившемся меню Rasterize Layer (Растрировать слой). У вас получится обычный слой, который можно редактировать. Кликните по эскизу слоя с формой (квадратик с закругленными краями), тем самым получите нужное выделение выделение. Потом нажмите Ctrl+Shift+I, чтобы инвертировать выделение и затем клавишу Del , чтобы удалить прямые уголки (уголки скругляться по выделению).

Пользователь: DEKI 11.05.2010 19:50
Аватар пользователя DEKI

вот я нажимаю на эскиз слоя квадратика с закр. краями. затем нажимаю ctrl+shift+I и ничего не происходит. если нажимаю клавишу Del, то он удаляет слой с квадратом. разъясните

Пользователь: mrkaktooz 12.05.2010 09:09
Аватар пользователя mrkaktooz

на эскиз с квадратиком нужно нажимать удерживая клавишу Ctrl, тем самым получите выделение, а дальше ctrl+shift+I и Del. Только перед нажатием Del убедитесь, что выбран слой в котором нужно удалить уголки.

Пользователь: DEKI 11.05.2010 19:31
Аватар пользователя DEKI

вот, кстати, что получилось с небельшими дополнениями (сори, скосьянил у кой-кого:)):
avatar_deki_dlinnyy.png

Пользователь: MAD MAX 17.05.2010 06:33
Аватар пользователя MAD MAX

Ну в общем не плохо!

mad-max-red.gif

Жаль что они весят много!

Пользователь: Nemy 18.05.2010 10:10
Аватар пользователя Nemy

Добрый день! Спасибо вам за уроки. Заступарилась на 10-м шаге, а именно как обрезать углы фотографии по форме четырехугольника со скошенными углами. Выделяю четырехугольник, нажимаю Image-Crop и обрезается не только лишнее в картинке но и backgroung.

Пользователь: mrkaktooz 18.05.2010 10:21
Аватар пользователя mrkaktooz

смотрите комментарии выше. я недавно отвечал на этот вопрос

Пользователь: Nemy 19.05.2010 13:26
Аватар пользователя Nemy

Спасибо! я тоже самое делала и выделяла и инвертировала и Del (убедившись в правильности слоя), однако обрезается все-равно все.

Пользователь: mrkaktooz 19.05.2010 13:57
Аватар пользователя mrkaktooz

в прошлом комментарии вы говорили о Image->Crop. Это зачем? в уроке ничего не сказано про это инструмент.

Пользователь: Nemy 24.05.2010 13:53
Аватар пользователя Nemy

Это я уже пробовала все что на ум придет!=) все получилось, спасибо=)

Пользователь: coshatochka 25.05.2010 21:24
Аватар пользователя coshatochka

Здравствуйте!
Помогите пожалуйста понять, где моя ошибка. Совсем не получается 7 шаг. Создаю новый слой, пытаюсь сделать овальное выделение, для этого выбираю инструмент "Эллипс", другого я не нашла, удерживаю Alt+Shift - появляется пипетка, Ctrl+Shift - появляется стрелочка и никакого выделения не происходит... Совсем застопорилась...

Пользователь: mrkaktooz 26.05.2010 10:24
Аватар пользователя mrkaktooz

Посмотрите на скриншоте... там вверху отмечена кнопочка. После того как вы выбрали инструмент Овальная область нажмите на нее и можете выделять не нажимая никаких клавиш.

Пользователь: coshatochka 26.05.2010 20:01
Аватар пользователя coshatochka

Спасибо большое))) Дурачка я)))) не то творила.... или вытворяла... Вы помогли и все получилось)))

Пользователь: graphos 09.06.2010 12:06
Аватар пользователя graphos

Может быть я на по теме, но подскажите пожалуйста как добиться матовой прозрачности аналогичной на шапке вашего сайта (DIVO.BY)? Никак не могу понять!

Пользователь: mrkaktooz 09.06.2010 12:54
Аватар пользователя mrkaktooz

просто размойте острые края у объектов под вашим стеклом

Пользователь: graphos 10.06.2010 16:13
Аватар пользователя graphos

Для этого нужно выделить то что находиться под "стеклом" ? Или есть другой вариант? Спасибо!

Пользователь: mrkaktooz 10.06.2010 16:47
Аватар пользователя mrkaktooz

вам нужно выделить ваше стекло. а затем просто выберите инструмент Blur Tool (Размытие) и размойте те предметы, которые находятся в области выделения.

Пользователь: ☺Egoist☺ 08.07.2010 20:09
Аватар пользователя ☺Egoist☺

спасибо большое. очень простой урок, первый который я сделал на 100%

Пользователь: Void68 15.07.2010 11:42
Аватар пользователя Void68

у меня не получается 6 шаг , я нажимаю 2 раза на слой но он не выделяется

Пользователь: mrkaktooz 15.07.2010 12:50
Аватар пользователя mrkaktooz

А зачем 2 раза? об этом я не писал.

Пользователь: ириска 21.07.2010 17:21
Аватар пользователя ириска

Здравствуйте ! Помогите мне мне сделать этот урок. Во первых - чтобы увидеть белый кант вокруг прямоугольника мне пришлось поставить 10 рх. Во вторых у меня не получается сделать надпись. С такими же настройками как у вас , мои буквы можно разглядеть только под микроскопом. Когда я их растянула до нужного размера значение стало около 350 pt.В третьих ,когда я стираю белую обводку я не могу точно попасть по линии , а если стирать штрихами то они становятся не прозрачными а черными.А в самом начале ,чтобы сделать сделать прямоугольник как у вас мне пришлось поставить радиус 150 рх.Подскажите что у меня с цифрами ? И еще : отражение получилось слишком ярким, как сделать его почти не видимым как у вас.(у меня яркая фотография)

Пользователь: mrkaktooz 22.07.2010 11:21
Аватар пользователя mrkaktooz

По поводу цифр. Просто вы создали документ большого размера. попробуйте создать документ 300х300 px и c разрешением 72dpi.
Чтобы сделать отражение почти невидимым установите меньшее значение Opacity (Непрозрачность) (находится вверху панели Layers(Слои))

Пользователь: ириска 22.07.2010 14:37
Аватар пользователя ириска

Спасибо! У меня стояли см. вместо пикселей . А где устанавливать расширение ?

Пользователь: mrkaktooz 22.07.2010 15:57
Аватар пользователя mrkaktooz

при создании нового документа есть опция Resolution (Разрешение). Если документ уже был создан, то можно изменить через меню Image->Image Size (Изображение->Размер изображения)

Пользователь: dimas_torres 06.08.2010 09:20
Аватар пользователя dimas_torres

Почему у меня в Шаге 6 выделается не Скругленный прямоугольник,а само изображение(300х300)

Что делать?

Пользователь: mrkaktooz 06.08.2010 10:53
Аватар пользователя mrkaktooz

Для того чтобы образовать нужное выделение, кликните по нужному слою в палитре Layers (Слои) Удерживая клавишу Ctrl. Вы, как я понимаю кликаете просто не потому слою.

Пользователь: dimas_torres 06.08.2010 09:47
Аватар пользователя dimas_torres

Слушай.Ты есть в скайпе,а то у меня совсем ничего не получается...Он 2 шага(

Просто новичек.только вчера скачал фотошоп...

Дай свой ник пожалуйста...Или добавь dimas_torres

Пользователь: dimas_torres 06.08.2010 11:55
Аватар пользователя dimas_torres

У меня там не слои,а фон.Я зажимаю Ctrl и выделяется само изображение(

Совсем не понимаю(

Добавь пожалуйста в скайп

Пользователь: mrkaktooz 06.08.2010 12:35
Аватар пользователя mrkaktooz

Внимательно изучите урок и картинки к нему. Здесь все подробно описано. Если этот урок пока не поддается начните с чего-нибудь попроще.

Пользователь: dimas_torres 06.08.2010 21:33
Аватар пользователя dimas_torres

Ну я просто ради того,чтобы меню делать фотошоп и скачал...

Пользователь: dimas_torres 07.08.2010 14:09
Аватар пользователя dimas_torres

Что именно надо стирать в Шаге 8?

И как после 7 Шага убралось выделение контурное?

Пользователь: mrkaktooz 07.08.2010 16:30
Аватар пользователя mrkaktooz

"Стерем немного в нижних углах нашу белую обводку" - читаем внимательнее!

Чтобы убрать выделение нажмите Ctrl+D

Пользователь: dimas_torres 07.08.2010 21:20
Аватар пользователя dimas_torres

Как стирать я не понимаю и что стирать?Как сделать эти белые по краям линии?

Пользователь: mrkaktooz 08.08.2010 08:19
Аватар пользователя mrkaktooz

В шаге 6 описано как сделать линии (проще уже некуда). А стирать инструментом Eraser Tool (Ластик). Выбираете инструмент Ластик, если надо устанавливаете ему нужные настройки и водите (удерживая левую кнопку мыши) по тому месту, которое нужно стереть

Пользователь: dimas_torres 08.08.2010 08:32
Аватар пользователя dimas_torres

...Не...Ладно,извини...

Пользователь: shooter 22.08.2010 14:47
Аватар пользователя shooter

не могу выделить овальную область пишет
Внимание: ни один пиксел не выделен более чем на 50%

Пользователь: mrkaktooz 23.08.2010 11:48
Аватар пользователя mrkaktooz

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

Пользователь: без разницы 03.10.2010 16:07
Аватар пользователя без разницы

у меня проооблема в шаге 6 НЕМОГУ НАЙТИ МЕНЮ у меня англиский фотошопиг

:jawdrop::jawdrop::jawdrop:

Пользователь: без разницы 03.10.2010 16:28
Аватар пользователя без разницы

я поняла про меню но углы не стираются =(

:jawdrop::jawdrop::jawdrop:

Пользователь: Gamatos 31.10.2010 02:04
Аватар пользователя Gamatos

Здрасте,а как сделать чтобы изображение отображалось на полу?

Спасибо жду ответа...(У меня Английская версия.Что нажимать говорите англ.Словами пожалуйста.

Пользователь: mrkaktooz 31.10.2010 09:25
Аватар пользователя mrkaktooz

В конце урока об этом рассказано... читайте внимательнее

Пользователь: Gamatos 31.10.2010 13:32
Аватар пользователя Gamatos

Спасибо огромное!

Пользователь: Sanya5369 19.11.2010 16:53
Аватар пользователя Sanya5369


неплохо получилось

твоя жизнь твой выбр и выбор за тобой

Пользователь: viajante 15.12.2010 01:40
Аватар пользователя viajante

Долго искал урок, чтоб создать кнопку.
Это единственный сайт, где у меня получилось.
И админ хоть отвечает на вопросы людей.
Спасибо!
Делайте побольше уроков для начинающих, только с подробным описанием.

Пользователь: Ню 11.07.2011 12:39
Аватар пользователя Ню

Здравствуйте! В 7 шаге я не нашла "овальная область"!

Пользователь: Гость 09.01.2012 15:12
Аватар пользователя Гость

Спасибо, читаю с первого урока, за день дошёл до этого урока, пока всё получается)

Пользователь: Гость 22.01.2012 15:18
Аватар пользователя Гость

не могу найти градиент помогите!!!!

Пользователь: mrkaktooz 24.01.2012 09:08
Аватар пользователя mrkaktooz

В панели инструментов слева. Горячая клавиша G.

Пользователь: Макс 09.06.2012 11:59
Аватар пользователя Макс

Отличный рисунок!

Пользователь: Гость 11.06.2012 13:35
Аватар пользователя Гость

У меня в 5 шаге когда выбираешь эффект Color Overlay цвет фигуры почему то становится красным. Наверху в окне рядом с режимом наложения нет пиктограммы с цветом(((

Пользователь: mrkaktooz 11.06.2012 17:42
Аватар пользователя mrkaktooz

Странно, даже не знаю что вам посоветовать

Пользователь: Дионис 25.07.2012 07:30
Аватар пользователя Дионис

Шаг 6 это бред какой то.У меня ничего не происходит.Работаю на русском CS6.Делаю новый слой,держу ктрл-выделяю и все на этом.Меню в "редактирование"-"Выполнить обводку" не горит и ее нельзя выбрать.Где вообще эта пиктограмма?Может я че не так делаю.Это второй идиотский урок и опять на том же месте приходится останавливаться.Вот именно на этом "удерживаем клавишу ктрл и выделяем".Вы если пишите уроки так пишите нормально а не для тех кто и так это все знает от и до-ибо смысл тогда в создании подобных уроков просто теряется.Выстрел в пустоту проще говоря...

Пользователь: Гость 28.09.2013 22:24
Аватар пользователя Гость

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

Пользователь: Гость 28.09.2013 23:18
Аватар пользователя Гость

У меня овал и квадрат с пунктиром, а как в шаге 7 сделать квадрат с основанием внизу и пунктиром внутри? Спасибо

Добавить комментарий