Говорю сразу - существует только две программы для разработки, верстки, создания газеты, журнала, буклета и т.п.:

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 – Бесплатно or $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. Посмотрите, как они похожи!

Другие инструменты, которые я использую в работе:

Вот полный список инструментов, которые я использую в процессе работы.