• Добро пожаловать на биржу фриланса Justwebber.com

  • Мы делаем удаленное сотрудничество удобным

  • Заказчикам - огромный выбор исполнителей, а фрилансерам - неиссякаемый поток проектов

  • За удаленной работой - ваше будущее и финансовое благополучие

HTML5+CSS3+PHOTOSHOP-связь установлена !

CSS3Ps - плагин для photoshop преобразующий эффекты в стили


Навигатор: Форумы / Предметное общение / Дизайн / Графика / Фото / HTML5+CSS3+PHOTOSHOP-связь установлена !
Автор Сообщение

ADMIN

#1 /29.06.2013 19:01
АДМИНИСТРАТОР   


 286
 

Карма:  20




Adobe Photoshop - его многие по праву называют лучшим инструментом для работы с растровой графикой. Вебмастер , владеющий навыками работе в фотошопе на 20% , уже может создать вполне достойное похвалы визуальное оформление для своего сайта. В этом замечательном графическом редакторе можно творить невероятные шедевры!
Вот и получается , что без html нам вебмастерам никуда , а с появлением html5 тем более. Дальше все бы хорошо , но сайты мы делаем для людей , а значит они должны быть привлекательными , функциональными , запоминающимися. Если всю эту привлекательность вложить в чистый html , то привлекательности будет заметно меньше , даже из-за километрового веса нашего кода. Да и поисковики сейчас присматриваются очень внимательно к скорости загрузки сайта. Значит код нужно облегчить до минимума , а для этого есть ну просто незаменимый в такой ситуации css. Все стили мы пишем в нем. И нам удобно , и поисковик рад порядку , и посетитель доволен что не ждет загрузки сайта долго. Теперь остается еще один нюанс - изображения. Как бы мы не оптимизировали код , если сайт состоит из сплошных изображений , имеет шапку под 5мб , а то и флеш , то это совсем нехорошо , и неуважительно к посетителю. Поэтому все изображения нужно оптимизировать , превращать в спрайты , а везде где можно заменять стилями css3 - там сейчас возможностей море. Вот пример: на одном сайте я видел шапку 1280*220 , на которой изображено небо , а на фоне неба два летящих навстречу друг другу голубка. Посередине земной шар. Шапка замечательная , но голубки имели размер где-то 100*80 , а земной шар 150*150. Но это было сплошной картинкой которая весила больше 1мб. А если бы владелец сайта вырезал голубков и земной шар , и наложил их как спрайты , а фон неба сделал градиентом css3 , или тоненькой полоской 10*220 , то эта графика вся вместе заняла бы не больше 200кб. Отсюда вывод : где можно заменить изображение стилями , нужно заменять. Это даст благоприятный результат обязательно.

А теперь с появлением одного очень полезного плагина для фотошопа , который генерирует css3 код из созданных вами стилей изображений , все сталo намногo прощe. Все что вaм нужнo , это скачать и устанoвить плaгин . Для этого нужно кликнуть на него , и появится загрузчик Adobe Extension Manager. Затем следует принять соглашение , и на этом установка закончена. Теперь запускаем фотошоп , и открываем PSD макет который находится в архиве (Example.psd). Это макет , на примере которого вы поймете принцип работы с плагином создающим css3 стили из макета. Так как я использую Adobe cs6 , на его примере и буду объяснять дальнейшие действия. Открываем как показано на изображении меню окно , в выпадающем списке расширения , и в еще одном выпадающем списке ставим галочку напротив css3ps. После этих несложных комбинаций , активное меню плагина появится на главной панели фотошопа. Так как макет у нас открыт , и в нем уже есть созданные эффекты изображения , можем приступать к генерации исходного css3 кода. Для этого нужно выделить все слои которые вы хотите преобразовать в css3 , и нажать на окошко css3ps которое появилось после установки. В итоге вас перекинет на сайт где ваши стили из картинки преобразуются в css3 код ! На этом думаю ознакомление с плагином можно считать законченным.
Вывод - связь html5 css3 адоб фотошоп установлена ! Одно без другого либо неполноценно либо теряет логический смысл. По крайней мере для нас , вебмастеров , поэтому желаю вам удачных экспериментов и побольше таких связок , которые вдохновляют и облегчают наш труд в разы !

Скачать актуальную версию плагина


dushman

#2 /11.07.2014 19:11
 64
 

Карма:  5




Уже для CS-6 есть, это хорошо.


ADMIN

#3 /12.07.2014 12:31
АДМИНИСТРАТОР   


 286
 

Карма:  20




Есть, можно использовать