Кажу відразу – існує лише дві програми для розробки, верстки, створення газети, журналу, буклетуі т.п.:

Quark Xpress

Не дуже я знайомий з історією цієї компанії, але програма непогана. Досі газети та журнали використовують 4-ту версію (зараз вже існує 8-ма версія), через простоту. Підтримка російської не вбудована і її треба встановлювати окремо, і до кожної своєї версії. Без додаткових установок не працюватимуть переноси слів,

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

Adobe Indesign

Adobe Indesign (Індизайн) – програма від динозавра ринку ПЗ, що створив Photoshop. Попередня програма називалася PageMaker. Виникають проблеми при встановленні, звичайно, і щоразу якісь нові, але це найкраща програма у своєму роді. Російська мова вбудована, це я про можливість перенесення слів. Я почав працювати в Indesign вже класно знаючи Quark (міг працювати практично без мишки - на клавіатурі), і навіть цей момент був врахований творцями: в Indesing можна встановити клавіатурні скорочення з Quark Exrpress 4.0 (правда, схожі тільки приблизно, але швидко звикаєш ).

Щоб усі ці програми встановлювалися та добре працювали – необхідно навести лад зі шрифтами. Для цього встановлюється якийсь (найвідоміший - Adobe Font Manager). « Біті шрифти» трапляються досить часто, часто побитим шрифтом виявляється Arial (одні з основних у Windows). Тобто очима це, природно, не видно – шрифт собі та шрифт, чудово працює в Word, наприклад, але якісь символи некоректно «намальовані» і Indesign просто не встановлюється або не запускається після встановлення.

Та й найголовніше! Програми для верстки газет та журналів ( до речі, у Quark Express та Indesign можна збирати будь-які макети для друку: флаєри, афіші, брошури, буклети) це програми для роботи з текстомале не з фото, або для компонування тексту та фото. Ці програми не мають інструментів для редагування фотографій, тому ще, як мінімум, одна обов'язкова програма- це Adobe PhotoshopУ ній готується вся растрова графіка для вашого видання.

Scribus – програма для верстки макетів друкованої продукції: книг, журналів та буклетів, брошур, візиток тощо. Скрайбус створювався як безкоштовна альтернатива дорогим платним редакторам, тому програма має безліч професійних функцій. Так, програма підтримує систему кольороподілу CMYK, керування кольором ICC. Scribus скачати безкоштовно ви можете на даному сайті.

Стандартний інтерфейс програми відрізняється простотою: з ним без проблем зможуть працювати користувачі, знайомі з подібним програмним забезпеченням. Програма працює з багатьма сучасними форматами зображень, є підтримка текстів та шрифтів в Unicode, а також підтримка гарячих клавіш. При необхідності можна задати власні «гарячі» клавіші, працювати з шарами, проводити вбудовування шрифтів і ручний кернінг.

Додаток з легкістю можуть освоїти недосвідчені користувачі, завдяки довідковій системіросійською та іншими мовами користувач зможе знайти відповіді на питання, що виникають при освоєнні програми. Scribus дозволяє створити макети з нуля, а також з використанням наявних в базі шаблонів. Крім цього, є можливість змінювати підготовлені розробниками шаблони на власний розсуд.

Перед створенням нового проекту необхідно задати робочі параметри – формат аркуша, шрифту та багато інших параметрів. Після встановлення параметрів та їх підтвердження з'являється вікно програми, в якій є робоча область, панель з набором інструментів та контекстне меню. Значки інструментів виконані якісно та інтуїтивно зрозумілі, крім того, вони зручно розташовані. За своїм функціональним можливостям Scribus мало чим відрізняється від дорогих платних програмтому на освоєння цього додаткузнадобиться деякий час.

Основні переваги Scribus

  • Широкі функціональні здібності.
  • Підтримка формату CMYK.
  • Зручна система довідок.
  • Наявність вбудованих шаблонів.
  • Підтримка гарячих кнопок.

Функціонал програми дозволяє створювати документи в форматі PDF. Також є можливість імпорту та експорту документації з формату SVG, PDF та EPS. Створені макети готові до друку на професійному обладнанні.

2 голоси

Вітаю вас на моєму блогу сайт. Сьогодні поговоримо про те, яка потрібна програма для html верстки. Деякі, особливо початківці, вебмайстри можуть заперечити. Навіщо використовувати додатковий софт, якщо можна обійтися будь-яким наявним у системі текстовим редакторомнаприклад, блокнотом? Так це так, тільки працювати буде незручно.

