ТехноСаратовФорумТехноСаратов → Создание web 2.0 логотипа
Добавить
сообщение Список пользователей Поиск

Liira 15 сентября 2008 г. в 09:15 #
Аватар

Гость

Имя: Victor
Сообщений: 7
Благодарностей: 3
У кого-нить есть статья или что-то большее про то как с помощью фотошопа сделать вебдванольный лого? ну или хотя бы в общих чертах расскажите как это делается)
Профиль
r007 15 сентября 2008 г. в 18:56 #
Аватар

Юзер

Имя: Сергей
Сообщений: 252
Благодарностей: 15

Liira:

У кого-нить есть статья или что-то большее про то как с помощью фотошопа сделать вебдванольный лого? ну или хотя бы в общих чертах расскажите как это делается)

во первых надо шрифт без засечек, округлый, такой как ge inspira. нужны web 2.0 градиенты, их можно достать как для gimp'a, так и для фотошопа. затем делаешь приблизительный набросок и прикидываешь идею. это главное. ну и конешно посколько логотип веб 2.0, его желательно делать попроще.
http://portal.san.ru/forums/journal/uploads/j14225_1231597820.gif
Профиль
GoD 15 сентября 2008 г. в 20:08 #
Аватар

Специалист

Имя: Антон
Сообщений: 546
Благодарностей: 22
а в чем суть вообще?) почему именно веб 2.0 называеться?)
http://portal.san.ru/forums/journal/uploads/j34890_1221734216.jpg
http://portal.san.ru/forums/journal/uploads/j34890_1231186449.gif
Профиль
r007 15 сентября 2008 г. в 20:19 #
Аватар

Юзер

Имя: Сергей
Сообщений: 252
Благодарностей: 15

GoD:

а в чем суть вообще?) почему именно веб 2.0 называеться?)

ну просто… стиль такой, яркий, выразительный. цвета, шрифт соответвующие…
http://portal.san.ru/forums/journal/uploads/j14225_1231597820.gif
Профиль
GoD 15 сентября 2008 г. в 20:30 #
Аватар

Специалист

Имя: Антон
Сообщений: 546
Благодарностей: 22
а пример есть?) или статейка какая нить)
http://portal.san.ru/forums/journal/uploads/j34890_1221734216.jpg
http://portal.san.ru/forums/journal/uploads/j34890_1231186449.gif
Профиль
admin 15 сентября 2008 г. в 21:04 #
Аватар

Администратор

Имя: Александр
Сообщений: 1352
Благодарностей: 59
Вообще изначально этот стиль был разработан компание Apple (ЕМНИП это называлось «glass»)

по теме

www.overme.ru:

И так приступим, во-первых вам нужно выделить несколько цветов для будущего логотипа, взятых непосредственно из вашего шаблона на который вы в последствие и поставите созданный логотип, для того чтобы он как можно лучше вписался в общий стиль блога.

Далее нам нужно выбрать подходящий шрифт. Если на вашем компьютере таковых не имеется, загляните на dafont.com, или navat.net в первом огромное количество шрифтов разделенных по категориям, во втором же также кучи шрифтов, но имееться категория Web 2.0, шрифты находящиеся в ней, как нельзя кстате подойдут для нашего логотипа.
Обращаю ваше внимание на то, что использование стандартных шрифтов, будет выглядеть дешево, а сторонние к тому же придадут еще больше красоты, но это уже зависеть от вашего выбора.

Установив необходимые шрифты, переходим к создание логотипа. Открываем Photoshop, создаем новый проект, размером примерно 200х100 пикселей.
Инструментом «Horizontal Type Tool» напишите нужным вам шрифтом нужный вам текст :) В моем примере я создал два текстовых слоя, синим Over и зеленым Me.

Далее откройте стиль текстового слоя, нажав на него двойным кликом мышки. Выберите вкладку «Gradient Overlay» и сделайте градиент от исходного цвета (в нашем случае #0096ff) до немного темноватого тоже цвета (примерно #007cd3). Тоже самое проделайте и со вторым слоем. В обоих случаях не забудьте указать галочку “Revers”.

Теперь нарисуйте прямоугольник, инструментом «Rectangle Tool» с белым фоном. Наложите его ровно на половину высоты текста, и данному слою задайте прозрачность 19%.

Как вы уже наверняка заметили, Web 2.0 штучки постепенно вырисовываются, но все же пока этого мало, поэтому продолжим :)

