|
Данный форум является архивом сайта www.eestimamki.ee
|
Урок №19 (1. курс)
| |
| Mohito |
Дата: Среда, 20.02.13, 09:41:39 | Сообщение № 1 |
Группа: Удаленные
|
Юзерба́р (англ. userbar) — графическое изображение, предназначенное для размещения в подписи на веб-форумах, интернет-конференциях и других средствах интернет-общения. Основной целью размещение картинки-юзербара является выражение каких-либо убеждений, пристрастий, увлечений, привязанностей и даже черт характера пользователя. Встречаются также и юзербары, заявляющие об обратных чувствах своего владельца: антипатию, ненависть к какому-либо предмету действительности. Однако это явление, получившее английское название haterbar (от англ. hater — ненавистник), является маргинальным и не получило распространения в большинстве интернет-сообществ, занимающихся созданием и распространением пользовательских картинок.
И так открываем Photoshop и создаем файл размером 350 X 19 pixels (NB! В этом уроке делаем Юзербары ТОЛЬКО такого размера!)
Перед нами появилась абсолютно чистая картинка. Давайте дадим ей градиент. Проваливаемся в Layer-> New Fill Layer -> Gradyent.
Должно появится следующее меню:
Нажимаем на Gradyent и выбираем подходящие нам цвета. Затем жмем ОК.
Наша картинка должна иметь следующий вид:
Для этого ставим style: reflected, Scale: 150 и ставим галочку "Reverse"
Вот что получилось
Теперь, создав подходящий нам узор, добавим полоски или узоры.
Для того чтобы создать узор, нам необходимо создать новый файл с следующими настройками:
Затем нарисуем узор в виде полосы. Для этого увеличиваем масштаб (Ctrl + "+" несколько раз) в несколько раз и карандашом (Pencil Tool) рисуем диагональную полоску
Можно поставить в одном углу точку, зажать шифт и поставить точку в другом углу. Получится прямая линия
Далее нажимаем Edit -> Define Patern -> даем имя фону.
Теперь переключаемся к нашему старому рисунку и создаем в нем новый слой.
Затем заливаем им наш фон из рисунка 1. Для этого выбираем Paint Bucket Bucket Tool, в верхнем меню ставим "Pattern" и выбираем наш узор.
Должно получится, что то вроде этого:
Теперь давайте сделаем его более прозрачным. Для этого, в панели слоев ставим Opacity ~ 30 - 40 % на ваше усмотрение.
Однако юзербары, с таким узором видны почти везде, поэтому советую поэкспериментировать в этом плане.
Также вы можете поменять сам цвет вашего узора, в случае, если он не подходит к фону.
Например, у нас такой фон:
На таком фоне будет трудно что-либо увидеть. Зато к нему идеально подходит белый узор.
Для этого заливаем также, как было расписано ранее, и проделываем некоторые операции:
В окне Layers щелкаем правой кнопкой по слою с узором и выбираем пункт "Blending Options"
Далее по знакомому нам способу выбираем Opacity и получаем что-то вроде этого:
Также, если хочется, то можно поэкспериментировать с вкладкой Gradient Overlay (ниже Color Overlay), иногда можно добиться интересных эффектов, придать нашему узору блеск. Принцип, такой же, что в начале.
Выбрав подходящий фон и узор, ставим картинку.
1. Я выбрала картинку, перенесла на мой юзербар.
2. Написала надпись.
3. Потом создала новый слой. Для этого нажимаем Ctrl + Shift + N.
4. Затем берем инструмент "Овальная область" (По умолчанию "М"), и выделяем примерно так как на скрине.
5. Заливаем выделенную область белым цветом.
6. Ставим Opacity на 30 % или как вам будет виднее.
Переходим в ImageReady и делаем анимацию из 2 кадров - (с разной обводкой в тексте) - в 6 фотошопе делаем в окне самой программы.
Секунды поставила на кадрах как 0.1 сек
Всё мой юзербар готов. А ваш?
Дальше я сделала анимацию
В уроке использовались материалы с сайта Луганский молодежный портал и урок 2008 года СеРгЕеВны.
Ваша задача сделать 5 юзербаров, один из которых (минимум один) должен быть о нашем сайте.То есть юзербар с надписями eestimamki, Мамочки Эстонии итп.. Срок - 3 марта (включительно).
|
|
|
|
|
| Mohito |
Дата: Вторник, 26.02.13, 10:37:05 | Сообщение № 2 |
Группа: Удаленные
|
Юзербары наших учениц можно посмотреть здесь:
http://eestimamki.ee/forum/91-4238-1
Еще юзербары наших форумчанок здесь:
http://eestimamki.ee/load/
перевод типов градиента:
Линейный градиент (Linear Gradient) – переход осуществляется по прямой линии вдоль определённого направления.
Радиальный градиент (Radial Gradient) – изменение цвета равномерно во все стороны от центральной точки.
Конусовидный градиент (Angle Gradient) – переход цвета по кругу с центром в заданной точке по часовой стрелке.
Зеркальный градиент (Reflected Gradient) – два линейных градиента, которые распространяются от начальной точки в противоположных направлениях.
Ромбовидный градиент (Diamond Gradient) – образующие линии выстраиваются в виде ромба.
|
|
|
|
|
| Mohito |
Дата: Вторник, 26.02.13, 10:43:28 | Сообщение № 3 |
Группа: Удаленные
|
делаем градиент "нужного" цвета
Выбираем здесь:
Затем выскакивает такая табличка, в ней в окошке цвета написано NONE
Дальше выскакивает табличка
Цвета здесь тоже серые, как у вас. Нажимаем мышкой на палитру цветов (можно нажать и на стрелочку, но тогда выйдет просто табличка имеющихся градиентов, а если нажимаем на цвет, то выходит Gradient Editor).
Здесь либо выбираем уже готовый градиент, либо создаем свой (это будете учить подробно на 2-м курсе, сейчас это рассматривать не будем).. Если выбрали готовый градиент, нажимаем ОК.. по идее, все должно сохраниться. 
Еще легкий способ, чтоб градиент изначально был не серо-белый. Скорее всего, у вас сейчас в красках такой цвет:
И градиент получается черно-белым
Теперь поменяем цвет в красках, меняется и свет градиента
Если первый цвет у нас переходит не в желтый, а в прозрачный.. это от того, что в настройках второй квадратик стоит с 0-ой прозрачностью
Надо поменять его на непрозрачный. Для этого жмем в середину квадратика (цифра 1). Внизу активируются окошки, в окне Opacity ставим 100% (цифра 2). Если заметили, квадратик из белого стал черным.. Нажимаем ОК (цифра 3).
Все, теперь градиент зелено-желтый.
|
|
|
|
|
| Cappuccino |
Дата: Вторник, 26.02.13, 20:22:43 | Сообщение № 4 |
Группа: Удаленные
|
Mohito,
Темку для домашних работ бы...
Или сначала сюда кидать юзербары?
|
|
|
|
|
| Solnechko |
Дата: Вторник, 26.02.13, 21:04:25 | Сообщение № 5 |
Группа: Удаленные
|
Cappuccino, ну ты молодчина,ужеее все сделала. долго сидела разглядывала твои баннеры.
интересно а как это "да нефлудима"будешь? 
|
|
|
|
|
| ema |
Дата: Вторник, 26.02.13, 21:18:50 | Сообщение № 6 |
Группа: Удаленные
|
Cappuccino, посмотрела)классно)и столько исходников)я даже еще урок не читала и не вникала.не сложно было делать?
|
|
|
|
|
| Cappuccino |
Дата: Вторник, 26.02.13, 21:31:35 | Сообщение № 7 |
Группа: Удаленные
|
Цитата (Solnechko) а как это "да нефлудима"будешь
Грамматически, конечно, форма неправильная, но с подковыркой - не флуди и тебя самого не зафлудят  (от "не суди да несудим будешь"   ) Пару раз встречала в нете это выражение.
Цитата (ema) не сложно было делать?
Знаешь, там всё просто и несложно, но очень как-то муууторно. И полет фантазии режется просто-таки микроскопическим размером площади. И всегда мерять надо исходник к величине баннера, то есть как он будет сильно уменьшенным выглядеть. Например, хотела "фигу" использовать, а не тут-то было, малюсенькая уменьшенная фига выглядела как, пардон, какашка
Вот такие сложности в основном. Плюс анимация "доставляет", кропотливо всё это.
И периодически в файлах ошибки ФШ выдавал... Не знаю, почему. Четвертый банер я сохранила в анимации, а в оригинале в формате psd уже открыть не могу больше - файл как-то сломался, пишет, что не совпадают версии фотошопа и что данные слоя не может прочитать  В общем, хотела кое-что там поправить, но не судьба уже
Solnechko, ema,
Спасибо вам, девочки, за отзывы!! 
Сообщение отредактировано Cappuccino - Вторник, 26.02.13, 21:33:47 |
|
|
|
|
| Solnechko |
Дата: Вторник, 26.02.13, 21:35:12 | Сообщение № 8 |
Группа: Удаленные
|
Цитата (Cappuccino) От выражения "не суди да несудим будешь"
да я поняла,молодец,с юморцой подошла к делу.
а я еще не приступала даже,только урок прочитала и на твои работы поглазела.приеду домоц в четверг и сразу за комп
|
|
|
|
|
| Cappuccino |
Дата: Вторник, 26.02.13, 21:41:42 | Сообщение № 9 |
Группа: Удаленные
|
Цитата (Solnechko) да я поняла
А, ну я так и подумала.
На всякий случай пояснила, ты уж извини
Цитата (Solnechko) приеду домоц в четверг и сразу за комп
Ты всё в разъездах, аки пчелка 
Что же, большой удачи тебе и творческих узбеков на всех поприщах, включая фотошоп 
|
|
|
|
|
| Solnechko |
Дата: Вторник, 26.02.13, 22:32:54 | Сообщение № 10 |
Группа: Удаленные
|
Цитата (Cappuccino) Ты всё в разъездах, аки пчелка
угу,все по командировкам.устала уже 
спасибо,буду стараться.
|
|
|
|
|
| Marisha |
Дата: Вторник, 26.02.13, 23:05:28 | Сообщение № 11 |
Группа: Удаленные
|
Cappuccino, а мне про наркотик понравилось. да и вообще все прикольно получились! одним словом молодец!
|
|
|
|
|
| ema |
Дата: Вторник, 26.02.13, 23:58:28 | Сообщение № 12 |
Группа: Удаленные
|
начала делать сегодня...не пошло у меня...когда дело дошло до картинок,которые нужно в ставить в эту узкую полоску.........вышло уродство...все я спать...    
|
|
|
|
|
| Cappuccino |
Дата: Среда, 27.02.13, 01:19:37 | Сообщение № 13 |
Группа: Удаленные
|
Marisha,
Ой, спасибо тебе большое за отзыв и оценку
Очень приятно слышать, ну вот опять нарвалась я, вы так добры, девочки 
Цитата (Marisha) про наркотик понравилось
Аааа, это правда
Цитата (ema) когда дело дошло до картинок,которые нужно в ставить в эту узкую полоску
Во-во...
Но я верю в тебя!
Теперь мне предстоит самое приятное - буду всю недельку заглядывать в темку, ждать творений и зрелищ от вас, дорогие.   И с удовольствием смотреееть. 
|
|
|
|
|
| Mohito |
Дата: Среда, 27.02.13, 05:54:18 | Сообщение № 14 |
Группа: Удаленные
|
Cappuccino, 1,2, 3 и 5 работы хороши...
а вот с 4... шрифт обрезан...
|
|
|
|
|
| vikcy |
Дата: Среда, 27.02.13, 10:00:06 | Сообщение № 15 |
Группа: Удаленные
|
Cappuccino, хорошие работы. Со смыслом! Но в 3 работе последняя строка с текстом, быстро слишком сменяется сердечками. И в 5 работе тоже текст слишком быстро мелькает, я бы добавила по паре секунд.
Сообщение отредактировано vikcy - Среда, 27.02.13, 10:00:58 |
|
|
|
|
| Cappuccino |
Дата: Среда, 27.02.13, 10:08:40 | Сообщение № 16 |
Группа: Удаленные
|
Mohito, спасибо!
Цитата (Mohito) а вот с 4... шрифт обрезан...
Mohito, я выше написала, у меня файл псд не открывается после сохранения этого четвертого баннера в анимации 
Может, поможешь мне?
Ну а вдруг удастся открыть, так не хочется заново его делать.
Вот скрины, что выдает при открытии псд-файла
Сначала один вопрос, а потом пишет вердикт и не открывает:
Фотошоп у меня один-единственный, то есть версию я не меняла, как они в этом случае могут не совпадать?
Но предчувствую нехорошее
А еще частенько вот такое выдает (не только в этом уроке, но и раньше):
Зачем делать апдейт слоев с текстами? Я нажимаю Ноу, тогда всё остается как было, а если нажать апдейт, то или шрифт меняется, или вообще текст пропадает.
ps. 4й юзербар сделала заново всё-таки, но вопросы выше и недоумение происходящим в моем ФШ в силе.
vikcy, Спасибо!
Замечания учту, эти баннеры я могу попеределывать еще
(п.с. подправила время)
Сообщение отредактировано Cappuccino - Среда, 27.02.13, 14:23:45 |
|
|
|
|
| ema |
Дата: Среда, 27.02.13, 21:54:46 | Сообщение № 17 |
Группа: Удаленные
|
девочки,как у вас продвигается домашка?у меня пока совсем никак.ребенок заболел температура 40 даже и не знаю когда буду делать
|
|
|
|
|
| Veroncha |
Дата: Среда, 27.02.13, 22:07:41 | Сообщение № 18 |
Группа: Удаленные
|
Доступно только для пользователей
|
|
|
|
|
| Cappuccino |
Дата: Среда, 27.02.13, 22:16:45 | Сообщение № 19 |
Группа: Удаленные
|
ema,
Сочувствую Очень понимаю... Пусть температура быстрее спадает, легкого выздоровления детёнку, а тебе терпения и моральных-физических сил!
Цитата (Veroncha) нет настроения их делать
Цитата (Veroncha) Картинки не подобрать , все большое, при уменьшении фиг че видно
Похоже, у нас аналогичные чувства, я тоже через это прошла. Держись!
Какой-то непростой урок. Кажется пустяковым, а на деле своеобразные трудности есть.
|
|
|
|
|
| Marisha |
Дата: Среда, 27.02.13, 22:25:41 | Сообщение № 20 |
Группа: Удаленные
|
вот и я села картинки и вправду сложно подобрать((( чёт ничего путёвого не получается., ещё банеры Капучины мазолят глаз
|
|
|
|
|
|
|