Верстка відбувається набагато швидше, якщо використовується спеціальна програма, що має додаткові можливості, що значно полегшують процес створення сайту. Розглянемо це докладніше.

Що це таке

Верстка – це розташування блоків, заголовків, таблиць, зображень та інших елементів на сторінці. Вона буває таблична.

Розглянемо на прикладі двоколонкової верстки із заголовком (шапка) та нижньою частиною (футер).

У header розташовується логотип компанії. Потім йде область з основним контентом, поділена на дві колонки. Ліва використовується для розміщення меню, сайдбар і так далі. Права – для основного контенту.

Футер чи підвал потрібен, як правило, для додавання контактної інформаціїпро власника сайту.

Як бачите, вийшов макет, без контенту, але у нього є загальна структура. Це і є верстка. Створюється на html та css, за допомогою спеціальних програм. Хотілося відзначити, що Євген Попов має хороший безкоштовний курс про те, як освоїти html і css .


Brackets

Напевно, один із найкращих редакторівз відкритим вихідним кодом. Має кілька цікавих особливостей:

Брекетс – це чудовий редактор, який підійде як новачкам, так і професіоналам. Щоб скачати його, перейдіть за адресою brackets.io .

Хотілося б зазначити, що під час створення інтернет-проекту однієї програми для верстки буде недостатньо. Пропоную вам ознайомитись з .

Sublime Text

Розглянемо основні можливості Sublime Text :

  • Міні-карта для зручного переміщення за кодом;
  • Ваші особисті налаштування зберігаються у спеціальній папці;
  • Наявність плагінів;
  • Працює на Віндовс та Mac os.

Macromedia Dreamweaver

DW один із найстаріших редакторів, який користується великою популярністю тому що:

  • в ньому можна одночасно переглянути дизайн та код;
  • є можливість використовувати підказку;
  • зручно організовано пошук та заміну символів;
  • на офіційному сайті можна знайти багато доповнень та плагінів до DW.
  • потужний візуальний редактордозволяє без написання коду створити сторінку.
  • перегляд онлайн.

Працювати із ним досить складно. Потрібен час вивчення всіх можливостей. Підійде професіоналам, особливо якщо потрібно швидко отримати HTML-код створеної сторінки.

Visual Studio Code

Visual Studio Code розрахований на людей знайомих із веб-програмуванням.

Має такі ж можливості, як і перелічені вище редактори. Окремо хотілося відзначити інструмент Visual Studio Code, який використовується для створення веб-додатків на JavaScript, Node.js, TypeScript і т.д. Програма безкоштовна.

Notepad ++

Безкоштовний редактор з відкритим кодом. Його функціонал розширюється за допомогою модулів. Працює швидко, навіть якщо встановлено багато додаткових плагінів. Має вбудовану функцію підсвічування вихідного коду.

Якщо ви зацікавилися сайтобудуванням, то без додаткової літератури вам не обійтися. Рекомендую ознайомитись з моєю з цієї теми.

Aptana Studio 3

Потужний та безкоштовний інструмент Aptana Studio 3 який підтримує роботу з HTML, CSS, PHP, JavaScript, Ruby. Підійде до створення інтернет-проекту будь-якого рівня складності. У ньому немає нічого зайвого і він працює дуже швидко. Є функція підсвічування синтаксису. Можна сміливо сказати, що це безкоштовна альтернатива DW.

Bootstrap Studio

Конструктор типу « drag and drop» для фреймворку Бутстрап . Розробники додали до редактора величезна кількістьдодаткових модулів; . Дозволяє протестувати, як виглядатиме сторінка на різних пристроях. Редактор не є безкоштовним, але це хороша інвестиція для будь-якого серйозного розробника.

Atom

Редактор створено відомою командою GitHub. Має такі ж можливості, як програми, описані вище. Atom - Софт із відкритим вихідним кодом. Тому ви самі зможете створювати, редагувати існуючі модулі, або писати свої. Ось пакети, що входять до дистрибутиву:

  • Автодоповнення для html та css;
  • Створення сніпетів;
  • Підсвічування парних дужок;
  • Зручний пошук та заміна.

Що робити, якщо ви не хочете витрачати час на вивчення, а результат потрібен швидко? У такому разі зверніться до фахівців, які за прийнятні гроші зможуть вирішити ваше завдання. Для цього хочу запропонувати вам цікавий сервіс Kwork .


Висновок

Кожен із описаних вище редакторів пропонує можливості для швидкого написання коду. Різниця між ними полягає в тому, яким чином ці функції реалізовані. Я б порекомендував насамперед новачкам користуватися Brackets чи Sublime Text. Більш досвідченим вебмайстрам слід звернути увагу на Macromedia Dreamweaver ( безкоштовний курс роботи з нею) або Visual Studio Code. Вибір редактора багато в чому залежить від особистих уподобань та складності вашої роботи як розробника.

