Как создать в фотошопе сайт: Пошаговое создание макета сайта в фотошопе — шаблон для сайта

Создание дизайна сайта в фотошопе, размеры макета

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

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

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

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

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

А вот о ширине следует призадуматься, так какого размера делать то ее???? А рисовать ширину тела сайта необходимо в 1003 пикселя, Вы спросите, почему 1003 пикселя, а не 1024, да потому как нужно учитывать боковой скроллинг у браузера, а он составляет немного не мало 21 пиксель.

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

А это уже как вы наверное понимаете мало того что некорректно смотрится но и вызывает неудобство для пользователя сайтом (потенциального клиента), это большой минус. Этот скроллинг появляется из-за того что дизайнер не учел что фиксированная ширина макета сайта 1003 пикселя, а верстальщик сверстал макет на 1024 пикселя. Конечно, это может быть и ошибка верстальщика, но сейчас не о верстке.

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

Я при создание дизайна сайта в фотошопе, использую размеры холста равные 1200 х 1800 пикс. Фиксированную ширину делаю в 1000 пикселей, а оставшиеся 200 пикселей разделяю пополам по 100 на правую и левую стороны соответственно, которые будут выполнять функцию резинки для остальных разрешений мониторов. Ниже я привел схему, каких размеров я создаю холст и разметку.

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

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

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

48 отличных руководств по созданию веб-сайтов в Photoshop

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Создание веб-сайта в Photoshop

стр. СВОДКА

Как создать визуальный элемент веб-сайта в Adobe Photoshop от начала до конца.

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

Начать с документа RGB Photoshop не шире 990 пикселей

Когда я начинаю графический дизайн веб-сайта, я обычно создаю новый документ Photoshop шириной 990 пикселей. Это связано с тем, что 990 пикселей — это почти наибольшая ширина, которую вы можете использовать на веб-странице без неприятной горизонтальной полосы прокрутки, появляющейся в браузере Microsoft Windows, в пределах экрана 1024 x 768 пикселей (наиболее популярное разрешение экрана на момент написания).

Любой, кто использует Apple Mac, знает, что ширина окна браузера гораздо более гибкая, но поскольку пользователи Mac составляют меньшинство, дизайнер веб-сайта должен работать с (в первую очередь) с пользователями ПК — если только аудитория не известна. На базе Mac.

Итак, мой документ обычно начинается с размера 990 x 900 пикселей (рисунок 1) .

Рисунок 1 — создание файла Photoshop 990 x 900 пикселей

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

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

Рисунок 2a — Windows XP с Internet Explorer 8 с разрешением 1024 x 768

Рисунок 2b — Windows XP с Internet Explorer 8 с разрешением 1280 x 800

Решите, что будет видно по прибытии, а что будет спрятано под складкой

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

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

Включите только релевантное

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

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

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

Итак, приступим к основам

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

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

Создать документ с направляющими

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

ПРОСМОТР / НОВОЕ РУКОВОДСТВО…

… а затем выберите:

По горизонтали, положение 10 пикселей

Повтор по горизонтали, позиция 890 пикселей

Повтор по вертикали, позиция 10 пикселей

Повтор по вертикали, положение 980 пикселей

Задайте цвет фона

Цвет фона (или узор) веб-сайта — это область, которая будет заполнять все уголки окна браузера, неиспользуемые самим сайтом, поэтому важно не делать ее слишком отвлекающей или яркой.Я выбрал темно-серый цвет, чтобы улучшить сам сайт. Для этого щелкните квадрат палитры цветов переднего плана в нижней части палитры инструментов и либо выберите свой собственный цвет из палитры цветов, либо введите следующее значение в поле в центре нижней части диалогового окна с помощью символа #: 666666 . Щелкните ОК.

В верхнем меню выберите:

РЕДАКТИРОВАТЬ / ЗАПОЛНИТЬ…

… и ниже Содержание выберите Цвет переднего плана . У вас должен получиться холст, который выглядит как рисунок 3 .Об этом позаботились.

Рисунок 3

Создание платформы веб-сайта

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

Выберите инструмент Rounded Rectangle Tool на палитре инструментов.На палитре параметров убедитесь, что выбрана кнопка « Shape Layers », а не « Paths » или « Pixels ». Это гарантирует, что будет создан красивый, редактируемый путь с заливкой, а не пустой путь или пиксельная форма. После этого в палитре параметров в поле « Radius » введите 20 пикселей. Если вы не видите поле «Радиус», вероятно, инструмент «Прямоугольник со скругленными углами» не выбран на палитре «Инструменты». Перед созданием формы выберите новый цвет переднего плана в палитре инструментов.Я использовал # 99cc33 .

