Разработка макета сайта в фотошопе: Создание дизайна сайта в Photoshop

• Настройка рабочих пространств и монтажных областей
• Использование библиотек
• Советы и приемы адаптивного дизайна
• Установка точек останова
• Создание элементов навигации
• Создание текстур и фонов
• Встраивание или связывание смарт-объектов
• Создание собственных шаблонов
• Создание многоразовых элементов пользовательского интерфейса
• Сохранение и экспорт в Интернет
• Использование генератора

Уровень квалификации

2ч 48м

Продолжительность

131 123

Просмотры

Показать больше Показывай меньше

Продолжить оценку

Вы начали эту оценку ранее, но не завершили ее. Вы можете продолжить с того места, где остановились, или начать заново.

Создайте свой первый веб-макет в Photoshop

Вторник, 23 декабря 2014 г., Льюис Свифт.

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

Мы будем использовать Photoshop, который, возможно, изначально не предназначался для веб-дизайна, но который стал очень надежным и многофункциональным инструментом для создания веб-макетов.

Если вы используете последнюю версию Photoshop через платформу подписки Creative Cloud, у вас будет доступ к нескольким полезным новым функциям, которые помогут в процессе проектирования.

Сюда входят улучшенное извлечение ресурсов (для экспорта определенных частей вашего дизайна для использования при создании окончательного веб-сайта) и улучшенные руководства (для создания сетки, чтобы вы могли построить сбалансированный макет).

Содержание товара

1. Планирование — начните здесь, чтобы охватить все предварительное планирование в Photoshop, которое должно быть выполнено в первую очередь
2. Параметры документа и создание сетки — практические шаги в этом руководстве начинаются здесь
3. Ваша цветовая палитра — Цвета могут создать или разрушить дизайн, поэтому выбирайте внимательно!
4. Экспериментируя с макетами — Выберите баланс и иерархию или рискуете «сломать сетку»?
5. Изображение — поэкспериментируйте с размерами и размещением для максимального воздействия
6. Важные детали — тонкая глубина помогает визуально осмыслить ваш дизайн
7. Экспорт элементов — наконец, экспортируйте определенные графические элементы в правильный формат

Шаг 1. Планирование

Прежде всего, стоит сделать шаг назад и посмотреть на этот проект с высоты птичьего полета.Если вы разрабатываете веб-макет в Photoshop, это означает, что кто-то будет создавать этот веб-сайт, используя HTML и CSS.

Если это вы, отлично! Во время проектирования вы одновременно будете думать о будущем: «Как макет будет транслироваться в код на мобильных устройствах по сравнению с экранами большего размера? Что произойдет, если нажать на эту кнопку?» и так далее.

Однако есть определенные преимущества в том, что один человек разрабатывает, а другой пишет код.Каждый человек может на 100% сосредоточиться на своей части проекта. Обе части сложны и отнимают много времени, поэтому, имея вдвое большую рабочую силу, их легче решать. И любой проект выигрывает от участия двух мозгов, если вы хорошо работаете вместе.

Лучшее из обоих миров может быть командой из двух человек, где каждый член команды сосредоточен на своей роли, но также имеет некоторое понимание и опыт работы других. Это значительно упрощает общение и эффективную командную работу.

Итак, если вы дизайнер, подумайте о том, чтобы потратить некоторое время на изучение элементарных основ HTML и CSS. Существуют отличные образовательные онлайн-ресурсы, такие как Codecademy.com и FreeCodeCamp.com, и вы увидите, что начать работу с HTML и CSS можно всего за несколько часов.

Было бы упущением, если бы мы также не порекомендовали очный курс или семинар, чтобы вы могли воспользоваться присутствием опытного учителя, который проведет вас через множество практических упражнений.Это намного быстрее, чем бесконечно искать ответы в гугле, хотя небольшая часть этого неизбежна, когда вы работаете с технологиями!

• Адаптивный дизайн и удобство использования

Еще одна вещь, которую следует учитывать перед тем, как приступить к проектированию, — это то, как ваш веб-сайт будет выглядеть и работать на различных устройствах, от крошечных мобильных экранов до больших настольных.

Изменится ли приоритеты пользователей при просмотре вашего сайта на мобильном телефоне, возможно, в дороге, и при просмотре веб-страниц дома? Будет ли им легко выполнить намеченную задачу на вашем сайте на небольших устройствах?

