Рисуем кнопки в фотошопе

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


P.S. Заливка цветом foreground — Alt+Backspace, заливка цветом background — Ctrl+Backspace

Комментарии (48)

+3
Не могу изменить флешу даже в рисовании интерфейсов:)
0
Кнопка
Не удержался :).
0
Да видел я твои кнопочки:) Ты просто умничка!
+1
+1 лол. Я даже макеты для сайтов делаю во флэше:)
+1
Да что говорить! Некоторые даже сами сайты делают во флеше! )))
0
Плюсую:) Только с ним теперь:)
+1
Птыщь

Corel+Photoshop все-таки ближе =)
0
Зачем фотошоп после Corel то?:)
0
Марафет наводить =)
В Corel я это умею, но чего это стоит!!! Я там логотип игры сделал — его можно хоть на суперсайт размером с гостиницу «Космос». Но кнопки… зачем, если их судьба все равно — растр.
0
Интересный подкаст, спасибо.
Вопрос от новичка опытным. Вы рисуете в фотошопах,
как вы эту графику встраиваете в игру?
0
Photoshop > JPG, PNG24 > Flash > SWC > [мой любимый редактор]
0
Я пробовал встраивать SVG, но при большом количестве мелких сущностей неудобно — тяжело их всех поддерживать, и т.д… Почему SVG? В Inkscape умею рисовать)
0
А как ты SVG во флеш втыкаешь? Конвертишь? Растром? Или нашел способ подружить Flash IDE с SVG?
0
Я использую библиотечку code.google.com/p/as3svgrendererlib/

Из того что я рисовал она у меня не загрузила только:
— оконтуренный текст (в итоге сэмулировал через GlowFilter)
— фильтры Inkscape
0
Просто embed xml в код, и поехал грузить SVG :) выглядит очень симпатично. В среднем весит где то на 10%-20% больше растра, но качество)

Минус такого подхода, что надо для каждой отдельной растровой части — делать отдельную SVGшку. Я пока не придумал как все в одном файле хранить. Если придумаю — напишу разработчику библиотечки.
0
Пардон, векторной сущности.
0
SWC != SVG (:
0
Я знаю)
0
Иногда между Photoshop и Flash, помимо экспорта, вмешивается какая-то утилита по сборке текстурных атласов. TexturePacker тот же.
0
А я в inkscape рисую. А прикручиваю к флешу либо через Adobe Illustrator (Inkscape > SVG > Adobe Illustrator > AI > Adobe Flash), либо экспортирую прям из инкскейпа в PNG и втыкаю растр во флеш
0
Раньше рисовал в самом флеше (там все просто и удобно), но в инкскейпе есть ряд возможностей, которые меня подкупили )))
0
Когда ты импортируешь во флеш нарисованную в инкскейпе графику, как решаешь проблему множества разных графических элементов? Каждому элементу надо дать уникальное имя, где то прописать… В иллюстраторе их можно сгруппировать как то и попереименовать? Что б они поотдельности «жили» во флеше…