Убедившись, что в меню VIEW выбрано « Snap to Guides », щелкните в верхнем левом углу холста, где направляющие пересекают друг друга, и перетащите вниз до нижнего правого пересечения направляющих, а затем отпустите. Это создаст большой прямоугольник с закругленными углами (, рисунок 4, ). Это будет фон для сайта.

Рисунок 4

Frame 2:

TIP

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

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

ПРОСМОТР / НОВОЕ РУКОВОДСТВО…

… а затем выберите:

По горизонтали, положение 100 пикселей

По горизонтали, положение 850 пикселей

По вертикали, положение 30 пикселей

По вертикали, положение 960 пикселей

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

релевантная ссылка

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

Посетите этот урок Glass Photoshop, чтобы получить один из многих подробных уроков.

Создайте тень

В палитре слоев (со светло-зеленым прямоугольником с закругленными углами все еще выбранным) нажмите кнопку « Добавить стиль слоя » внизу (с надписью fx ).Выберите Drop Shadow и введите следующие значения:

• Непрозрачность = 75%
• Расстояние = 0 пикселей
• Спред = 0%
• Размер = 10 пикселей
• Шум = 0%

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

Рама 3:

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

По горизонтали, положение 140 пикселей

По вертикали, положение 40 пикселей

По вертикали, положение 950 пикселей

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

Рисунок 5 — наслоение фоновой панели завершено

Создать верхний и нижний колонтитулы

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

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

Рисунок 6. Верхний колонтитул, нижний колонтитул и панировочные сухари на месте

Добавление текста в Photoshop

Чтобы добавить текст в Photoshop, просто выберите инструмент «Текст» ( Horizontal Type Tool ) на палитре «Инструменты», щелкните где-нибудь на холсте и начните печатать. Новый слой будет создан автоматически для каждого блока текста, который вы создаете. Вы можете щелкнуть один раз и ввести текст, чтобы создать неограниченный блок текста, или вы можете щелкнуть и перетащить, чтобы создать текстовое поле, которое ограничит текст в пределах определенной вами области.

Панировочные сухари

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

Нижний колонтитул

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

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

Основная навигация

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

релевантная ссылка

Мега-меню
Есть много других возможностей навигации, одна из которых — часто практичное Мега-меню.

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

Для этого сайта я использовал кнопки в форме вкладок для ссылок на основные категории и контекстно релевантную навигацию по боковым подкатегориям для всех страниц в категории.

Создание кнопок вкладок

Кнопки вкладок на рис. 7 — это просто более закругленные прямоугольники с закругленным углом 10 пикселей.

Рисунок 7 — Закругленные вкладки навигации

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

По горизонтали, положение 110 пикселей

По вертикали, положение 230 пикселей

Я сохраню вкладки того же темно-зеленого цвета, что и фоновая панель, за исключением активной вкладки. Если пользователь окажется на любой странице в категории «Проектирование», вкладка останется белой. Любая дополнительная локальная навигация или пояснительные примечания появятся на панели слева.

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

Вторичная навигация

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

По горизонтали, положение 160 пикселей

По вертикали, положение 60 пикселей

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

• Размер: 1px
• Положение: внутри
• Режим наложения: Нормальный
• Непрозрачность: 100%
• Тип заливки: Цвет
• Цвет: # ccff99 (щелкните цветной прямоугольник и введите ccff99 в поле #)

Тип веб-сайта Лица

Шрифт, который я выбрал для текста на сайте, — Georgia.Я выбрал это по трем основным причинам:

1. Мне нравится. Хотя мне нравится чистый вид шрифта без засечек (такого как тот, который используется в заголовке), я чувствую, что простота структуры сайта действительно выделяет красивый, интересный шрифт с засечками, такой как Georgia.
   
2. Это шрифт, разработанный Microsoft для Интернета, поэтому он хорошо работает как с большими, так и с маленькими размерами.
3. На большинстве компьютеров установлена ​​Джорджия. Это решающий фактор, который резко ограничивает количество шрифтов, обычно используемых в дизайне веб-сайтов.Существует множество обходных путей, таких как Flash-текст, изображения в виде текста и методы замены текста PHP, но для простоты эти альтернативы, как правило, находятся в меньшинстве в Интернете. Короче говоря, если на компьютере не установлен шрифт, используемый веб-сайтом, браузер отобразит альтернативный вариант — иногда с нежелательными результатами.

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