Прежде чем приступить к проектированию, необходимо учесть все аспекты адаптивного дизайна и взаимодействия с пользователем. Слишком много всего, что нужно включить в это руководство, поэтому взгляните на это красивое вводное руководство, чтобы получить быстрый, но подробный обзор темы.

В идеальном мире никакая работа по визуальному дизайну не могла бы начаться без предварительной разработки глубокой контентной стратегии. Эта стратегия будет охватывать все, от текста главного героя (первого большого сообщения, которое видят посетители вашего сайта) до всех ярлыков и текста кнопок в ваших формах.

Текст на веб-сайте невероятно важен, когда речь идет о том, насколько хорошо этот веб-сайт помогает своему владельцу в достижении своих целей.Независимо от того, хотите ли вы развивать сообщество или продавать продукт, каждое слово на вашем веб-сайте будет иметь значение и должно быть тщательно подобрано.

Однако часто бывает, что дизайнерская часть проекта веб-сайта должна быть начата до того, как работа над содержанием будет завершена (или, возможно, даже начата). В этом случае вы будете проектировать с фиктивным текстом и изображениями и должны быть готовы к, возможно, другим изменениям дизайна позже.

Чтобы узнать больше о контент-стратегии, начните с просмотра таких ресурсов, как блог Copyblogger и CopyHackers.com.

Веб-копирайтинг — это огромная область, поэтому, надеюсь, вы можете оставить текст веб-сайта опытному копирайтеру, чтобы вы могли сосредоточиться на принятии хороших визуальных решений.

Создание чернового эскиза намного быстрее, чем создание прототипа с помощью любого программного обеспечения для дизайна, поэтому это важный этап любого процесса веб-дизайна. Это позволяет быстро изучить целый ряд идей.

Лучший набросок не идеален, поэтому не пытайтесь быть слишком аккуратным или аккуратным. Просто сосредоточьтесь на быстром выделении нескольких десятков идей макета, чтобы вы могли подумать, может ли каждая из них соответствовать критериям вашего проекта в отношении удобства использования и контента.

Чтобы сделать этап наброска еще более эффективным, вам может пригодиться блокнот, который уже содержит схемы браузера. Вот ссылка для загрузки бесплатного набора печатных листов с эскизами веб-дизайна.

• Типографика и другие важные элементы

Определенные части веб-дизайна настолько важны, что их часто полезно рассматривать отдельно. Таким образом, можно полностью сосредоточиться на том, насколько хорошо они служат своей истинной цели.

Например, цель типографики вашего веб-сайта не соответствует вашему макету. Настоящая цель состоит в том, чтобы сделать ваш текст интересным, привлекательным и читаемым для посетителей вашего сайта. Макет вашего сайта должен соответствовать вашему тексту, а не наоборот.

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

Чтобы помочь вам создать отличную типографику, не отвлекаясь, вы можете попробовать такой инструмент, как Typecast. А чтобы вы могли сконцентрироваться на элементах формы, если ваш веб-сайт их содержит, сначала подумайте о том, чтобы разработать их отдельно. На веб-сайте Codrops есть множество блестящих примеров, которые могут вас вдохновить (мне особенно нравится этот!).

Когда у вас будет достаточно времени для набросков и размышлений, вы будете готовы открыть Photoshop и начать!

Шаг 2. Настройки документа и создание сетки

После того, как вы открыли Photoshop, первое, что вам нужно сделать, это создать новый документ.Перейдите в File> New, и вам будет представлено диалоговое окно с вопросом, какой новый документ вы хотите.

Существуют различные предустановки на выбор. Мы выберем предварительную настройку «Интернет», а затем предварительную настройку размера «Интернет (1440×900)». Здесь мы также можем дать нашему проекту имя. Но перед тем, как нажать «ОК», мы обновим размеры, как показано на втором снимке экрана ниже.

Убедитесь, что все настройки вашего документа соответствуют указанным выше, а затем нажмите «ОК». Вам будет показан новый пустой документ.

Пришло время использовать направляющие для настройки нашей сетки. Сетка дает вам разумную основу для всех ваших дизайнерских решений. Мы также добавим базовую сетку (с горизонтальными направляющими), а также сетку столбцов (с вертикальными направляющими), чтобы придать нашему дизайну приятный вертикальный ритм.

Я рекомендую взять бесплатное расширение GuideGuide Photoshop для создания сетки. Их сайт содержит пошаговые инструкции по его установке. Этот плагин сэкономит вам массу времени, если вы регулярно разрабатываете веб-макеты в Photoshop.