Підписуйтесь на мою групу ВКонтакте де буде багато цікавої інформації.

3 голоси

Вітаю вас у блозі. Сьогодні я вирішив підготувати корисну добірку для дизайнерів. Я відвідав найпопулярніші сайти для веб-майстрів та знайшов 50 найкращих інструментів, які допоможуть у створенні дизайну.

Представляю вашій увазі програми для веб-дизайну, найкращі онлайн-сервіси та визнані професіоналами інструменти. Не з усіма пунктами я згоден, але хто такий, щоб сперечатися з фахівцями, які працюють на таких сайтах як Нетологія , vc.ru, say-hiта інших.

Я трохи доповнив цей список від себе та розбив на категорії. Тепер уявляю його вашій увазі.

Базові програми

Звичайно, жоден веб-розробник поки не може обійтися без стандартного наборувід Adobe, через який і ведуться усі роботи. Зараз кінець 2016 і багато професіоналів стверджують, що програма, що набирає популярності Sketch , Ось вже кілька років витісняє звичний для багатьох Photoshop, ось-ось вже зробить це. У 2017 році всі ми активно вивчатимемо саме цю програму.

Це навіть незважаючи на те, що її ще немає російською мовою і підходить тільки для Mac OS. Більшість професіоналів стверджують, що для дизайну інтерфейсів вона підходить набагато краще, ніж фотошоп.

Якщо говорити про інші продукти Adobe, вивчати їх чи ні – вирішувати вам. Проте вони все ще присутні в списках.

  • Illustrator як найкращий інструментдля роботи з векторною графікою та створення ілюстрацій.
  • InDesign як оптимальна утиліта для поліграфії.
  • Adobe Muse як ідеальна платформа для створення

Крім продукції Adobe, фахівці рекомендують звернути увагу на інші марки та їх продукти. Macaw визнається однією з найпопулярніших програм для веб-дизайну. На відміну від Sketch, вона підходить для Віндовс і дозволяє програмувати без знання коду. Вона сама автоматично генерує. Завантажити її можна безкоштовно прямо із офіційного сайту. Правда тільки на англійською мовою.

Видання Creative Bloq як альтернатива Adobe Muse пропонує подивитися інший сучасний сервіс Pinegrow Він підходить для малювання будь-якого сайту з наступним автоматичним перетворенням картинки в код. Цього ж можна досягти і на Jetstrap.

Ну а якщо вам потрібно попрацювати з додатками, то вам швидше допоможе Foundation for Apps .

Банк графіки

Будь-якому дизайнеру потрібна графіка. Якщо малювати все самому, це займе багато часу. Деякі елементи можна замовити у когось іншого, а можна придбати або забрати готові картинки з банків. Тирити хороший дизайнерніколи не стане, а ось скачати з хорошого сайту – чому б і ні.

Наприклад, на endlessicons.com можна знайти іконки, а на coverr.co відеообкладинки.

на freepik.com і IconStore можна знайти багато безкоштовних зображень. Вектор і навіть PSD-макетів. Від себе можу запропонувати Photoshop-master і Pixabay .

Stripemania.com – швидко згенерує графіку. Додаєте свої кольори та отримуєте смугасту картинку. Бажаєте створити свій анімований фон з плавним переходом кольору? Із цим допоможе впоратися сайт gradient-animator.com . Він не лише покаже в режимі реального часу результат, а й створить код, який залишиться лише вставити на сайт.

Findguidelin.es це збірка, на якій можна знайти іконки та всю інформацію для дизайнерів про популярні бренди: WatsApp, Facebook, Вконтакт і так далі.

Конструктор логотипів та фавіконів

Мене здивувало, але на багатьох популярних та престижних сайтах для дизайнерів можна знайти посилання на сервіс, що допомагає . На Нетології, наприклад, пропонують withoomph.com або designrails.com . Я віддаю перевагу Логастер .

Для швидкого створення можете скористатися порталом www.favicon.cc . Про нього я вже писав. Гарна штука.

Робота з кольором

Поганий той дизайнер, який не довіряє допомоги професійних сервісів для створення найкращого поєднання кольорів. Для цього в інтернеті можна знайти багато ресурсів. Мені, наприклад, подобається ColorScheme .

Сервіс Material Palette пропонує вибрати два кольори, а решту схеми вона добудує за вас: шрифти, роздільники і так далі.

