Как делать макет сайта в фотошопе: Пошаговая инструкция, как создать макет сайта самостоятельно. Онлайн или в Photoshop

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

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

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

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

• Адаптивный дизайн и взаимодействие с пользователем

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

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

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

• Контентная стратегия

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

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

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

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

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

• Ручка и бумага

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Установив расширение GuideGuide, вы можете использовать его, выбрав «Окно» > «Расширения» > «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 и экспортировать в различные форматы.

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

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

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

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

Резюме

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

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