Надеюсь, на этапе планирования вы (или человек, который будет кодировать этот веб-сайт, если это не вы) выбрали систему сеток HTML и CSS, с которой вы собираетесь работать. Одним из примеров является система сеток Bootstrap: сетка из 12 столбцов, охватывающая общую ширину 1170 пикселей, когда сайт просматривается на большом экране. Эта информация будет влиять на наши решения при использовании расширения GuideGuide.

После того, как вы установили расширение GuideGuide, вы можете использовать его, перейдя в Window> Extensions> GuideGuide.Это откроет диалог опций GuideGuide. Заполните его параметрами, показанными на скриншоте ниже.

После того, как вы ввели правильные размеры в пикселях для вашей сетки, нажмите «Создать сетку». На вашем документе появится множество линий сетки. Чтобы не дать себе случайно переместить их, когда вы пытаетесь переставить другие элементы в документе, выберите «Окно»> «Заблокировать направляющие».

Помните, что вы можете быстро скрыть или показать эти направляющие, нажав Ctrl +; в Windows или «Cmd +»; на Mac.

Шаг 3. Ваша цветовая палитра

Идеальная цветовая палитра, как и все аспекты хорошего дизайна: незаметная, но влиятельная. Как и типографика, цветовую палитру часто выгодно изначально разрабатывать вне Photoshop, чтобы вы могли оценить ее эффективность, не отвлекаясь.

Есть много ресурсов для открытия или разработки цветовых палитр. Попробуйте инструмент Adobe Kuler, Colourco.de или ColourLovers.com.

После того, как вы выбрали несколько цветов, сохраните их в области «Образцы» Photoshop для быстрого доступа в процессе проектирования.

Сначала щелкните квадрат цвета переднего плана, чтобы открыть окно выбора цвета. Затем введите шестнадцатеричный код первого цвета из выбранной палитры и нажмите «ОК».

Затем перейдите на вкладку «Образцы» и щелкните значок «Добавить новый образец», чтобы сохранить этот цвет в образце.

Шаг 4. Экспериментирование с макетами

Теперь мы готовы начать экспериментировать с некоторыми макетами. Благодаря нашей системе сеток и направляющим будет легко узнать, какого точного размера должны быть разные элементы и области, чтобы мы могли сосредоточиться на общей картине.

Давайте начнем с блокировки некоторых общих областей содержимого. Выберите инструмент «Прямоугольник» и нарисуйте в документе несколько разных прямоугольников для представления различных областей содержимого.

На скриншоте выше вы можете видеть, что есть область заголовка, большая область героя, область основного содержимого и боковая панель. Они могут подойти вашему проекту, или вы можете захотеть изменить размеры, добавить или удалить определенные области содержимого. На этом этапе легко поиграть, позволив вашему творчеству развиваться, пока вы экспериментируете и внимательно оцениваете различные варианты макета.

Здесь следует помнить о нескольких вещах:

• Информационная иерархия — какой контент здесь наиболее важен (проверьте свою контент-стратегию, если она завершена), и как вы четко укажете, что на него следует сначала посмотреть?

• Разборчивость текста — если вы работали над своей типографикой отдельно с помощью такого инструмента, как Typecast, вы выбрали лучшую ширину линии для максимальной читаемости для выбранных шрифтов (подробнее о типографике Золотого сечения здесь и экспериментируйте с удобным калькулятором здесь)

• Некоторые из наиболее интересных макетов «ломают сетку» (щелкните здесь, чтобы получить дополнительную информацию и несколько отличных примеров) — но этот вид техники требует большого опыта проектирования для эффективного использования, и вы должны помнить, что ваш дизайн должен работать хорошо как на маленьких экранах, так и на больших

• Очень важно, , чтобы ваши слои были организованы , разумно называя их и собирая в логические группы — см. Снимок экрана ниже для примера, но выберите свою собственную систему (просто убедитесь, что другие могут ее расшифровать)

Шаг 5. Добавление изображений

Независимо от того, есть ли у вас уже окончательный набор изображений для веб-сайта или вы работаете с заполнителями, вы можете легко добавить их в свой проект, открыв их в Photoshop и нажав Ctrl + A, а затем Ctrl + C. в Windows (или «Cmd + A», а затем «Cmd + C» на Mac), чтобы выбрать и скопировать их.

