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

При работе с фрагментами необходимо учитывать следующее.

• Создать фрагмент можно с помощью инструмента «Фрагмент» или с помощью слоев.

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

• Вы можете настроить параметры каждого фрагмента, например тип фрагмента, название и адрес URL в диалоговом окне «Параметры фрагмента».

• Каждый фрагмент можно оптимизировать с помощью разных параметров оптимизации в диалоговом окне Сохранить для Web.

Типы фрагментов

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

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

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

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

Фрагменты могут быть созданы разными способами.

• Автоматические фрагменты создаются автоматически.

• Пользовательские фрагменты создаются с помощью инструмента «Фрагмент».

• Слоевые фрагменты создаются с помощью панели «Слои».

Выделение фрагментов веб-страницы

Можно нарисовать линии разделения фрагментов прямо на изображении с помощью инструмента «Фрагмент» либо создать изображение с помощью слоев и затем создать фрагменты на основе слоев.

Создание фрагмента с помощью инструмента «Фрагмент»

1. Выберите инструмент «Фрагмент» . (Нажимайте клавишу «C», чтобы по очереди пройти инструменты входящие в группу инструмента «Рамка».)

   В окне документа автоматически появятся все существующие фрагменты.

2. На панели параметров выберите настройки стиля.

   Обычный

   Пропорции фрагмента определяются перетаскиванием.

   Заданные пропорции

   Устанавливает соотношение высоты к ширине. Введите целые или дробные числа для задания соотношения сторон. Например, чтобы создать фрагмент, ширина которого в два раза больше высоты, введите значение 2 для ширины и 1 для высоты.

   Заданный размер

   Определяет высоту и ширину фрагмента. Введите количество пикселов в целых числах.

3. Выделите мышью область, в которой следует создать фрагмент. Чтобы сделать фрагмент квадратным, удерживайте нажатой клавишу «Shift». Перетаскивание курсора при нажатой клавише «Alt» (Windows) или «Option» (Mac OS) позволяет нарисовать границы фрагмента от центра. Чтобы выровнять новый фрагмент по направляющей или другому фрагменту изображения в меню «Просмотр» выберите команду «Привязать к». См. Перемещение, изменение размера и привязка пользовательских фрагментов.

Создание фрагментов по направляющим

1. Добавьте направляющие к изображению.

2. Выберите инструмент «Фрагмент» и нажмите кнопку «Фрагменты по направляющим» на панели параметров.

   При создании фрагментов по направляющим все существующие фрагменты удаляются.

Создание фрагмента из слоя

Слоевой фрагмент включает все пикселы слоя. При перемещении слоя или редактировании его содержимого область фрагмента автоматически изменяется и включает в себя новые пикселы.

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

1. Выберите слой на панели «Слои».

2. Выберите «Слой» > «Новый слоевой фрагмент».

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

Преобразование автоматических фрагментов и слоевых фрагментов в пользовательские фрагменты

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

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

1. С помощью инструмента «Выделение фрагмента»  выделите один или несколько фрагментов для преобразования.

2. Нажмите кнопку «Преобразовать» на панели параметров.

Просмотр фрагментов и их параметров

Просмотреть фрагменты можно в диалоговом меню Сохранить для Web и в Photoshop. Следующие признаки помогают определять и различать фрагменты.

Линии границ фрагментов

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

Цвета фрагмента

Позволяют отличить пользовательские и слоевые фрагменты от автоматических. По умолчанию пользовательские и слоевые фрагменты обозначены синими символами, автоматические фрагменты — серыми.

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

Номера фрагментов

Фрагменты нумеруются  слева направо и сверху вниз, начиная с верхнего левого угла изображения. При изменении расположения или общего количества фрагментов нумерация автоматически обновляется.

Значки фрагментов

Следующие значки обозначают определенное состояние.

Пользовательский фрагмент содержит изображение.

Пользовательский фрагмент не содержит изображения.

Фрагмент является слоевым.

Отображение или скрытие границ фрагмента

1. В меню «Просмотр» выберите пункт «Показать» > «Фрагменты». Чтобы отобразить или скрыть фрагменты при отображении других элементов, выберите команду «Вспомогательные элементы». См. Отображение или скрытие вспомогательных элементов.

Отображение или скрытие автоматических фрагментов

1. Выполните одно из следующих действий.

   • Выберите инструмент «Выделение фрагмента»  и нажмите кнопку «Показать автоматические фрагменты» или «Скрыть автоматические фрагменты» на панели параметров.

   • В меню «Просмотр» выберите пункт «Показать» > «Фрагменты». Автоматические фрагменты появятся на незаполненной фрагментами области изображения.