Выберите стиль текста

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

Хотя стиль текста на этом начальном этапе разработки может быть изменен (как и все остальное!), Он помогает получить общее представление о том, как выглядят разные шрифты, размеры и цвета. Для этого достаточно просто создать текстовое поле в документе Photoshop с помощью перетаскивания (с помощью инструмента Horizontal Type Tool ) и заполнить его текстом-заполнителем. Я обычно экспериментирую со стилями для двух заголовков ( h2 и h3 ), Paragraph Text (P), Bullet Points и Links ( рисунок 8 ).

TIP

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

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

Образцы абзацев Lorum Ipsum можно создать на удобном веб-сайте Lipsum .

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

Создание иллюстраций для информационных панелей

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

Рисунок 8 — Стили текста и панелей

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

Теперь выберите переднюю белую панель, щелкнув ее миниатюру Vector mask — если все сделано правильно, вы должны увидеть, как ее путь отображается черным цветом. Выберите Direct Selection Tool (белая стрелка). Мы собираемся перетащить верхнюю часть белой панели, но снова нам нужно начать перетаскивание, щелкнув темно-серый фон, а не одну из других существующих векторных фигур.

Щелкните серый фон и перетащите рамку вокруг верхней части панели, убедившись, что все точки привязки, составляющие верхнюю часть слоя-фигуры, выбраны.Затем нажмите SHIFT + <СТРЕЛКА ВНИЗ> . Это сдвинет всю верхнюю часть панели вниз на 10 пикселей. Используйте стрелки ВВЕРХ и ВНИЗ без клавишу SHIFT , чтобы перемещать точки привязки до тех пор, пока вы не будете довольны.

Наконец, используйте инструмент Text Tool , чтобы щелкнуть вверху информационной панели, чтобы добавить заголовок. Вы можете решить либо сохранить это как изображение, либо стилизовать его в CSS позже — я использовал текст, а не изображение. Для этих заголовков я добавил интереса, используя комбинацию курсива в нижнем регистре и латинского шрифта в верхнем регистре, а также убрал пробелы между словами (см. Панель ПРИМЕЧАНИЕ справа) — действительно простой способ придать заголовку немного забавный вид.

Готово к работе

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

Создание веб-сайта в Photoshop — конец статьи

Перейти к предыдущей статье | Перейти на домашнюю страницу | К следующей статье

Требуется обратная связь!

Присылайте любые вопросы или отзывы по адресу: feedback @ using-dreamweaver.com или оставьте его на нашей странице в Facebook.

Как создать веб-страницу в 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 для веб-дизайна — выдержит ли титан графики?

Последнее обновление: 26 апреля 2019 г. Опубликовано в Photoshop и графика.

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

Да, Photoshop используется для веб-дизайна, решая множество задач.

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

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

Давайте подробнее рассмотрим, как можно использовать Photoshop для веб-дизайна …

С какими конкретными задачами веб-дизайна может справиться Photoshop?

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

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

Но что умеет Photoshop в отношении веб-дизайна? Для чего можно использовать Photoshop в веб-дизайне? Что ж, я смог сузить возможности Photoshop, связанные с Интернетом, до четырех широких областей: Редактирование фотографий, оптимизация изображений, создание веб-ресурсов, и создание макетов страниц .

Давайте кратко рассмотрим каждый …

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

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

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

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

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

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

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

Фактически, Photoshop может выполнять множество традиционных задач полиграфического дизайна — например, визитки, брошюры и т. Д.).Таким образом, использовать Photoshop для создания таких же визуальных элементов для Интернета очень просто. Лично я часто работаю в Illustrator для этих задач, перенося свои объекты Illustrator в Photoshop как смарт-объекты. Но это совсем другой разговор!

4. Создание веб-макетов: Наконец, Photoshop можно использовать для создания макетов веб-страниц. Это включает в себя все, что угодно, от каркасного каркаса, который используется для определения грубых пропорций и расположения объектов макета, вплоть до законченного и полностью разработанного макета.

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

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

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

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

Итак, если есть лучшие инструменты веб-дизайна, чем Photoshop, почему он все еще используется? Давайте рассмотрим это дальше…

Почему Photoshop все еще используется для веб-дизайна?

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

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

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

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

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

Хотите, чтобы на этом тексте была тень? Фотошоп! Как насчет красивого градиента на этой кнопке? Фотошоп! Как насчет границы на боковой панели? Вы угадали, Фотошоп!

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

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

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

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

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

И это отличный переход к …