Затем вы можете вернуться к документу проекта и нажать Ctrl + V (или Cmd + V), чтобы вставить в него фотографию. Вы увидите, что фотография появится в вашем документе, и вы заметите, что у нее есть собственный слой.

Перетащите слой фотографии поверх слоя, содержащего серый прямоугольник области героя, а затем щелкните правой кнопкой мыши слой фотографии. Выберите «Создать обтравочную маску», и вы увидите, что серый прямоугольник под фотографией теперь действует как обратная маска. Будут показаны только области фотографии, закрывающие серый прямоугольник.

Остальная часть фотографии не была стерта, поэтому вы можете щелкнуть по ее слою и затем нажать «V», чтобы выбрать инструмент перемещения. Затем вы можете щелкнуть фотографию в документе и перетащить ее, чтобы изменить, какая часть фотографии будет видна поверх серого прямоугольника.

Измените размер серого прямоугольника, чтобы легко изменить видимый размер фотографии. Щелкните его слой, а затем нажмите Ctrl + T или Cmd + T, чтобы вы могли перетащить углы прямоугольника, чтобы изменить его размер.Не забудьте зажать клавишу Shift, если вы хотите сохранить пропорции фигуры.

Повторяйте этот трюк всякий раз, когда вы хотите добавить фотографии в свой веб-макет. Сгруппируйте фотографию со слоем маски под ней на панели «Слои», чтобы их было еще проще перемещать.

Шаг 6. Важные детали

Плоский дизайн сейчас повсюду, но тенденции в этой отрасли постоянно меняются, поэтому хорошо иметь под рукой арсенал техник Photoshop. Таким образом, вы никогда не останетесь позади.

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

Например, если вы создаете кнопку, вы можете начать с формы прямоугольника с закругленными углами (не забудьте показать направляющие с помощью «Ctrl +;» или «Cmd +;», чтобы размер кнопки соответствовал вашей вертикальной иерархии).

Вы можете мгновенно добавить глубину, продублировав эту форму и сделав нижний прямоугольник более темным цветом.Переместите нижний прямоугольник на несколько пикселей вниз, щелкнув его слой, а затем несколько раз нажав клавишу со стрелкой вниз на клавиатуре.

Вы можете дополнить этот эффект тонкой тенью. Дважды щелкните нижний слой с более темным прямоугольником кнопки (не переименовывать его; щелкните справа от имени слоя), чтобы открыть диалоговое окно «Стиль слоя». Здесь поэкспериментируйте с настройками, чтобы увидеть, что выглядит лучше всего. На скриншоте ниже показан пример, но ваш окончательный выбор будет зависеть от вашего дизайна.

Google создал несколько интересных руководств для того, что они называют «материальным дизайном», которые стоит прочитать, если вы заинтересованы в создании чистых, интуитивно понятных дизайнов.

Шаг 7: Экспорт элементов

Если ваш окончательный веб-макет содержит графические элементы, такие как логотип или некоторые значки, которые вы хотите использовать на этапе кодирования этого проекта, вы можете извлечь их из документа Photoshop и экспортировать в различные форматы.

Web-изображения могут быть в формате JPG (обычно лучше всего для изображений с большим количеством цветов, например фотографий), PNG (лучше всего для небольших изображений с меньшим количеством цветов, например логотипов) или SVG (лучше всего для небольших изображений, которые должны выглядеть четкими, например, значков).

Чтобы экспортировать один из элементов из вашего документа, щелкните его слой правой кнопкой мыши и выберите «Извлечь активы . ..», чтобы открыть новое диалоговое окно.

Просмотрите настройки здесь (используя снимок экрана ниже в качестве примера экспорта значка в формате SVG), а затем нажмите «Извлечь …».

Затем вы сможете выбрать место для извлечения файлов, и они будут аккуратно помещены в папку там. Вы можете использовать их на стадии разработки этого проекта или передать их разработчику, который будет писать код, если это не вы.

Сводка

В Photoshop есть еще много чего поэкспериментировать, но здесь мы заложили основу для надежной системы дизайна веб-макетов. Использование умных приемов, таких как добавление расширения GuideGuide для создания колонок и базовой сетки, раздельное рассмотрение цвета и типографики и блокирование областей содержимого для экспериментов, упростит создание творческих проектов.

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

Если хотите, вы можете загрузить незавершенный документ Photoshop, который мы создали при разработке этого руководства. Вам понадобится шрифт Raleway, который можно бесплатно найти в репозитории Google Webfont.