Отображение или скрытие номеров фрагментов

1. Выполните одно из следующих действий.

   • В Windows в меню «Редактирование» выберите «Установки», а затем пункт «Направляющие, сетка и фрагменты».

   • В Mac OS в меню «Photoshop» выберите «Установки», а затем пункт «Направляющие, сетка и фрагменты».

2. В разделе «Фрагменты» установите флажок «Показывать номера фрагментов».

Изменение цвета линий фрагментов

1. В Windows выберите в меню «Редактирование» пункт «Установки» > «Направляющие, сетка, фрагменты». В Mac OS выберите «Photoshop» > «Установки» > «Направляющие, сетка и фрагменты».

2. В разделе «Линии границ фрагментов» выберите цвет из меню «Цвет линии».

   После изменения цвета выделенные линии границ фрагментов автоматически станут контрастного цвета.

Еще похожее

• Параметры HTML для фрагментов
• Задание типа содержимого фрагмента

Вход в учетную запись

Войти

Управление учетной записью

Как сделать визуализацию архитектуры плана участка в Photoshop

В этом уроке Жюльен расскажет о своем рабочем процессе, как сделать визуализацию плана участка или иллюстрацию генерального плана в Photoshop на основе импортированного чертежа САПР. Она покажет, как грамотно накладывать текстуры, чтобы это было динамично, реалистично и, самое главное, повышало скорость рабочего процесса! Другими словами: она постарается получить хороший результат с разумными усилиями — наслаждайтесь этим!

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

Как и любой проект архитектурной визуализации в Photoshop, он начинается с базовой работы с 2D-линиями. В моем случае я использовал AutoCAD для рисования контекстного плана.

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

Изменение линейной работы можно выполнить несколькими способами, я предпочитаю делать это уже в исходной программе САПР (в данном случае в AutoCAD). Время от времени я иногда импортирую PDF-файл в Adobe Illustrator, так как переход между Photoshop и Illustrator плавный и иногда может ускорить рабочий процесс, если нужно очистить всего несколько областей.

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

Например, в этом случае самая большая тень исходит от соседнего здания, похожего на замок. Чтобы создать тени, я быстро создаю 3D-здания в SketchUp. На изображении ниже показано изолированное изображение тени, экспортируемое прямо из SketchUp.

Теперь начинается работа в Photoshop, где я комбинирую линии с тенями. На изображениях ниже показана работа с линиями, наложенная поверх слоя с тенью:

Я «объединяю» оба элемента, просто правильно упорядочив слои или установив режим наложения теневого слоя на «Умножение». Уже из-за этого изображение внезапно становится намного более глубоким, но при этом вы можете видеть, как быстро тени могут стать подавляющими, поэтому я часто буду играть с их непрозрачностью, пока не буду доволен, изменив прозрачность слоя с тенью. Иногда я применяю небольшой фильтр размытия по Гауссу, чтобы смягчить тени.

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

Цель этого шага — настроить себя на быструю маскировку. Для тех, кто знаком с программным обеспечением для 3D-рендеринга и V-Ray, скажу, что здесь я в основном настраиваю свой собственный слой Material ID, который используется для быстрого выбора частей, к которым я могу применить текстуры. Это метод, который часто используется только в 3D-рендеринге, однако я обнаружил, что он одинаково полезен в 2D-чертежах, поскольку это значительно ускоряет рабочий процесс, когда дело доходит до добавления/редактирования текстур, и поэтому очень важно настроить это. слой на ранней стадии.

Так что в моем случае я также создаю другой слой с разными «Материалами». После этого шага у меня есть разные слои для этих областей:

• Трава
• Вода
• Тротуар
• Дорога

В комбинации это выглядит уже так: мы будем продолжать улучшать внешний вид еще больше.

В зависимости от проекта этот процесс может значительно усложниться в зависимости от количества отделки пола, которую вы хотите запечатлеть. Чтобы сделать быстрый выбор всего на этом слое, удерживайте нажатой «команда» (Alt на ПК) и выберите миниатюру этого слоя. Некоторым людям нравится экспортировать свою исходную работу САПР в тот же слой, чтобы их заливки/линии/тени объединялись и экспортировались в виде одного файла JPG/PDF из любого программного обеспечения САПР, которое они используют, поэтому пропускают первые 2 шага.

 Часто это также зависит от используемого вами программного обеспечения. Теоретически это все еще работает, но я считаю, что это становится процессом в 2 клика вместо 1 клика, когда дело доходит до выбора каждого материала, поскольку вам нужно выбрать слой, а затем волшебную палочку в нужной области, в отличие от простого удержания «Command ‘ и выбрав слой. Кроме того, когда тени уже встроены в цветное изображение, это делает волшебную палочку немного избыточной с точки зрения скорости. Звучит более утомительно при настройке в Photoshop — создании отдельных слоев для работы с линиями, тенями и 2D-цветовыми заливками, но это ускоряет рабочий процесс и дает гораздо больше гибкости, позволяя настраивать каждый графический элемент в изображении

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

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

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