Где Photoshop борется с веб-дизайном

Как вы понимаете, большой проблемой для Photoshop является обработка больших изменений, которые произошли в мобильном адаптивном дизайне.Мобильный просмотр полностью изменил то, как мы используем Интернет … и, как следствие, полностью изменил то, как мы проектируем для Интернета.

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

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

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

Фактически, в течение первых трех кварталов жизни Photoshop адаптивного дизайна даже не существовало!

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

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

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

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

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

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

Между тем, существует ли конкретная версия Photoshop, которая лучше всего подходит для веб-дизайна? Давайте обсудим …

Какая версия Photoshop лучше всего подходит для веб-дизайна?

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

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

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

Но более современные версии Photoshop CC включают еще больше удобных для работы в Интернете функций, таких как возможность копировать содержимое слоя в виде кода CSS.Это может показаться не таким уж большим, но — это огромно! Итак, здесь вы можете извлекать определенные элементы страницы в виде кода, что потрясающе. Также есть возможность синхронизировать экспортированные файлы через панель «Слои» — другими словами, если содержимое слоя изменяется в Photoshop, соответствующий экспортированный файл JPEG или PNG также обновляется. Это огромная экономия времени.

По мере выпуска новых версий Photoshop (разумеется, через членство в Adobe Creative Cloud) новые функции и команды, связанные с Интернетом, обязательно будут добавляться.А Adobe очень редко удаляет функции. Так что использование последней версии Photoshop CC, вероятно, будет лучшим выбором.

На самом деле, если у вас нет более старой копии Photoshop, подписка на Photoshop CC (которая начинается с 10 долларов в месяц) будет вашим единственным вариантом! Adobe не продает старые версии своего программного обеспечения без подписки.

Что касается меня, поскольку у меня мало потребностей, я все еще качаю Photoshop CS6 для своей повседневной работы. Но в то же время мне нравится быть в курсе последних функций Photoshop через Creative Cloud.Но это только я.

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

Как изучить Photoshop для начинающих

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

Но вот короткое и приятное: Хотя вы могли бы начать изучать Photoshop в Google, YouTube и на онлайн-форумах, это, пожалуй, самый медленный и самый неприятный способ начать работу. Проблема не в том, что информации там нет … проблема в том, что там слишком много информации! Ничего из этого не структурировано или организовано должным образом.

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

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

И я беру много онлайн-курсов!

Здесь, на Ten Ton, у меня есть курс Photoshop, Начало работы с Photoshop CC . Он идеально подходит для новичков, которые хотят быстро закрепиться в Photoshop. Посмотрите — , может быть, он подойдет!

Или, если вы хотите узнать больше о Photoshop, у меня для вас есть много статей и видео.

Наслаждайтесь!

Photoshop для веб-дизайна: 20 профессиональных советов

Для многих веб-дизайнеров пакет Adobe Creative Cloud, в частности Photoshop, играет неотъемлемую часть в процессе создания веб-сайтов.Создаваете ли вы макеты веб-сайтов или разрабатываете отдельные элементы сайта, Photoshop — отличный вариант.

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

01. Использование систем сеток

Системы сеток могут сэкономить массу головной боли в веб-дизайне. Попробуйте использовать такие ресурсы, как расширение Cameron McEfee’s GuideGuide для Photoshop, чтобы сделать настраиваемые сетки простыми и точными.

02. Получите все

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

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

03. Изучите пользовательские предустановки документов

Нажмите cmd + N , чтобы открыть окно «Новый документ». Меню предустановок содержит базовые веб-и мобильные предустановки, но в нем отсутствуют многие общие параметры для различных систем сеток, баннеров, устройств iOS и Android. Уделите несколько минут, чтобы заполнить недостающие области.

04. Настроить тип по умолчанию

Закройте все открытые документы. Откройте палитру символов, чтобы выбрать предпочтительное семейство шрифтов, толщину, интервал и цвет. Больше не будет мириад по умолчанию!

05. Сделайте ваши векторные изображения четкими

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

06. Создайте пунктирные линии

Выберите инструмент «Кисть» ( B ), затем откройте палитру «Наборы кистей», за которой следует раскрывающееся меню в правом верхнем углу. Выберите Квадратные кисти и нажмите «Добавить».

Теперь выберите кисть Hard Square 1 Pixel.Переключитесь на палитру кистей и нажмите Brush Tip Shape, установив интервал на 300%. На холсте удерживайте Shift , перетаскивая кисть по горизонтали или вертикали, чтобы создать четкую пунктирную линию.

07. Простой перенос текста