Наслаждайтесь проектом и держите нас в курсе вашего прогресса, оставляя комментарии ниже!

Бесплатное руководство по Photoshop — Photoshop для начинающих веб-дизайна

Photoshop — один из лучших инструментов, поэтому изучите его с помощью этого руководства по веб-дизайну Photoshop!

Я использую Photoshop с версии 3, и с каждым разом он становится все лучше и лучше.Я создал буквально тысячи дизайнов и за это время обнаружил, что есть ряд ключевых навыков и инструментов, которые мы, веб-дизайнеры, используем почти в каждом дизайне. Вот почему я создал вместе с командой веб-курсов серию обучающих видео, идеально подходящих для начинающих веб-дизайнеров, которые хотят изучить веб-дизайн с помощью Photoshop.

В этом уроке вы узнаете, как открыть новый документ и применить настройки, которые необходимо установить, прежде чем приступить к проектированию в Photoshop.

Взгляд на кисти. Различные типы кистей, которые вы можете использовать, а также установка новых кистей, чтобы вы могли внести в свой дизайн действительно приятные эффекты.

Фигуры — это то, что мы часто используем при разработке веб-страниц. Он используется для создания макета и множества других элементов на экране. В этом уроке мы привыкнем к этому действительно полезному инструменту.

Слои являются наиболее важной частью Photoshop, поскольку они позволяют вам вносить изменения в определенные области на экране.Вы можете дополнительно сгруппировать эти слои вместе, чтобы сделать их более управляемыми при разработке.

В этом уроке мы собираемся посмотреть, как перемещать слои по экрану и как изменять их размер с помощью бесплатного инструмента преобразования, который вы будете часто использовать в своих проектах.

Мы собираемся посмотреть, как оглядываться вокруг вашего дизайна и видеть детали с помощью инструмента масштабирования.Итак, в этом уроке мы рассмотрим две очень важные особенности ежедневного использования Photoshop: масштабирование и панорамирование.

Режимы наложения — это когда у вас есть два слоя, взаимодействующих друг с другом, а эффекты — это разные вещи, которые вы можете применить к одному слою, такие как тени, внутренние тени, градиенты и т. Д.

Тексты — одна из самых сложных вещей в Photoshop, потому что он не предназначен для этого.Итак, в этом уроке мы собираемся найти простые способы работы с Photoshop и текстами.

Мы собираемся создать дизайн веб-страницы в Photoshop. Мы собираемся использовать сетки, чтобы организовать все и привести все в соответствие, а также различные другие уловки, чтобы сделать идеальную веб-страницу.

Как создать веб-страницу в Photoshop для Dreamweaver | Small Business

Хотя Photoshop — это в первую очередь программа для обработки изображений и редактирования, это также отличный инструмент для создания внешнего вида веб-страниц.С помощью встроенных инструментов Photoshop можно легко использовать для создания макетов профессионального вида, которые затем можно перенести в Dreamweaver для фактической работы над кодом. Когда фактическая работа по дизайну будет завершена в Photoshop, вы обнаружите, что сделать веб-страницу реальностью с помощью Dreamweaver не так уж и сложно.

Создайте страницу в Photoshop

Откройте Photoshop, щелкните меню «Файл» и выберите «Создать». Выберите «пиксели» в качестве единицы измерения, а затем введите желаемую ширину и высоту своей веб-страницы.Для максимальной совместимости с конечным пользователем вы должны выбрать ширину менее 1100 пикселей. Оставьте фон белым, установите разрешение на «72» и убедитесь, что для цветового режима установлено значение «RGB Color». Нажмите «ОК».

Щелкните инструмент «Фигуры» на панели инструментов и выберите нужный тип формы для вашего макета. После выбора щелкните и перетащите документ, чтобы создать форму. При необходимости повторите это с разными формами, чтобы создать макет веб-страницы. Чтобы изменить цвет или стиль формы после того, как вы ее создали, дважды щелкните фигуру в палитре «Слои» и внесите необходимые изменения.

Добавьте желаемый текст в макет веб-страницы с помощью инструмента «Текст» на панели инструментов. Если вы не создаете логотип, вы всегда должны использовать стандартный шрифт, который легко увидеть, например Verdana, Georgia или Times New Roman (и это лишь некоторые из них). Когда у вас есть все слои, которые вы хотите использовать для своей веб-страницы, дважды щелкните слои по одному, чтобы переименовать их. Это поможет вам запомнить, для чего предназначен каждый слой.