Итак, давайте импортируем фотографию травяного поля, которая будет выглядеть следующим образом:

В этом случае я просто размещаю фототекстуру в Photoshop, пока она не покроет весь холст, как показано ниже. Вы можете удалить швы с помощью инструмента «Штамп».

Итак, я заполнил весь холст этой текстурой и применил маску из слоя 2D-заливки, который мы создали ранее для травы. После этого я играю с режимами наложения слоя и непрозрачностью слоя. В зависимости от изображения этот процесс может включать некоторые проблемы с устранением неполадок, но ключевые режимы наложения слоев, на которые следует обращать внимание в этом процессе, будут следующими:

• «наложение»
• «умножение»
• иногда «осветление»

и даже иногда (как в этом случае) я оставляю его на обычном и вместо этого работаю с прозрачностью/непрозрачностью. Мне нравится комбинировать текстуры, поэтому довольно редко бывает, чтобы одна текстура была установлена ​​на 100% непрозрачность. Иногда я обнаруживаю, что текстура, которую я использую, просто не работает с изображением, однако из-за 2D-заливок, которые мы настроили ранее, это позволяет нам довольно быстро менять текстуру без необходимости повторного вырезания мест, где находится текстура. необходимый. Это просто вопрос повторного применения маски из слоя 2D-заливки.

Благодаря маске слоя текстура зеленой травы применяется мгновенно, и моя визуализация городского дизайна теперь выглядит следующим образом:

Затем я повторяю шаги с дорогами: начните добавлять ландшафтный антураж, так как мы хотим оживить наш план контекста, правильно! Этот шаг довольно прост, это просто упражнение по копированию и вставке — сначала. Здесь важно иметь красивые и качественные срезанные деревья. Кроме того, вы хотите избежать эффекта клонирования, используя одно изображение дерева для всех деревьев на вашем рисунке, так как это действительно выглядит непрофессионально…

Поэтому мы используем одно из наших вырезанных деревьев вида сверху из «Коллекции TopViewTrees», созданных для архитектурных визуализаций такого типа:

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

Это высококачественное изображение размером 4000 x 4000 пикселей (около 22 МБ) уже замаскировано (=прозрачный фон) и поэтому может быть мгновенно объединено с планом вашего сайта. Файл .PNG является частью пакета OpenArchiVIZpack — нашей бесплатной и удобной графической библиотеки для архитектурной визуализации. коммерческие проекты!

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

Делая это, вы избежите поиска клонов на 100%!

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

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

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

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

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

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

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

Итак, я импортирую его и делаю следующие настройки:

• Добавление фильтра размытия в движении
• Изменение уровней
• Обесцветьте текстуру
• Уменьшите непрозрачность слоя до 30-40%
• Режим слоя: Мягкий свет

Примените ту же маску слоя, что и для зеленой заливки. Здесь вы видите процесс:

Даже на маленьких эскизах видно, что это придает траве более грубый вид, верно?

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

Итак, еще раз я снова беру красивую текстуру из нашей бесплатной библиотеки с более чем 4000 текстур:

Я применяю текстуру бетона только с непрозрачностью около 20%, и тогда она будет выглядеть так:

Наконец, Я добавляю всю информацию о схемах, названия улиц, названия основных зданий и любую информацию, относящуюся к городскому дизайну проекта.

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

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

Пожалуйста, распространите любовь, если вам это нравится…0032

Как создать веб-макет в Photoshop

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

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

Готовы начать? Пойдем!

Прежде всего: настройте документ. Как правило, вам захочется создать новый документ Photoshop со следующими настройками:

• Ширина: 1200PX

• Высота: 1500PX

• RESOLERTEN:

  88878 7.PPI

• : 88888 7.PPI

• : 888 7.PPI

• : 888 7. Mode: RGB

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

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

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

Чтобы установить эти размеры в Photoshop, вам просто нужно установить их при создании нового файла