Преобразуването от Photoshop дизайн в уеб страница с едно кликване - това не е точно нова идея. Веднага след като уеб дизайнери, имаше една идея, една мечта. Днес ние искаме да ви разкажа за един инструмент, който същия сън, може да се каже, отнема - приказки за CSS Hat.
CSS Hat е различна от други приложения, които може да са виждали преди. Това приложение не е пълноправен един WYSIWYG, насочена към факта, че можете да създадете уеб сайтове без писане на нито един ред код. Това приложение е насочено повече към възможността за бързо създаване на CSS3 стилове за специфични елементи с помощта на процес, който е бил популярен преди десетина години (и дори повече) директно в Photoshop. Приложение прекрасна! Наистина добра. Заслужава да продължи четене.
Запознайте се с CSS Hat
Нека поговорим за това какво точно е CSS Hat, и това, това приложение не е така. На първо място, това приложение не работи сам. Това е плъгин за Photoshop. И това не е един от най-големите тромави плъгини за Photoshop, но само малко по-непретенциозен бар, който най-вече текстово-базирани.
Това означава, че много кратък курс на обучение и по принцип, ако знаете как да работят в Photoshop, а след това този плъгин е за вас, може да се каже, че не изглежда да съществува.
Номерът, проектирана в CSS Hat, е възможността да видите слой в Photoshop, за да анализира различните му характеристики, а след това се опита да повтори тези характеристики се използва чист CSS. Очевидно е, че приставката няма да може да се възпроизведе всичко до последно, но от порядъка на способност е много впечатляващо, и със сигурност отговарят на Вашите изисквания. Нека да разгледаме някои неща, които могат да се справят плъгина:
* Layer Styles: тук, в действителност, е огромно предимство. Повечето от слой стилове в Photoshop може да бъде точно превръща в CSS (не всички, но много от тях). Някои примери за поддържаните стилове включват сенки, свети, и да попълнят градации.
* Заоблени ъгли: Ако се направи форма вектор със заоблени ъгли, в резултат на CSS кода, те ще се изпълнява от граничния радиус параметър.
* Цвят на фона и на дисплея ниво плътност: Цвят за запълване на формата, и тя ще бъде използвана в кода на CSS.
* Стайлинг текст: не толкова бързо. Вероятно, тази функция скоро ще бъде финализирана, но засега не се поддържа до края. Layer стилове, засенчване, и т.н., ще продължават да работят, но не всички параметри, свързани с шрифта.
Съвет: за да се чувстват какво е искал да използва Photoshop за генериране на CSS-кода, можете да използвате безплатната уеб приложението Layer Styles. Разбира се, че едва ли може да се сравни с CSS Hat, но това е доста забавно алтернатива.
Но аз не мога да понасям духа на WYSIWYG!
Ние знаем, че много малко хора като Dreamweaver и други приложения, които се опитват да се подценява значението на работата с кода при проектиране на уеб сайт. Ние също не ми харесва всичко това. Ние разработваме уеб сайтове със собствените си ръце и да се насладите на процеса. Ето защо, ние не трябва да мислим, че сме се преклони пред образа на развитие вашия сайт, който ще ви доведе до деградация.
CSS Hat не може да се нарече жизнено значение за тези, които не обичат да пишат код, и иска да създаде големи сайтове. Напротив, CSS шапка - инструмент за програмисти. Ако използвате този инструмент ефективно, трябва да имате солидни познания на CSS: че е възможно да го направя и как да се държат различни параметри в различни браузъри.
Разбира се, CSS Hat значително може да ви помогне в развитието на кодекса, но като цяло, инструментът ще ви предостави само една малка част от един огромен пъзел, наречен уеб сайт. И само от вас зависи от това колко добре се поставите това парче.
Така че какво да се притесняваш? Добър въпрос. Изглежда, че отговорът се крие в безспорния факт, че на CSS3, като се има предвид всички възможности, твърде тромава! Трябва да пиша много код, за да получите още по-прост резултат на това, и ако може да се използва като инструмент, който ще спести време, прекарано в развитието на кодекса, защо да не го направя?
Тук процесът е почти същото, като че ли са разработили прост бутон в Photoshop. Първо, блок наравно със заоблени ъгли 10 пиксела радиално.
След това добавете налагането на градация, от цвета и довършителни # 009ced # 0065bd.
Сега ние трябва да се направи вътрешна сянката на горната част на бутона малко изолирани.
Нека тук малко ускори процеса и преминете направо към бутона Finish. Като цяло, ние добавихме затъмнена вътрешност осветление (прилича повече на вътрешната сянка), дебелината на контура в един пиксел, и сянка. Имайте предвид, че макар и обяснение и да отнеме известно време, когато се работи в Photoshop това ще отнеме по-малко от минута.
На следващо място, CSS Hat ме вълнува!
Сега, когато имаме необходимите бутони, ние всички трябва да направите, е да се отвори панел CSS шапка, и да намерят там голяма пачка код, който може да бъде копиран.
Преди да продължим, за да проверите как изглежда в браузъра, нека ще коригира резултат. В долната част можете да видите 5 бутона. Първо копие код в клипборда, а останалите 4 - е опция, която можете да разрешите или забраните:
Моментът на истината. Как демонстрацията в сравнение с версията на Photoshop. Така че:
Както можете да видите, те не изглеждат съвсем същото. Въпреки това, в много отношения резултатите са много близки, а в много случаи, CSS-версия изглежда още по-добре. Смятаме, че това е още една подобрена версия на това, което е било направено в Photoshop!
Има някои въпроси, които трябва да знаете. Някои аспекти на Photoshop стилове просто не могат да бъдат превърнати в СГО в момента. Например, по подразбиране Photoshop на добавя Умножение режима на смесване на сенките, но тя не може да бъде преместен в CSS-кода.
Но има много различни опции, които можем да използваме, за да се улесни задачата, а останалото можем да добавим ръце. Сайт CSS Hat показва ни е наистина впечатляващи примери за които са направени с помощта на този инструмент. Например, по-долу можете да видите работата на musHo.
Истината е, че ако искате да използвате изображения за създаване на този вид ефект, можете да използвате този метод лесно. В днешния свят, където цялото съдържание, което трябва да се компресира и да се разшири (поради различните размери на екрана), ние трябва да се разработи страница изключително чрез кода, за да се избегнат проблеми с изкривявания.
За да направим това, трябва да помоли за помощ на CSS3, което ни позволява да се справите с този проблем, но това води до проблемите на използването на тези огромни платна CSS-код и браузъра представки. Когато погледнете огромните парчета код по-горе, Вашата реакция е причинена от общата ситуация в уеб дизайн, а не работата на инструмента.
Можете да изберете един голям минус на всички инструменти като CSS Hat - те могат лесно да доведе до факта, че хората забравят, че всъщност работи с кода! Когато пишете кода на ръка, вие сте много по-невежи и мисля за резултата. Опитайте се да се провери винаги резултатите, ако използвате код генератори, защото понякога може да доведе до неприятни последици.
Какво мислите за CSS Hat?
След продължително тестване, видяхме колко лесно CSS Hat генерира валиден и красива CSS код с помощта на Photoshop. Мечтата на много дизайнери се превърна в реалност, и ние вярваме, че инструментът има право да бъде и да растат.
Ако работите много CSS3 стилове, и в същото време искате да използвате Photoshop, и тогава определено трябва да опитате този инструмент. Сега тя струва само $ 20, изглежда, че дори голяма сума. Но е необходимо да се разгледа възможността, че ако функцията се появява на разработчиците Photoshop, трябва да бъдат изложени в продължение на стотици й долари.
Сега, когато вече ти казах на разположение цялата информация, че е време за вас да споделите мнението си. Има съвременни уеб дизайнерите и разработчиците трябва да обърнат внимание на този инструмент?
Свързани статии