Используя быстрое решение, Photoshop может применять функции переноса текста, аналогичные функциям InDesign. Выберите инструмент «Прямоугольник» ( U ). На панели параметров установите для заливки значение «Контуры», выберите для формы инструмент «Прямоугольник» и выберите «Добавить в область контура» (или нажмите + ).

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

Выберите инструмент «Текст» ( T ) и щелкните внутри большого прямоугольника, чтобы преобразовать форму в рабочий контур «Текст» для заливки шрифтом. Вы можете дополнительно уточнить размеры рабочего контура текста с помощью инструмента «Прямоугольник» ( U ) и инструмента «Прямой выбор» ( A ).

08. Создание быстрых цветных заливок

Нажмите alt + Delete , чтобы залить текст, фигуры и слои выбранным цветом переднего плана. Нажмите cmd + Delete , чтобы залить область выбранным цветом фона. Нажмите D , чтобы вернуться к черно-белому по умолчанию, и нажмите X , чтобы поменять местами цвета переднего плана и фона.

09. Оставайтесь организованными

Используйте cmd + G для группировки слоев и помогайте вам оставаться организованными и сосредоточенными.Группирование областей содержимого и компонентов, таких как навигация, области избранного содержимого, вспомогательные компоненты и нижние колонтитулы, по отдельности избавит вас от головной боли на протяжении всего процесса проектирования и разработки проекта.

10. Станьте умнее

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

Следующая страница: еще 10 советов по веб-дизайну для Photoshop …

35 высококачественных уроков по веб-дизайну в Photoshop

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

Создайте стильную страницу портфолио с временной шкалой с помощью Photoshop

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

Создайте элегантный узорчатый веб-дизайн в Photoshop

Этот урок создан Эриком Хоффманом, который научит вас создавать элегантные узоры в Photoshop.Это только одно из его руководств, если вам интересно, посмотрите!

Создание элегантного макета блога в Photoshop

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

Как создать веб-дизайн в стиле гранж с помощью Photoshop

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

Создание текстурированного веб-сайта на открытом воздухе в Photoshop

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

Создание простого портфолио на основе Instagram в Photoshop

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

Как создать веб-сайт для чистого бизнеса с помощью Photoshop

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

Как сделать шаблон сайта

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

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

Самый подробный учебник из PSD в HTML

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

Создание простой сети для начинающих

Из этого простого урока вы научитесь создавать простую веб-страницу с помощью Photoshop. Под видео вы найдете все необходимые ресурсы.

Как создать профессиональный веб-сайт (часть 1)

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

Простой дизайн шаблона веб-страницы в фотошопе

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

Как создать одностраничный веб-дизайн в Photoshop

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

Веб-дизайн Photoshop — Бронирование туристического сайта

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

Афро-портфолио Дизайн веб-сайтов в Photoshop — Урок по Photoshop CC

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

Создайте чистый и стильный веб-дизайн в Photoshop

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

Создайте минималистичный и современный макет портфолио с помощью Photoshop

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

Создание макета веб-сайта магазина тем в Photoshop

Это еще одно простое пошаговое руководство, которое вам действительно пригодится. Он также поставляется с PSD, доступным для загрузки.

Стильное портфолио с зернистой текстурой

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

Упрощенный черно-белый макет портфолио в Photoshop

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

Красивый дизайн веб-сайта для потоковой передачи музыки в Photoshop

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

Создайте портфель из синего цвета с гладкой текстурой

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

Как создать макет веб-сайта с помощью Photoshop из каркаса

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

Урок по дизайну веб-сайтов в Photoshop

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

Как сделать легкий и гладкий веб-макет в Photoshop

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

Веб-разработка Основы процесса и теории веб-дизайна

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

Создание веб-макета с 3D-элементами с помощью Photoshop

Если вы настроены изменить свой веб-сайт, ознакомьтесь с этим руководством, в котором вы узнаете, как создать элегантный и профессиональный веб-макет с 3D-элементами.

Создайте чистый современный дизайн веб-сайта в Photoshop

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

Создайте стильно элегантное портфолио, веб-дизайн в Photoshop

Это еще один полезный урок Photoshop от Six Studios, который научит создавать стильный и элегантный дизайн портфолио. Не стесняйтесь проверить это.

Создание элегантного веб-дизайна портфолио в Photoshop

Придайте своему портфолио элегантный вид с помощью этого урока Photoshop и узнайте несколько советов и приемов, которые прилагаются к нему.

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

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

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

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

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

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

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

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

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

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

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

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