Программа для веб дизайна – 9 интересных сервисов для веб-дизайнера. Специальная подборка / Блог компании Pixli / Хабр
23.08.2016 
Советы художника
обзор 50 лучших на русском языке
Приветствую вас у себя в блоге. Сегодня я решил подготовить полезную подборку для дизайнеров. Я посетил самые популярные сайты для веб-мастеров и нашел 50 лучших инструментов, которые помогут в создании дизайна.
Представляю вашему вниманию программы для веб дизайна, лучшие онлайн-сервисы и признанные профессионалами инструменты. Не со всеми пунктами я согласен, но кто я такой, чтобы спорить со специалистами, работающими на таких сайтах как Нетология, vc.ru, say-hi и других.
Я немного дополнил этот список от себя и разбил на категории. Теперь представляю его вашему вниманию.
Базовые программы
Конечно, ни один веб-разработчик пока не может обойтись без стандартного набора от Adobe, через который и ведутся все работы. Сейчас конец 2016 и многие профессионалы утверждают, что набирающая популярность программа Sketch
Это даже несмотря на то, что ее еще нет на русском языке и подходит она только для Mac OS. Большинство профессионалов утверждают, что для дизайна интерфейсов она подходит куда лучше, чем фотошоп.
Если говорить о других продуктах Adobe, то изучать их или нет – решать вам. И тем не менее они все еще присутствуют в списках.
- Illustrator как лучший инструмент для работы с векторной графикой и создания иллюстраций.
- InDesign, как оптимальная утилита для верстки полиграфии.
- Adobe Muse как идеальная платформа для создания одностраничных сайтов.
Помимо продукции Adobe профессионалы рекомендуют обратить внимание на другие марки и их продукты. Macaw признается одной из самых популярных программ для веб-дизайна. В отличие от Sketch она подходит для Виндовс и позволяет программировать без знания кода. Она сама автоматически генерирует html и css. Скачать ее можно бесплатно прямо с официального сайта. Правда только на английском языке.
Издание 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. Все ли вы сделали верно, можно ли сдавать проект? Просто расставьте галочки и удостоверьтесь, что ничего не забыли. Жаль, но сервис подойдет только для тех, кто владеет английским.
deSVG поможет убрать лишний код, если помимо дизайна вы занимаетесь еще и версткой. Как вариант вы можете встроить в код утилиту tota11y. Она подсветит ошибки.
Ну и не забывайте, про развитие. Думаю, что любому дизайнеру будет полезно посмотреть курс «Секреты веб-дизайна». Он поможет узнать что-то новое или систематизировать уже полученные знания.
Помимо этого, предлагаю вам подписаться на рассылку моего блога. Это позволит ни на секунду не останавливаться в дизайн-развитии и каждый день совершенствоваться.
Ну вот и все. До новых встреч и удачи.
start-luck.ru
Программы для веб-дизайнера: где рисовать сайты? | GeekBrains
Перед тем, как читать дальше, настоятельно рекомендую убедиться в том, что вы правильно понимаете, что такое «веб-дизайн». Ведь это не вёрстка и не программирование. И точно не создание сайта под ключ. Поэтому программы Dreamweaver, Muse, Webflow и прочие автоматически отпадают.
Также хочется отметить, что для рисования сайтов НЕ подходят графические программы:
- Illustrator — лучше всего подходит для рисования векторных иллюстраций и последующей продажи на фотобанках;
- InDesign — оптимальный софт для дизайна и вёстки различной полиграфии.
Хорошему веб-дизайнеру, как и художнику, без качественных инструментов труда работать очень сложно. Если пейзажист, к примеру, использует кисти и краски, то создатель эффектных сайтов – специальные программы. Одни модернизируются, другие постепенно уходят в небытие.
Лучшая программа для веб-дизайна: Photoshop (фотошоп)?
На самом деле начинающему веб-дизайнеру для рисования первых простых сайтов «по уши» хватит фотошопа и его возможностей.
Если вы ещё не знакомы с этой программой, то обучение веб-дизайну стоит начать именно с неё.
Также есть множество аналоговов фотошопа. Даже существуют онлайн-версии, где функционал урезан до безобразия, много рекламы и постоянные глюки. Такие сайты подойдут лишь школьникам для редактирования своих фото. Давайте разберём плюсы и минусы использования программы Photoshop для рисования сайтов:
Плюсы:
- Все заказчики и верстальщики привыкли к файлам в формате PSD, поэтому у вас не возникнет сложностей, которые могут возникнуть, если вы будете рисовать сайт в иллюстраторе или CorelDraw.
- Изучить Photoshop не сложно, ведь изначально программа затачивалась под обработку фотографий, поэтому веб-дизайнеру не нужно знать весь её функционал.
- Для программы Photoshop есть много полезных плагинов, скриптов, стилей, шаблонов и прочих «примочек», которые помогут ускорить процесс разработки дизайна сайта.
Минусы:
- Программа платная. Разумеется вы можете скачать Photoshop с торрентов и быть пиратом, но это уже на вашей совести.
- Программа особо не развивается в сторону веб-дизайна. Вполне возможно, что конкурирующий софт в скором времени просто превзойдёт её по функционалу и удобству.
Sketch — будущее веб-дизайна?
Также набирает популярность программа Sketch. Но эта программа заточена исключительно под дизайн интерфейсов, а это лишь небольшая часть всех заказов на рынке и эти заказы совершенно не для «новичков». Вы сможете установить её себе на компьютер только если у вас будет операционная система MAC OSx.
Для того, чтобы научиться рисовать удобные сайты, необходимо «переболеть» отрисовкой «гениальных творений» состоящих из миллиона картинок и цветов, неудобных и непонятных никому кроме вас. Через это проходят все начинающие веб-дизайнеры за исключением тех, кто раньше занимался вёрсткой или программированием, т. к. они уже намучались с такими горе-дизайнерами и никогда не сделают подобных шедевров.
Sketch не перестаёт радовать новыми функциями. Сервис развивается буквально на глазах и по праву считается одним из лучших на сегодня помощников для веб-дизайнера. Как минимум радует тот факт, что ресурс вобрал всю логику CSS 3. Продолжая развиваться в этом направлении, он обещает светлое будущее в сфере декоративного оформления веб-страниц. Sketch – создана для тех, кто стремится к совершенному цифровому дизайну.
Инструменты веб-дизайнера, актуальные для 2016-2017 годов.
Pixate
Удобный сервис для визуального прототипирования. Веб-версия позволяет создавать анимацию для мобильных устройств на базе iOS и Android. А настольное приложение для Windows и Mac. В Pixate много разноплановой встроенной анимации и интерактивных жестов. Также есть библиотека скриптов. Для продвинутых дизайнеров, которым мало шаблонных инструментов, предусмотрена возможность создания авторских программ на JavaScript. Сервис постоянно развивается, что сделало его ТОП-овым для западноевропейских и американских веб-дизайнеров. В среде отечественных специалистов он только набирает популярность.
Affinity (for Mac OSx)
По мнению профессиональных веб-дизайнеров, этот редактор вскоре заставит забыть о Photoshop. И не только потому, что его стоимость на порядок ниже популярного аналога. Его функционал объективно превосходит софтверную легенду. Программа работает с CMYK и LAB, поддерживает PSD и обработку RAW. Особенно впечатляет работа с векторной графикой, качественное масштабирование и ещё некоторые «фишки». Инструмент заточен только под «яблочную» ОС и становится всё более популярным в профессиональной среде.
Avocode
Программа полностью совместима с Photoshop. Позволяет превратить эскиз сайта (в формате psd или sketch) в интерактивную страницу. Незаменима для тех, кто занимается вёрсткой и разработкой мобильных приложений. Используя Avocode с исходниками удастся работать непосредственно через веб-интерфейс или десктоп-приложение.
Antetype
Многофункциональная среда для разработчиков пользовательского интерфейса самого разного формата с учётом правил UX дизайна. Ресурс радует объёмной библиотекой виджетов и гибкой отзывчивостью. А встроенный учебник образцов проектов позволяет быстро приступить к работе даже новичку. Среди плюшек Antetype можно обозначить возможность настроить свойства экрана, стиль, ресурсы, истории.
Современному веб-дизайнеру необходимо смотреть на несколько шагов вперед, чтобы оставаться на плаву и удерживать свою репутацию в быстро изменяющемся IT-пространстве. В 2016 многие веб-дизайнеры начнут переходить на новые и усовершенствованные инструменты для веб-дизайна. О них мы расскажем на бесплатном интенсиве по веб-дизайну.
А вы используете хоть один из этих инструментов в своей работе? Может есть другие альтернативные варианты? Пишите в комментариях!
geekbrains.ru
14 инструментов для веб-дизайна и веб-разработки на 2014 год / Хабр
Вместе с WEB движущимся семимильными шагами (адаптивным дизайном, CSS препроцессорами, постпроцессорами и другими вещами) может оказаться проблемой попытка не отставать от чего-то нового и полезного.Ниже Вы найдете 14 инструментов, 7 для веб-дизайнеров и 7 для веб-разработчиков, которые помогут веб-сайту перерасти из концепции в действительность.
Для веб-дизайнеров
1. Adobe Creative Cloud
Разумеется, что Photoshop и Illustrator являются двумя важными инструментами для любого веб-дизайнера. Вместе с Creative Cloud у вас будет доступ к обоим из них, и плюс к некоторым другим инструментам, таких как: Typekit, InDesign и Kuler. Все инструменты Creative Cloud очень хорошо взаимодействуют друг с другом, и должны иметься у любого дизайнера.
2. UI Faces
Поскольку поиск нужных картинок для макета может быть трудоемок, UI Faces собирает аватары через Twitter и делает их доступными для использования в вашем дизайне.
3. 0to255
Этот инструмент я использую почти каждый день. 0to255 упрощает поиск разновидностей выбранного цвета. Это идеальный инструмент для выделений, активных состояний и подсвечиваний.
4. Google Fonts
Типографика в WEB проделала длинный путь со дней Arial, Courier и Georgia. Google Fonts это огромная библиотека свободных, готовых шрифтов которые могут быть загружены на стадии макета.
5. Samuel L. Ipsum
Поклонникам фильма «Змеиный полёт», я представляю «Samuel L. Ipsum» (Сэмюель Л. Ipsum). Это Lorem Ipsum генератор цитат. Имейте в виду, существует три варианта на выбор: цитаты ненормативной лексики ладена из фильмов Джексона, чистые цитаты из фильмов Джексона и обычные ol’ lorem ipsum.
6. Responsive Sketch Pad
Шаблоны пользовательского интерфейса Responsive Sketch Pad ваш хороший спутник, когда вы находитесь на этапе предварительного планирования. Точечная сетка упрощает придерживание линий и визуализиацию сайта в браузере и на мобильном устройстве.
7. Macaw
Этот инструмент еще не выпущен, но он уже выглядит довольно интересным предложение. Macaw обещает ту же гибкость, что и редактор изображений, но при этом будет происходить написание семантического HTML и лаконичного CSS.
Для веб-разработчиков
1. Coda 2
Это мой любимый из-за его «все-в-одном» редактор кода, FTP клиент и встроенный MySQL редактор. Coda 2 также включает в себя справочную библиотеку по программированию и визуальный CSS-редактор.
2. CSS Pre-processor
В зависимости от того, что вы разрабатываете, здесь вам поможет руководство. SASS требует, чтобы работал Ruby (встроен в любой Mac) и и на базовом уровне делает тоже что и LESS, другой препроцессор. Оба являются отличными инструментами и предлагают экономящие время функции, такие как вложенные правила, смешивания, переменные и логику.
3. Front-end Framework
Снова, есть два отличных предложения которые рассмотрим. Вместе Twitter Bootstrap и Zurb’s Foundation поможет сделать прототипирование и разработку для современного WEB быстрее и проще. Оба пакета это адаптивная сеточная система с элементами стилей и javascript по умолчанию, для реализации богатого WEB.
4. Browserstack
Это фаворит из всего набора. Browserstack позволяет вам тестировать завершенный дизайн в любом браузере и на любой конфигурации, о которой вы могли только подумать. Это удобный инструмент, если вы все еще должны поддерживать IE7 и IE8 в ваших проектах.
5. Pingdom
Раскройте DNS и проблемы загрузки с Pingdom. Вы увидите, сколько времени забирает загрузка различных ресурсов на вашем сайте вместе с общим показателем производительности.
6. Chrome Developer Tools
Если вы используете один из инструментом входящим в Chrome Developer Toolkit, то пусть это будет называться веб-инспектор. Вместе с инспектором вы сможете быстро диагностировать проблемы и внести изменения в разметку. Вы также можете эффективно использовать консоль для логирования и взаимодействия с JavaScript.
7. MAMP Pro
С легкостью крутите сайты локально. MAMP Pro позволяет легко установить и администрировать Apache, MySQL и среду разработки PHP. Если вы работаете над большим количество сайтов для клиентов, вам необходимо иметь такой сервер.
habr.com
10 Бесплатных приложений веб-дизайна для ПК и мобильных устройств
Автор: Елизавета Гуменюк (liza1510) Рейтинг топика: 0 Просто люблю писать, переводить и давать людям возможность читать интересный контент. И пусть я не всегда идеальна — есть к чему стремиться!!!Программное обеспечение играет важную роль в создании веб-дизайна. Может именно поэтому различные приложения набирают все большую популярность в последнее время. А какие из них лучшие? Давайте выясним.
Создавайте веб-сайты для настольных ПК, телефонов и планшетов с этими бесплатными программами веб-дизайна.
1. CoffeeCup Free HTML Editor
Сделайте свой собственный профессиональный веб-сайт в течение нескольких минут
Платные продукты CoffeeCup – превосходны, но и программа CoffeeCup Free HTML Editor так же великолепна. Она сочетает в себе кодирование и дизайн WYSIWYG. И все это в приложении, которое быстро работает, простое в освоении и может создавать отличные сайты.
Конечно, ему не хватает некоторых функций, как у его собратьев. Например, такие как Color Schemer и встроенная загрузка FTP, были предназначены для платных продуктов. Однако в отличие от некоторых конкурентов приложение находится в постоянном развитии, чтобы быть актуальным.
Если вы ищете приложение для того, чтобы «делать все» на Windows, то вам стоит обратить внимание на CoffeeCup Free HTML Editor.
2. PSPad
Мощный редактор с дополнительными инструментами для веб-разработчиков
PSPad может не быть привлекательным, но он довольно хорош. Внутри вызывающе олдскульного интерфейса Windows — мощный редактор для программиста, который включает в себя FTP-клиент для редактирования сервера, шаблоны распространенных языков, таких как HTML, PHP и VBScript и многие другие, а также многократное редактирование документов и макросы, которые можно использовать для создания и запуска часто используемых кодов.
Это приложение не для людей, которые предпочитают интерфейс WYSIWYG, но если вы опытный кодер, то для вас это отличный инструмент.
3. Google Web Designer
Создавайте потрясающие анимации HTML5 для вашего сайта
Название Google Web Designer немного вводит в заблуждение, потому как на самом деле это проектировщик рекламы и анимации. Он наилучшим образом подходит для людей, которым нужно создавать анимированные кросс-платформенные элементы, используемые затем в другой программе. Если вы один из таких людей, то вам, несомненно, многое понравится, включая интеграцию с Google Drive, 3D-объекты, слои и события.
Стоит отметить, что приложение способно выдавать действительно впечатляющие результаты.
4. KompoZer
Старый конструктор сайтов, но по-прежнему любимый
Мы питаем некоторую слабость к KompoZer, который является ответвлением Mozilla, созданной Firefox. Но если Firefox находится в постоянном развитии с самого первого своего дня, то KompoZer не обновлялся с 2010 года.
Это серьезная проблема, потому что языки, используемые в Интернете, не стояли на месте. В то время как по-прежнему можно создавать сайты в KompoZer, мы все же думаем, что существуют способы куда легче и лучше сделать это. Например, приложение BlueGriffon, которое также основано на Firefox и предлагает более современный подход. Однако, в отличие от KompoZer, BlueGriffon требует платной лицензии для его наиболее полезных функций.
5. SynWrite
Редактор на основе текста для более опытных веб-разработчиков
Приложение будет излишним для начинающих, но если вы опытный кодер, то SynWrite достойно внимания, и не только потому, что оно настолько мало, что его можно носить на скромной флешке.
Это полнофункциональный редактор кода с возможностью записи макросов, плагинами, историей буфера обмена, текстовыми клипами, помощниками, цветовой палитрой, предпросмотром, поиском и заменой файлов. Приложение было разработано для всех видов работ от создания макета до программирования, и это хороший выбор для опытных пользователей.
6. Mobirise Website Builder
Создавайте отзывчивые веб-сайты, которые отлично выглядят на ПК и мобильных устройствах
Вы должны полюбить приложение, реклама которого говорит «Создание хорошо разработанных веб-сайтов — это реальное удовольствие». Mobirise может создать красивые, отзывчивые сайты с минимальными затратами усилий.
Как это работает: вы выбираете тип блока, который вы хотите, перетаскиваете его, куда вы хотите, и меняете контент по умолчанию в соответствии с вашими требованиями. Вы можете легко увидеть, как ваш дизайн будет работать на настольном компьютере, смартфоне или планшете, и вы не обязаны использовать предопределенные стили если сами того не хотите.
7. TOWeb
Еще один инструмент адаптивного дизайна, но помните об ограничениях
Бесплатная версия TOWeb создана, чтобы продвинуть более мощные платные версии программы, поэтому, как и ожидалось, приложение имеет свои ограничения. Вы можете только создать один веб-сайт, а ограничение размеров составляет 10 Мб. Приложение довольно простое, основано на настраиваемых и в целом красивых шаблонах, поддерживает множество языков.
Если вы можете жить с ограничениями бесплатного приложения, TOWeb — это достойный вариант для простых сайтов.
8. Weebly Free
Простой редактор, который идеально подходит для создания вашего первого сайта
Мы избегали онлайн-сервисов в нашем обзоре, поскольку они, как правило, ориентированы на веб-разработчиков, а не на веб-дизайнеров, но Weebly немного отличается, так как он позволяет создавать содержимое ваших страниц путем перетаскивания.
Вы также получаете бесплатный хостинг и неограниченное количество страниц, и хотя вы не можете удалить брендинг Weebly, можно заплатить 5 фунтов в месяц за стартовый пакет, который позволяет вам использовать ваше собственное доменное имя.
9. openElement
Веб-конструктор сайтов, который способен на многое, но пугающий для новичков
Темный, плотный интерфейс может быть немного нерасполагающим к себе для абсолютных новичков, и его не так легко использовать, как других конкурентов. Но нет никаких сомнений в том, что openElement может предложить огромную мощность более уверенным дизайнерам.
Программа делает гораздо больше, чем большинство других приложений в режиме WYSIWYG, и в умелых руках она способна на великие дела. Однако мы все же считаем, что интерфейс является немного запутанным по сравнению с аналогичными полезными приложениями, такими как CoffeeCup Free.
10. Webflow
Стильный веб-строитель онлайн, если вы не возражаете против объявлений и ограниченных просмотров
Как и Weebly, Webflow — это приложение, которое является частью пакета платных услуг. Поэтому тут так же существуют ограничения на то, что вы можете делать с ним. Бесплатная версия не позволит вам экспортировать HTML/CSS код для использования за пределами Weblfow хостинга, ваш сайт будет содержать рекламу, нет технической поддержки, кроме обсуждений на форуме и вы ограничены 1000 просмотров страниц в месяц.
Источник
freelance.today
Программы для веб-дизайнера
Если рассматривать программы для веб-дизайнера как некий базовый пакет основных технологических приёмов и возможностей, первое, что вспомнится даже далёкому от этой профессии человеку — это продукция компании Adobe (Photoshop, Illustrator). При этом мало кто знает, что набор программ в арсенале дизайнера заметно превышает этот перечень. А освоить веб-дизайн на деле оказывается куда сложнее, чем кажется на первый взгляд.
Программы для веб-дизайнера: необходимый минимум
В перечень навыков современного веб-дизайнера входят такие элементы, как знание языков программирования CSS и HTML, умение создавать шаблоны с «нуля» и работа с готовыми исходными материалами. Но это, скорее, общая информация. На самом же деле веб-дизайнер использует в работе массу самых разнообразных инструментов.
1) Программы для работы с растровыми изображениями
К этой категории относятся программы, позволяющие редактировать графические файлы и дополнять их необходимыми спецэффектами. Именно они позволяют ретушировать фотоснимки, кадрировать их, работать с системами фильтров и слоями, а также тонировать и корректировать цвета изображения.
Среди существующих вариантов программ для веб-дизайнера к этой категории относятся:
Adobe PhotoShop
Удобный и эффективный инструмент для обработки фотоснимков. Позволяет производить манипуляции различной сложности. Среди недостатков — значительная ресурсоёмкость программы.
GIMP
Кроссплатформенный вариант аналога привычного Photoshop. Удобный интерфейс, неплохая функциональность, простота в работе.
Paint
Paint — это графический редактор для Windows, позволяющий работать с различными типами графики. Для этой программы существует немало дополнительных плагинов, заметно расширяющих её функциональные возможности.
2) Программы для работы с векторной графикой
Эта категория программ нужна для создания надписей, кнопок, прочих элементов дизайна сайта на базе существующего клипарта или «с нуля». Также с помощью этой категории программ создаются элементы дизайна для изготовления визитных карточек, бланков, фирменной печатной продукции.
Среди программ этой категории выделяют две базовые:
Adobe Illustrator
Corel DRAW
И вспомогательную «light»-версию — Corel Xara с усеченными функциональными возможностями, но гораздо меньшим «весом».
3) Браузеры
Основная функция любого браузера — просмотр веб-страниц. Но современные браузеры обладают куда более обширными функциональными возможностями. В частности, в браузерах Mozilla FireFox и Google Chrome присутствует инструмент под названием Firebug, позволяющий инспектировать составные элементы страниц сайтов и получать необходимые сведения, приобретая ценный опыт, необходимый любому веб-дизайнеру.
4) Инструменты верстки страниц
Помимо создания макетов, на веб-дизайнеров чаще всего возлагаются ещё и функции верстки страниц. И в этом случае неизбежно придётся осваивать HTML-редакторы, позволяющие работать с этим языком программирования. Самый простой и удобный из существующих — NotePad++.
5) Инструменты распознавания текста в графике
Веб-дизайн подразумевает наличие подобных функциональных возможностей. Для распознавания текста на графических носителях подойдёт программа FineReader, вполне способная справиться с поставленной задачей.
Программы для веб-дизайнера: расширенный список
Помимо базового набора программ, веб-дизайнеру могут пригодиться и другие инструменты, позволяющие решать задачи по созданию макетов и отдельных элементов сайтов.
Для определения цвета в формате RGB для любой точки экрана существуют расширения для браузеров (для Chrome — Eye Dropper), либо специальные программы — в частности, Colormania.
Для работы с анимированными графическими элементами существует специальная программа Adobe Flash, позволяющая создавать баннеры, заставки, анимированные экранные кнопки и т.д.
А для создания изображений в GIF-формате существует очень полезная программа — GIF Animator, позволяющая преобразовывать обычную картинку в нужный формат.
Для измерения различных элементов дизайна также есть удобные инструменты — от программ Code-V-Ruler и SP Ruler до расширений к браузерам (таких как Measurelt для Chrome).
Среди полнофункциональных редакторов для веб-дизайнера можно также порекомендовать такие программы как:
BlueGriffon — условно-бесплатный редактор с достаточно широким функционалом, позволяющим создавать дизайн и верстку сайта с нуля.
OpenBEXI — HTML-редактор, позволяющий создавать веб-страницы с использованием готовых модулей — виджетов. Присутствуют и настройка CSS, и возможность добавления необходимых скриптов, и протокол FTP для загрузки полученного результата на сервер.
Brackets от Adobe — редактор, позволяющий работать с javascript, HTML и CSS кодами, имеющий массу расширений и регулярно обновляющий свои возможности.
fotoredactor.com
Какие программы нужны для работы веб-дизайнера?
Хорошему веб-дизайнеру для профессиональной разработки макетов необходимо владеть навыками работы с различными программными инструментами. И это касается не только графических редакторов. В данной статье мы перечислим основные категории программ с их главным назначением именно для целей создания дизайна сайта.
Программа обработки растровой графики
Это важнейшая категория программ, которую необходимо освоить на достаточно высоком уровне. В идеале достаточно одной. Их основное назначение – редактирование графических файлов и создание самых разнообразных эффектов. Для этого класса программ в первую очередь следует освоить следующие понятия и действия:
- Гармоничная тоновая и цветовая коррекция;
- Ретушь фото;
- Инструмент кадрирования;
- Отличия структуры и работы с различными форматами графики;
- Грамотная работа с фильтрами;
- Использование слоев.
Самыми распространенными программами здесь можно назвать:
- Adobe PhotoShop — это абсолютный лидер среди графических программ подобного рода. Однако она требует достаточно больших объемов ресурсов компьютера.
- Paint.net — хорошая альтернатива фотошопу. Удобный интерфейс, где все под рукой и возможность его расширить с помощью сторонних плагинов. Работает под Windows.
- GIMP — что расшифровывается как «GNU image manipulation program». Это давно известная кроссплатформенная замена фотошопу также с мощным функциональм. Есть версия GIMPShop более приближенная к интерфейсу Photoshop.
Программа обработки векторной графики
Владение данным видом программ также будет существенным плюсом для веб-дизайнера. Они позволяют с помощью клипарта или из ничего создавать кнопки, изображения, надписи и другие элементы. При этом работа с векторной графикой принципиально отличается от работы с растровой, поэтому осваивать их необходимо по отдельности. Для тренировки можно создать в векторе себе визитки, бланки или брошюры – будет полезный плюс от изучения редактора. Здесь необходимы следующие навыки:
- Работа с графическими объектами: их наложение, группировка, создание необычных фигур;
- Навыки работы с кривыми и узлами кривых;
- Владение направляющими и работы с сеткой;
- Понимание цветовых моделей –RGB, HSB, CMYK
- Умение разместить текст на любой кривой;
- Владение эффектами;
- Градиенты и заливка, в том числе и фрактальные.
Основными представителями этого класса программ являются Corel DRAW и Adobe Illustrator. Они приблизительно равномощные по своим возможностям и используют последние достижения в области векторной графики. Однако обе эти программы достаточно тежеловесные. Более легком вариантом является Corel Xara, однако за легкость приходится платить отсутствием возможности выполнения некоторых эффектов и команд.
Программы просмотра web-страничек
Это наши привычные браузеры. Их в настоящее время достаточно много и выбрать действительно есть из чего. В стандартном наборе наиболее популярной операционной системы Windows в комплекте идет браузер Internet Explorer, однако он считается далеко не идеальным и большинство пользователей интернета предпочитают устанавливать другие продукты. Который из них лучше, сказать сложно – все современные браузеры содержат много полезных инструментов и функций, однако наибольшей популярностью пользуются Google Chrome и Mozilla FireFox. Для дизайнера они понадобятся не только для серфинга в интернете в целях поиска картинок для сайта. В них имеется специальный инструмент инспектирования элементов веб-страниц – Firebug, который позволяет много полезных сведений о строении сайта.
Простой текстовый редактор
Если ваша цель – не просто научиться отрисовывать макеты, но и программировать их для создания полноценного сайта, то здесь понадобятся знания HTML и CSS верстки. Ознакомление хотя бы с их основами будет большим плюсом для понимания строения сайтов. Для этого можно пользоваться самым простым редактором с подсветкой HTML тегов – NotePad++.
Программы распознавания текста
Достаточно часто текст представлен в виде картинки, однако это не такая большая проблема, когда под рукой есть инструмент распознавания текста. Здесь можно порекомендовать использовать FineReader, по возможности последней версии.
Некоторые специальные программы
Некоторые эффекты или действия нельзя или очень сложно выполнить в перечисленных программах, поэтому понадобятся некоторые дополнительные программки, например:
- Colormania – полезный и легкий инструмент, который позволяет в один клик определить цвет в формате RGB любой точки экрана монитора. Можно также воспользоваться расширением для браузера, например Eye Dropper для Chrome.
- Adobe Flash – известный инструмент для создания баннеров и другой анимации для сайтов, например, интерактивных кнопок, мультяшных персонажей и много других вещей.
- Линейка – позволяет замерить размер любых нужных вам элементов. Программных решений здесь множество, например SPRuler, Code-V Ruler. Можно также воспользоваться подобным расширением браузера, таким как MeasureIt (Coogle Chrome).
- GIF Animator – простая программа для создания анимированных картинок в формате gif. Хотя эту работу вполне можно выполнить и в Photoshop.
По мере накопления опыта у вас будут появляться свои любимые и привычные инструменты для работы. Это лишь рекомендуемый перечень к использованию. Не стоит их все сразу устанавливать. Для начала работы вполне достаточно иметь один из визуальных редакторов и браузер, но заняться плотным изучением из возможностей и освоением практической работы.
Вернуться назад
Статьи по теме:
www.kasper.by
| |
Новый софт на последних по нумерации страницах |
|
soft-landia.ru
Leave a Comment