Дизайн сайта формата psd в photoshop

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

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

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

В первую очередь - цвет фона. Останется ли он для вас белым? Или, возможно, вы решили заменить его другим цветом? Может, это картинка или определенная текстура? О да, вариантов просто огромное количество. Вы сможете создать поистине уникальный дизайн сайта в photoshop. Если вы оставили белый, можно с этим ничего не менять, если захотели другой цвет, лучше создавать его на новой слое. Для того чтобы создать новый слой, нажмите сочетание клавиш Shift+Ctrl+N и нажмите на кнопку "ОК". Теперь заливайте цветом или попросту перетаскивайте картинку извне. Для того,чтобы залить цветом - в самом низу есть квадратики, нажав на которые появится палитра. После того как выбран цвет, выберите инструмент "заливка" и нажмите на весь слой.

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

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

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

Если вы хотите сразу же приступить к верстке сайта, не закрывайте этот файл в фотошопе. Нам понадобятся отдельные части вашего макета для того, чтобы можно было потом разместить их на веб-странице. Собирать отдельные части ещё проще: для этого нам понадобится только один инструмент - slice tool, инструмент для нарезки, который и выглядит как нож. Итак, выбираем этот инструмент и с его помощью выделяем отдельные части макета. Во круг выделенных частей появятся почти тонкие рамки, чтобы вы не спутались и на самой странице появится удобная разметка. Эта разметка появляется затем, чтобы вы могли выделить элементы, идущие друг за другом с одинаковыми размерами. Итак, после выделения нажимаем на кнопку "Файл" в меню и из выпадающего списка выбираем "Сохранить для Веб и Девайсов". Вы увидите окошко, в котором нужно будет проследить, чтобы формат сохраняемых изображений был png24. Вам останется только сохранить их в нужной папке и вы сразу же сможете использовать дизайн на сайте.

Верстка из PSD шаблона

Как скопировать любой сайт в формате фотошоп, обзор рограммы Page Layers

Интересные записи

• Курсы Photoshop (фотошоп) для начинающих в Днепре
• Тема Фотошоп и дизайн - где поучиться (Москва)
• Как разработать дизайн сайта
• Рисуем Легко
• Какие эффекты с текстом можно сделать в фотошопе
• Как сделать кожу в фотошопе