Перенос дизайна в Dreamweaver

Дважды щелкните каждую фигуру и текстовый слой, для которых вы включили определенный цвет, и щелкните образец цвета, чтобы просмотреть HEX-код цвета. Эти коды понадобятся вам при переносе дизайна в Dreamweaver. Когда закончите, сохраните страницу в формате Photoshop по умолчанию (PSD), а затем сохраните копию в формате JPEG. JPEG будет использоваться как эталонное изображение, и вы можете использовать PSD, если хотите внести изменения.

Откройте Dreamweaver и создайте новый документ HTML. Перейдите на вкладку «Вставка», вставьте новую таблицу или DIV и установите атрибуты элемента, соответствующие тем, которые используются в макете Photoshop (например, ширина / высота и цвет фона). Ссылаясь на изображение JPEG макета веб-страницы Photoshop, введите необходимый текст в нужные места и выровняйте различные элементы, чтобы они соответствовали дизайну Photoshop.

Вернитесь к изображению JPEG вашего дизайна и используйте инструмент кадрирования в Photoshop, чтобы обрезать часть изображения с логотипом. Сохраните его в папке, в которой вы сохранили HTML-файл. Вернувшись в Dreamweaver, откройте представление «Дизайн» и щелкните место, куда вы хотите вставить логотип. Откройте вкладку «Вставить» и нажмите «Изображение», чтобы вставить свой логотип на веб-страницу. Ваша страница, созданная в Photoshop / Dreamweaver, теперь готова к использованию.

Ссылки

Ресурсы

Биография писателя

Дэниел Хаттер начал профессионально писать в 2008 году.Его письма сосредоточены на компьютерах, веб-дизайне, разработке программного обеспечения и технологиях. Он получил степень бакалавра искусств в области медиа, разработки игр и информационных технологий в Университете Висконсин-Уайтуотер.

Веб-дизайн что использовать Photoshop или Illustrator?

К сожалению, я бы сказал, что это не бинарный вопрос, поскольку любая графическая программа может выводить контент для использования на веб-сайте. Так что в этом отношении это скорее личный выбор.

Тем не менее, если вы не выполняете какое-либо немедленное кодирование (только макеты и экспорт элементов для использования и т. Д.), Photoshop, безусловно, является наиболее широко используемым продуктом. Клиенты могут хотеть или ожидать, что вы используете этот продукт, и аналогично, третьи стороны, которые доставляют вам (например, если вы передаете работу с логотипом на аутсорсинг), могут доставить вам свои готовые продукты в формате .psd. Поэтому настоятельно рекомендуется иметь копию Photoshop, независимо от того, чем вы занимаетесь изо дня в день.

Для вашей собственной работы функции Illustrator и Photoshop достаточно схожи, вы, безусловно, можете адаптировать Illustrator для создания интерфейсных веб-дизайнов (графических частей).Простой поиск в Google дал этот результат для некоторых базовых настроек CS5, которые помогут веб-дизайнерам. Помните, что Illustrator больше нацелен на векторные изображения и печать, поэтому может потребоваться немного нестандартного мышления, если он используется для веб-дизайна.

Adobe Dreamweaver занимает второе место после Photoshop в списке почти обязательных приложений, по крайней мере, если вы будете кодировать свой дизайн. Для работы с кодом начального уровня (и некоторых проприетарных проблем) Adobe Muse — своего рода альтернатива Dreamweaver. Конечно, есть много других хороших продуктов, которые делают похожие вещи, но, опять же, Dreamweaver пользуется популярностью.

В качестве альтернативы, есть несколько хороших бесплатных редакторов кода, таких как MS Visual Studio Express, Komodo и Notepad ++ (и вы даже можете использовать MarkdownPad для некоторой базовой работы с контентом). Если не использовать Dreamweaver, вы теряете в основном WYSIWYG, поскольку другие продукты есть автозавершение кода и т. д. Но если вам действительно нужен WYSIWYG без Dreamweaver, есть и другие продукты.

Если вам нужна не векторная растровая альтернатива Illustrator, а не Photoshop, вы, вероятно, можете использовать продукты Corel, если хотите, или программу Gnu Image Manipulation с открытым исходным кодом (GIMP).Преимущество GIMP (как и упомянутых мною альтернативных редакторов кода) заключается в том, что он бесплатный.