Снова открываем стиль первого текстового слоя, заходим во вкладку «Stroke», в меню «Fill Type» выбираем «Gradient», далее выставляем градиент от белого (#FFFFFF) до светлого исходного цвета (в нашем случае до светло-синего #A9DCFF). В первой точке непрозрачность (opacity) выставляем до нуля (0).
И в завершение для текущего слоя Fill (заполнение) ставим 0. Тоже самое проделываем и для второго текстового слоя.

Ну и как же мы можем забыть о стеклянном отражение снизу, не будем отходить от традиций, поэтому сделаем и это. Хотя в некоторых случаях это может быть лишним.

Делаем копии двух текстовых слоев. Выделяем каждый и жмем Ctrl+J. Отражаем их по вертикали (кто не знает это делаться при помощи инструмента Выделение(Rectangular Marque Tool). Делаем активным этот инструмент, и кликаем по слою правой клавишей мыши, выбираем Free Transform, далее снова правым кликов, в выпадающем меню Flip Vertical). Ставим уровень заполнения (Fill) для каждого дублированного слоя 0.
Открываем стиль слоя, заходим во вкладку «Gradient Overlay» и делаем градиент от исходного цвета (в нашем случае синем #007fd9) до прозрачного. Закрываем стиль.
Выставляем непрозрачность для слоя на уровень 41%. Проделываем все это для обоих дублированных слоев.

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


в приложении — что получилось. Но вообще на этот стиль люди сейчас не очень адекватно реагируют, ибо достало))
Профиль
r007 15 сентября 2008 г. в 21:45 #
Аватар

Юзер

Имя: Сергей
Сообщений: 252
Благодарностей: 15
не согласен с Алексеем, всегда есть удачные и неудачные примеры. в данном случае не очень удачный. для сравнения прошу посетить
http://fontfeed.com/archives/the-logos-of-web-20/
http://www.smashingmagazine.com/2007/03/13/inspire-yourself-58-creative-logos/
там очень простые и качественно сделанные логотипы. никаких градиентов, бликов, и прочей ерунды нету.
http://portal.san.ru/forums/journal/uploads/j14225_1231597820.gif
Профиль
admin 16 сентября 2008 г. в 15:49 #
Аватар

Администратор

Имя: Александр
Сообщений: 1352
Благодарностей: 59

r007:

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

да, там действительно красивые вещи, но являются ли они логотипами в стиле веб 2.0? Думаю все эти блики, градиенты и «стеклянность» как раз и составляют основу этого стиля. А на тех сайтах представлены логотипы веб 2.0 сайтов
Профиль
admin 16 сентября 2008 г. в 15:51 #
Аватар

Администратор

Имя: Александр
Сообщений: 1352
Благодарностей: 59
впрочем беру свои слова назад, там действительно вебдванольные логотипы. В аттаче файл с множеством примеров вебдванольного логостроения
Профиль
joker 17 сентября 2008 г. в 00:24 #
Аватар

Гость

Имя: Michael
Сообщений: 10
Благодарностей: 0
сейчас все более и более отходят от «тяжелой» графики в сторону упрощения и «уплощения»
spending some life…
Профиль
Klen-Ru 8 августа 2011 г. в 10:44 #
Аватар

Гость

Имя: Вадим
Сообщений: 3
Благодарностей: 0
Графика зависит от поставленной цели. При разработке логотипа, если «делают по уму», то как правило, есть несколько логотипов: черно-белый, лаконичный, в цвете «2D» (лаконичный в цвете) и full color 3D, для презентабельных целей… В буклет например, на заставку видео-ролика и т.д. А что касается конкретно интернете, то то-же от того, для кого делается… Например, если это игровой сервер какой-то он-лайн игры, то там как правило столько нагрузок текстур, вензелей и т.д. А если это шоп или техно-форум, то все естественно по минимуму и лаконично, цели другие… там визуализация, тут информация :)
Мозаика в Саратове КЛЕН.РУ (klen.ru)
Профиль