Я сам люблю в инкскейпе рисовать, но бесчисленное количество svg-шек и [embed] тегов уже надоели, хочется все в один файл разместить и его подгружать.
0
Да никак не решаю — просто открываю svg с помощью илюстратора, потом сохраняю как ai. Ну и с флеша импортирую в библиотеку. ВЕЗДЕ ОСТАВЛЯЮ ПРЕДЛАГАЕМЫЕ ОПЦИИ БЕЗ ИЗМЕНЕНИЙ. Затем делаю из импортированного MovieClip (по умолчанию импортируется как Graphic) ну и собственно использую )
0
dabuttonfactory.com/
Забавный сервис.
+1
Фотошоп программа для ретуширования и обработки фотографий идеальная. Но использовать фотошоп для рисования интерфейсов, да и для рисования вообще это все же извращение, обусловленное лишь его популярностью.
Для разработки интерфейсов и для веб дизайна я бы порекомендовал Adobe Fireworks CS3 или CS5 (но не CS4). Рисуется все в векторе, а отображается в растре поэтому не нужно извращаться чтобы попасть в пиксел. Этакая смесь вектора и растра. Простым копипастом можно скопировать нарисованное во флеш в таком же векторном виде (при желании сразу в растровом), хотя тут есть конечно свои незначительные нюансы. И самое главное, в отличие от фотошопа мы как и во всех нормальных графических редакторах мы работаем с объектами на экране, а не со слоями, как это сделано в фотошопе (за что я его и ненавижу :) ).
PS. Конечно, если человек много лет работает в фотошопе, ему перейти на что-то другое бывает довольно трудно. Однако практика показывает, что рано или поздно это все равно приходится делать, т.к. максимальная эффективность и скорость разработки достигается в связке нескольких редакторов.
+2
Ага… так и вижу: все работали в чем угодно, но не в фотошопе, как вдруг на фотошопе написали поперек «йа популярный! рисовать тут!», и все такие «Okay (» и пошли с поникшими головами работать в ненавистном фотошопе, который почему-то (вот ведь загадка) популярный!
Что за ересь 0о нравится тебе Fireworks и идея готовить дизайн в векторе — не возражаю :)
+3
Что за ересь 0о нравится тебе Fireworks и идея готовить дизайн в векторе — не возражаю :)
Обижать никого не хотел и ничего не имею против тех кто работает в фотошопе. Я просто высказал свое мнение и предложил альтернативу, пробовать что-то другое или нет личное дело каждого.
0
Как бы да. От добра добра не ищут )
0
Я скрин выше выкладывал, ты можешь такое в векторе нарисовать, а сколько это у тебя времени займет?.. Не все можно сделать в векторе за адекватную стоимость.
+2
графический редактор Fireworks CS3
Fireworks — редактор растрово-векторный, в нем можно делать все тоже самое, что и в фотошопе, но одновременно и векторные объекты создавать и комбинировать все это как угодно.
ты можешь такое в векторе нарисовать, а сколько это у тебя времени займет?
Я уверен, что это займет меньше времени чем в фотошопе, просто потому что в фотошопе много лишней рутины со слоями, много лишних кликов придется делать, фотошоп не столь юзабелен. А технически все аналогично делается.
0
Не знаю чем тебе слои так не угодили, но fireworks попробую, коли-так.
0
Просто чтобы банально переместить объект, нужно сначала найти и выделить соответствующий слой, а уже потом тащить объект, зачем эта рутина? Почему нельзя просто взять и сразу работать с объектом на экране, растягивать его, перемещать, вращать, применять фильтры и т.д. не тратя лишние действия на манипуляции со слоями. В фаерворксе тоже каждый отдельный объект представлен слоем, но нет необходимости совершать все операции через слои. Слои не загромождены эффектами, эффекты и фильтры для каждого объекта отражены в его собственном стеке фильров. Вобщим нужно просто попробовать и сравнить, т.к. тема из разряда холивара.
0
Может у тебя просто мало опыта работы с фотошопом?)
Ctrl+ПКМ — список слоев под указателем — клик — мы на слое, если нужно отделить объект, суем его в папку.

Фильтрами я практически не пользовался, все нарисовано кисточкой и текстурами.
+3
Может у тебя просто мало опыта работы с фотошопом?)
да, наверное, я уже больше 6 лет в нем ничего не делал, поэтому возможно я зря так сходу осудил функционал слоев…
Фильтрами я практически не пользовался, все нарисовано кисточкой и текстурами.
Ну и я также, из фильтров тока блур и глоу, вся основа обычно в векторе, с градиентами к стати легко работать.

Вектор, линейный градиент, фильтры Blur и Glow

Затрачено 4-5 часов
0
логотип череповецкой команды по BF3 :)
0
зачетно =)
0
Не думал, что такое можно в векторе сделать, отлично вышло!
+1
Тогда мы идем к вам =)
0
ctrl+LM — выбор слоя под курсором
либо включить автовыбор слоев или групп — тогда просто LM
+1
Неистово плюсую, согласен на 100%. Люблю Fireworks еще со времен Macromedia. Единственное, что Adobe испортило: убили метод рендеринга шрифтов так, как установлено в ОС — было очень полезно для веб-дизайна. Хоть и обещали вернуть, но…
+1
Ага, с шрифтами у них есть проблема, в разных версиях рендерятся по разному, сижу в CS3, наиболее удачная версия во всех отношениях на мой взгляд.
0
как вдруг на фотошопе написали поперек «йа популярный! рисовать тут!»
Фотошоп появился в 1988 году и до сих пор постоянно развивается, даже моя жена ничего не понимающая в графике представляет что это такое и что в нем делают. Любой человек который захочет что-то нарисовать на компе начинает с фотошопа. Он популярен и у всех на слуху ещё до того как люди начинают в нем что-то делать, поэтому высказывание «йа популярный! рисовать тут!» можно считать верным :)
+1
Популярность фотошопа угасла бы очень скоро, если бы не его пригодность к подобным задачам. Так что не «почти все это делают в нем, потому что он популярен», а в большей мере «он популярен, потому что почти все это в нем делают».
+2
На тутсах статья про кнопки пробежала
webdesign.tutsplus.com/articles/design-theory/principles-for-successful-button-design/
0
Отлично!
+1
Перевод на хабре:
habrahabr.ru/blogs/web_design/138828/
0
А другие уроки по рисованию будут?))
0
Пока не планировал особо. Но если чего сделаю — обязательно выложу.
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.