Любые хорошие инструменты, которые вы используете, вероятно, должны (будут) иметь какую-то опцию «среза» для экспорта конечных элементов из вашего макета (при условии, что они еще не отсортированы и не сохранены отдельно). Кроме этого, на мой взгляд, очень мало «обязательных» функций, за исключением удобства.

Если честно, вы буквально могли бы сделать весь свой веб-дизайн с помощью MS Paint и Notepad, если бы вы были достаточно сведущи…

Что такое PSD? Первый шаг к веб-дизайну

Как лучший сервис для преобразования PSD в HTML в Интернете, мы довольно часто используем термин «PSD». Мы ответили на вопрос «Что такое PSD для HTML?» И предоставили список определений общих терминов веб-разработки, но теперь мы разбиваем его еще дальше.

Что такое PSD?

Проще говоря, PSD — это файл дизайна Photoshop .Технически это означает Photoshop Document, проприетарный тип файла от Adobe. Adobe Photoshop — это программа , наиболее широко используемая для веб-дизайна , и лучше всего подходит для процесса от дизайна до кода.

обычно открываются и редактируются с помощью Adobe Photoshop, но их можно открывать с помощью Adobe Photoshop Elements и даже некоторых продуктов сторонних производителей, таких как Corel PaintShop Pro и GIMP. Однако программы, отличные от Photoshop, не смогут полностью редактировать или даже читать сложные слои, используемые во многих файлах PSD.Другие расширенные функции в дизайне PSD также могут быть неправильно распознаны. Мы настоятельно рекомендуем работать с Photoshop с самого начала, чтобы обеспечить его универсальный доступ к дизайнерам и разработчикам , которые могут участвовать в вашем проекте.

Если вас интересует бесплатная программа для простого просмотра файлов PSD как плоских изображений (без слоев), Apple QuickTime, который включает в себя средство просмотра изображений, сделает свое дело, но вы не можете использовать эту программу для редактирования файла PSD. Он предназначен исключительно для просмотра файлов PSD как изображений.

Как я могу создать веб-сайт с помощью PSD?

PSD могут быть «нарезаны» и преобразованы в HTML-код опытным веб-разработчиком. Сервисы PSD в HTML, такие как The Site Slinger, специализируются именно на этом. Мы берем файлы PSD и возвращаем разметку HTML / CSS , которая готова к реализации в качестве действующего сайта.

Иногда дизайнеры используют файлы других типов. Хотя мы можем работать с типами файлов PNG, IDD или AI, мы настоятельно рекомендуем файлы PSD. Для работы с другими типами файлов может потребоваться дополнительный этап преобразования дизайна в файл PSD.

«Хороший» PSD состоит из слоев и хорошо организован с использованием папок и композиций слоев для отображения различных страниц и состояний. . Обязательно разработайте все состояния анимации и состояния кнопок (щелчок, наведение, выключено). Прочтите больше наших советов по веб-дизайну и ознакомьтесь с другими ресурсами ниже. В конце концов, мы берем ваш дизайн и превращаем его в код, создавая веб-сайт, который идеально соответствует вашему дизайну.

Технический персонал

Тип файла PSD поддерживает все режимы изображения (Bitmap, Grayscale, Duotone, Indexed Color, RGB, CMYK, Lab и Multichannel), что является одной из причин его широкого распространения.Он также поддерживает обтравочные контуры, каналы, информацию о прозрачности и многоуровневые слои, в то время как другие форматы просто представляют «плоские» изображения.

Файл PSD типа сохраняет дизайн в виде слоистых изображений , что чрезвычайно полезно для будущего редактирования (и повторного редактирования) различных частей дизайна. С каждым слоем можно работать индивидуально, не затрагивая остальные элементы дизайна. Вы также можете использовать функцию, называемую «составление слоев», чтобы представить варианты одного и того же дизайна.Photoshop может конвертировать файлы PSD в другие форматы, такие как PNG, JPG и т. Д., Так что вы можете экспортировать дизайн для самых разных целей, например веб-графику .

Также интересно отметить, что файлы Photoshop иногда имеют расширение .PSB, что означает «Photoshop Big». Согласно Adobe, «Формат больших документов (PSB) поддерживает документы размером до 300 000 пикселей в любом измерении. Поддерживаются все функции Photoshop, такие как слои, эффекты и фильтры. Вы можете сохранять изображения с высоким динамическим диапазоном, 32-битные изображения на канал в виде файлов PSB.В настоящее время, если вы сохраняете документ в формате PSB, его можно открыть только в Photoshop CS или более поздней версии ».