на 0to255можна переглянути різні відтінки, хоча у вас є і російська альтернатива - Яндекс.

Якщо ви побачили гарну картинку, то можете за допомогою сервісу pictaculous.comвитягти з неї колірну схему. До речі, дуже допомагає точно вирішити, чи варто використовувати на своєму порталі те чи інше зображення. Якщо воно не вдало поєднується з основою схемою, то відповідь очевидна.

Робота зі шрифтами

Перший і найкращий ресурс для роботи з шрифтами Google Fonts. Це величезна колекція шрифтів, у тому числі і російською. Вибирати зручно, використовувати легко.

Щоб підібрати ідеальне поєднання шрифтів, фахівці рекомендую скористатися сервісом: canva.com/font-combinations або typewolf.com .

Вам також може стати в нагоді розширення для браузера fontface.ninja . Знаходьте гарний шрифт, наводьте на нього мишею та отримуєте інформацію. Залишиться лише знайти його.

А в онлайн-редакторі на сайті prototypo.io ви можете трохи його змінити та зробити унікальним.

Завершальний етап

Коли проект готовий, потрібно перевірити, як все буде виглядати у стандартних браузерах з комп'ютерів та на екрані мобільного телефону. Resizemybrowser.com допоможе зробити це швидко.

За допомогою сервісу dunnnk.com ви можете вставити свій скріншот у тисячі зображень телефонів та комп'ютерів і подивитися як ваш сайт буде виглядати на різних гаджетах з кількох ракурсів.

Дуже корисний список розміщується на сайті webdesignerschecklist.com . Чи все ви зробили правильно, чи можна складати проект? Просто розставте галочки і переконайтеся, що нічого не забули. Жаль, але сервіс підійде тільки для тих, хто володіє англійською.

Якщо, крім дизайну, ви займаєтеся ще й версткою, можете вбудувати в код утиліту tota11y . Вона підсвітить помилки.

Ну і не забувайте про розвиток. Думаю, що будь-якому дизайнеру буде корисно вибрати курс із знань, що бракують. команди Photoshop-Master .


Курси для дизайнерів від PhotoshopMaster.

Крім цього, пропоную вам підписатися на розсилку мого блогу та групу Вконтакте. Це дозволить ні на секунду не зупинятися у дизайн-розвитку та щодня удосконалюватися.

От і все. До нових зустрічей та удачі.

Отже, давайте визначимося: інструмент потрібен, щоб прискорити роботу. Тобто вам не потрібно досконало освоювати весь функціонал, вам потрібно навчитися швидко працювати. Який би інструмент ви не вибрали, вивчіть ключові можливостіта освойте всі гарячі клавіші.

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

Мал. 7.0: Свій сайт я спроектував за допомогою декількох базових інструментів, одного шрифту та трьох кольорів.

Коли ви освоїтеся у своєму інструменті, зможете швидко тестувати різні ідеї (це допоможе вам домагатися якіснішого результату) і закінчувати роботу вчасно (а це ощасливить ваших клієнтів і роботодавців!).

Якщо ви тільки починаєте вивчати дизайн або давно хочете перейти на інший інструмент, раджу поекспериментувати з кількома варіантами та вибрати найзручніший. У всіх нас свій життєвий досвід та свої звички. Якщо якась програма вам з якихось причин сподобалася, швидше за все, ви освоїте її набагато швидше.

Важливо розуміти, що в якийсь момент вам, можливо, доведеться перейти на інший інструмент. Більшість із нас роками використовували Photoshop, тому що на ринку не було альтернатив. За останні кілька років ситуація докорінно змінилася.

Дизайн в Інтернеті давно перестав бути статичним, і ми намагаємося заповнити пробіл між дизайном і кодом. Найімовірніше, найближчим часом з'явиться безліч нових можливостей та навіть інструментів.

Популярні програми для дизайну

При виборі інструменту для дизайну важливу роль відіграє не тільки швидкість та якість самої програми, але й її популярність у професійному середовищі. Вам буде простіше працювати з іншими дизайнерами та розробниками (наприклад, в рамках масштабного проекту), якщо ви використовуєте той самий софт.

1. Sketch- $99/рік (Тільки під Mac)


Рис 7.1: Sketch

Для більшості поточних проектів я використовую Sketch. Інструмент дуже швидкий, інтуїтивний і досить простий у використанні (без проблем перейшов на нього з Photoshop). Sketch - одна з найпопулярніших програм для дизайну, так що більшість розробників і дизайнерів з ним знайомі.

