Задаволены
Некалькі месяцаў таму ў Adobe адбыўся сур'ёзны прагрэс з інструментам адаптыўнага вэб-дызайну Edge Reflow CC. Гэта было стварэнне плагіна Generator, які звязвае Photoshop (вось як спампаваць Photoshop) да Edge Reflow і дазваляе хутка экспартаваць вэб-макет у Photoshop непасрэдна ў Edge Reflow без неабходнасці кадзіравання.
Раней, калі дызайнер хацеў стварыць вэб-макет, ім трэба было стварыць макет, разрэзаць яго на асобныя кампаненты і перанесці ў праграму вэб-дызайну. Гэта заняло б шмат часу.
Убудова Generator спрашчае гэты працэс.
Як гэта зрабіць
Першае, што вам трэба зрабіць, гэта загрузіць Photoshop CC, затым загрузіць і ўсталяваць Edge Reflow CC. Гэта павінна пераканацца, што ўбудова Generator працуе правільна.
Калі гэтага не адбываецца, загрузіце убудова Generator і ўсталюйце яго непасрэдна. Гэта павінна выправіць усе праблемы са злучэннем.
Далей перайдзіце ў раздзел Рэдагаваць: Налады: Убудовы. У раздзеле «Генератар» націсніце «Уключыць генератар» і ОК, каб захаваць налады.
Іншае, што трэба ведаць, гэта тое, што пры выкарыстанні Генератара гэта тое, што ён пэўны для файла, гэта значыць, што ён павінен быць уключаны для кожнага файла.
Прычына гэтага ў тым, што вы, магчыма, не хочаце, каб гэтая функцыя ўключалася ў кожным праекце.
Каб уключыць генератар для пэўнага файла, націсніце Файл: Стварыць: Актывы малюнкаў.
Пасля ўключэння Image Assets гэта стварае папку BracketsIO-актывы ў маім каталогу файлаў, як паказана тут:
Калі мы адкрываем папку BracketsIO-актывы, вы бачыце ўсе рэсурсы малюнкаў для гэтага праекта, якія былі аўтаматычна створаны для гэтага праекта.
Самае цікавае, як ствараліся гэтыя файлы. Каб атрымаць адказ, перайдзіце на панэль "Пласты".
Звярніце ўвагу, што тэчка сеткі была адкрыта. У выдзеленай вобласці вышэй вы ўбачыце, што некалькі слаёў былі названы з пашырэннем .webp. Гэта частка функцыі генератара.
Калі актывы малюнкаў уключаны, актывы ствараюцца. Мала таго, але калі вы ўнясеце змены ў любы з слаёў, гэта змяненне будзе неадкладна абноўлена ў тэчцы актываў.
Наступным этапам, калі вы будзеце задаволены сваім праектам макета, будзе стварэнне праекта Edge Reflow. Для гэтага націсніце Файл: Стварыць: праект пераплаўлення краю.
Ствараецца папка, якая змяшчае ўсе актывы для Edge Relow, якія вы зможаце адкрыць праз Edge Reflow.
Далей запусціце Edge Reflow. Звярніце ўвагу на значок Photoshop CC Connect у правым верхнім куце экрана. Націсніце на яго.
Адкрыецца дыялогавае акно. Націсніце на кнопку Photoshop Sync у левым ніжнім куце, каб сінхранізаваць Edge Reflow з Photoshop.
Выкарыстоўваючы панэль Photoshop CC Connect, вы можаце імпартаваць макет у Edge Reflow, у камплекце з усімі CSS для вашага праекта.
Як ужо згадвалася раней, калі вы ўнясеце змены ў зыходны файл Photoshop, гэтыя змены будуць абноўлены ў тэчцы актываў і праглядацца ў Edge Reflow.
Парады Edge Reflow
Важна разумець, што ўвесь тэкст файла Edge Reflow можна рэдагаваць у HTML. Пасля імпарту праекта ў Reflow вы можаце стварыць адаптыўны макет з кропкамі спынення па меры неабходнасці.
Пасля таго, як ваш макет скончаны, вы можаце выняць HTML і CSS і перанесці ўвесь праект у HTML-праграму, напрыклад Dreamweaver, каб завяршыць працэс распрацоўкі. Вы таксама можаце падзяліцца праектам з іншымі спецыялістамі ў рамках дызайнерскага працэсу.
Па сутнасці, Edge Reflow - гэта інструмент для прататыпа, дзе вы можаце хутка і лёгка эксперыментаваць з рознымі дызайнерскімі макетамі.
Калі вы ствараеце сайт, які змяшчае некалькі старонак, вы можаце імпартаваць кожную старонку гэтага дызайну ў Reflow з дапамогай панэлі Photoshop CC Connect. Спачатку адкрыйце старонку ў Photoshop, затым націсніце на кнопку "Стварыць новую старонку" ў Edge Reflow, і гэтая частка праекта будзе імпартавана.
Вы таксама можаце скарыстацца гэтым дызайнерскім злучэннем, нават калі вы працуеце толькі над выявамі. Вы б назвалі кожную выяву з адпаведным пашырэннем выявы (напрыклад .webp, .PNG, .GIF). Вы можаце дадаць гэтыя пашырэнні да слаёў, груп альбо разумных аб'ектаў. Пасля завяршэння праекта ў Photoshop вы можаце імпартаваць увесь файл у Edge Reflow.
Акрамя Photoshop, дызайнеры могуць таксама выкарыстоўваць Fireworks і Illustrator CC. Edge Reflow таксама інтэграваны з Edge Inspect і Edge Web Fonts.
Выснова
Мост паміж Photoshop і Reflow дае дызайнерам некалькі выдатных новых інструментаў і вырашае мноства дызайнерскіх задач. Гэта пазбаўляе ад неабходнасці разразаць выявы і экспартаваць фрагменты ў праграму дызайну HTML. Зразумела, гэта не ідэальна, але эфектыўна і хутка выконвае працу, для якой распрацавана.
Каб павялічыць хуткасць з дапамогай Reflow, карысна загрузіць некаторыя файлы праекта і выкарыстоўваць іх, каб убачыць, як працуе працэс. Вам спатрэбіцца файл шаблону PSD і запоўнены файл Reflow.
Словы: Натан Сігал