Вы можете узнать больше о спецификации форматов файлов Adobe Photoshop, если хотите глубже вникнуть в технические аспекты типа файлов PSD.

ресурсов

Читайте дальше, чтобы получить советы и инструкции по веб-дизайну.

Должны ли мы по-прежнему использовать Photoshop для создания веб-сайтов?

Была большая дискуссия об использовании Photoshop для разработки веб-сайтов. Я слышал много голосов, что Photoshop скоро будет заменен, и это не будет выбором большинства дизайнеров.

Мы начали говорить о дизайне в браузерах или об использовании некоторых других альтернативных программ, но все же это 2014 год, и почти каждый мой знакомый дизайнер использует Photoshop для создания веб-сайтов.

Я тоже использую Photoshop, и у меня есть веские причины продолжать его использовать в ближайшем будущем. Вот почему…

Все просят PSD.

Дело в том, что у вас, как у дизайнера, действительно нет выбора, когда дело доходит до выбора программного обеспечения для дизайна.Все зависит от того, что от вас требуют ваши клиенты и разработчики.

Очень сложно использовать в своих проектах что-то еще, кроме Photoshop. Даже если я действительно хотел попробовать какие-то альтернативы, большинство команд, с которыми я работал, просили меня предоставить файлы PSD.

Пару лет назад было время, когда Adobe Fireworks был более популярен, и некоторые разработчики просили многослойные PNG или PSD. Однако Adobe решила прекратить разработку Fireworks, поэтому мы все вернулись в Photoshop.

PS был самым безопасным вариантом для дизайнеров на протяжении многих лет. Большинство интерфейсных разработчиков знают, как использовать Photoshop и как легко извлекать графику из файлов PSD. Существует множество инструментов и сторонних плагинов, которые делают эту работу еще проще.

Если вы внештатный дизайнер и часто работаете с разными командами, вы должны быть готовы к тому, что они попросят файлы PSD.

Adobe хочет, чтобы мы продолжали использовать Photoshop.

Я ждал ответа Adobe на огромный спрос на адаптивность PSD.Вот оно: Adobe Edge Reflow. Оно все еще новое и свежее, но идея этого приложения мне очень нравится.

Adobe не сообщает нам, что есть новое приложение, и мы все должны прекратить использовать Photoshop для разработки веб-сайтов. Вы можете создать свой веб-сайт прямо в Reflow с нуля или импортировать файлы PSD и сделать их адаптивными.

Это идеальное решение, если ваш клиент запрашивает у вас оба файла PSD и хочет несколько экранов для мобильных устройств. Вы можете перетащить свой PSD-файл в Reflow, переупорядочить и масштабировать некоторые элементы и создать альтернативные экраны ваших дизайнов.

Создание дизайна в браузере с нуля.

Многие дизайнеры, знающие HTML / CSS, начали проектировать прямо в браузере и просто пропускали весь процесс проектирования в Photoshop или любом другом программном обеспечении.

Ну, я тоже пробовал, но у меня ничего не вышло. Я чувствую, что это ограничивает мои творческие способности, потому что я не могу быстро реализовать различные визуальные идеи, которые возникают у меня в голове. Вместо того, чтобы сосредоточиться на творчестве, я сосредотачиваюсь на том, чтобы это действительно работало в коде.

Несмотря на то, что я пропускаю весь этап проектирования в Photoshop, это значительно замедляет весь процесс из-за бесконечного количества попыток и исправлений.

Я называю проектирование в Photoshop предварительным этапом проектирования. Это помогает мне визуализировать всю концепцию веб-сайта, и я часто опускаю точные до пикселя детали и завершаю эту часть в браузере во время кодирования.

Совершенствуйте свои дизайнерские навыки, а не навыки программирования.

Заголовок этого абзаца — лучшее завершение моего сообщения в блоге. Дизайнеры, давайте сосредоточимся на наших дизайнерских навыках. Давайте освоим наши методы и стили дизайна. Если мы разовьем свои навыки, мы сможем создавать красивые веб-сайты независимо от того, какое программное обеспечение мы используем.

Прочтите мой другой пост в блоге с некоторыми советами о том, как улучшить свои дизайнерские навыки.

Мы используем Photoshop уже много лет, но кто знает, что нас ждет в будущем? Веб-дизайн особенно меняется так быстро, что его сложно предсказать и подготовиться.

Я буду продолжать пользоваться фотошопом.