У Sketch є все, що потрібно для дизайну: напрямні, сітки, символи, трансформація зображень у перспективі (для перегляду дизайну на iOS), векторне редагування, прототипування, бібліотеки, експорт активів, клауд (щоб ділитися дизайнами та бібліотеками) та навіть експорт коду . А ще до нього є маса плагінів та ресурсів.

Найбільший недолік Sketch – він працює тільки на Mac. Однак, можна експортувати проекти під такі програми як InVision і Zeplin , щоб створювати специфікації та посібники для розробників.

2. Figma– Безкоштовно або $12/міс (веб-додаток)


Рис 7.2: Figma

Figma - це відносно нова програмадля дизайну. Мабуть, це найголовніший конкурент Sketch – і він росте дуже швидко. У Фігмі є ті самі функції, що і в Sketch - плюс кілька дизайнерів можу працювати над одним проектом одночасно.

Найкрутіше, що Фігма абсолютно безкоштовна, якщо у вас до трьох проектів, а всього за 12 доларів на місяць ви відкриєте всі функції та зможете створити нескінченну кількість проектів. Програма працює прямо в браузері - отже, практично на будь-якій операційній системі. Інтерфейс користувача нагадує інтерфейс Sketch і Adobe XD: якщо ці інструменти вам знайомі, то навіть нічого освоювати не доведеться.

Це відмінний варіант, якщо ви дизайнер-початківець і хотіли б спробувати свої сили, не вкладаючись поки в дороге ПЗ. Я користувався Фігмою у кількох своїх проектах і мені працювалося дуже просто та швидко.

3. Adobe XD– Безкоштовно (Mac та Windows)


Рис 7.3: Adobe XD

Adobe XD – це ще один сильний гравець у світі професійних програм для дизайну. Мені здається, він відмінно підходить для UI дизайну, створення вайрфреймів і прототипування - правда, в порівнянні з Sketch або Figma йому не вистачає кількох функцій.

Плюс у тому, що інструмент безкоштовний як під Mac, так і під Windows (хоча, можливо, буде платним, коли його доведуть до пуття). Крім того, це лінійка продуктів Adobe - так що ви зможете обмінюватися активами з іншими інструментами, наприклад Photoshop або Illustrator.

Інтерфейс дуже схожий на Sketch і Figma, тому можна одночасно використовувати відразу три інструменти - і без проблем перемикатися між ними (хіба що деякі гарячі клавіші відрізняються!).

4. InVision Studio- Безкоштовно (бета версія, з можливістю раннього доступу)


Рис 7.4: InVision Studio

InVision Studio – це новий фул-стек інструмент, який все ще на стадії бети, але виглядає багатообіцяюче. Інтерфейс – копія Sketch та Figma, які вже стали сучасним стандартом інструментів для дизайну.

Я трохи поекспериментував з InVision Studio і, оскільки у мене в цілому хороші враження від інших продуктів InVision, я впевнений, що на хлопців чекає успіх, коли вийде офіційна версія.

5. Webflow– Безкоштовно або $16/міс (веб-додаток)


Рис 7.5: Webflow

Webflow - це фул-стек інструмент для створення функціональних та адаптивних сайтів, які можна розміщувати прямо на їхній платформі (або експортувати та розмістити десь ще).

Я не фанат інструментів у стилі “дизайн у код”, тому що зазвичай згенерований код не дуже добре показує себе у справі плюс з ним складно працювати. Однак, Webflow дуже непоганий. Ви повністю контролюєте CSS код, плюс інструмент показує, як працює HTML та CSS, тому що всі елементи дизайну у браузері поводяться так, як потрібно.

Я думаю, що Webflow чудово підійде для створення швидких прототипів, простих сайтів, односторінок та ін. Багато моїх знайомих професійних дизайнерів використовують Webflow - так що варто до нього придивитися!

6. Adobe Photoshop– $20.99/міс або у складі Creative Cloud ($52.99/міс)


Рис 7.6: Adobe Photoshop

Я не випадково поставив Photoshop у кінець списку. Фотошоп – дуже популярна програма для дизайну сайтів, але він програє битву зі Sketch, Figma та іншими інструментами. Якщо ви досі використовуєте Фотошоп - це нормально, але будьте готові переїхати в інший інструмент у найближчому майбутньому.

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

Тим не менш, я все ще користуюсь Фотошопом для роботи з фотографіями, створення графіки та обробки ілюстрацій.


Рис 7.7: Швидке порівняння інтерфейсів Sketch, Figma та Adobe XD interfaces. Подивіться, як вони схожі!

Інші інструменти, які я використовую у роботі:

Ось повний списокінструментів, які я використовую у процесі роботи.