Конечно, не обязательно знать, как сверстать шаблон из psd . Но эти знания могут пригодиться любому владельцу сайта. Всякое бывает в жизни!
Эти шаблоны являются исходным материалом для верстки сайта. Заготовка полностью отражает не только дизайн будущего ресурса, но и его размеры, схему расположения всех элементов. Создание psd шаблона для сайта является вторым этапом в цикле разработки веб-дизайна.
Перед этим с заказчиком обговариваются возможные варианты дизайна ресурса. На основании этих сведений и пожеланий клиента составляется техническое задание для художников и дизайнеров. По нему художники рисуют эскиз внешнего вида будущего ресурса, а дизайнеры создают в графических редакторах цифровое изображение художественного образца.
Разработка шаблона psd для сайта должна происходить с учетом возможностей воссоздания его дизайна с помощью языка html и css . Вот некоторые характеристики, которыми должен обладать качественный шаблон:
Благодаря многослойности изменение одной части шаблона никак не отразится на всех остальных его элементах.
Создаются заготовки не только для сайтов, но и для отдельных элементов его дизайна. Качественный шаблон баннера должен обладать большинством из выше перечисленных характеристик. При этом выбор его размеров зависит от места расположения баннера на сайте.
Структура psd шаблонов баннеров также состоит из слоев, сгруппированных по соответствующим папкам. То есть такой шаблон представляет собой не простой рисунок, а составное изображение.
Благодаря послойной структуре шаблон баннера легко редактируется. Без нарушения общей структуры можно сменить все надписи и рисунки.
Но создать шаблон баннера под силу не только профессионалу, но и обычному пользователю. Для этого можно использовать ряд специальных онлайн-сервисов. Одним из них является сайт bannerfans.com :
Рассмотрим на упрощенном примере, как происходит верстка. Для этого возьмем простой двухколоночный шаблон. В его шапке размещен логотип сайта, который мы вырежем, и будем использовать как фоновое изображение. Остальные части шаблона будем верстать с помощью html , а стили и размеры установим классами css :
Вот структура сайта, которую можно сверстать с помощью тегов
Теперь рассмотрим стилевые настройки, заданные с помощью классов css :
Header { margin-left:auto; margin-right:auto; margin-bottom:10px; width:1000px; height:100px; border:1px solid #000000; background: #009966; background-image: url(img/1.gif); } .pages { margin-left:auto; margin-right:auto; width:1000px; } .content { margin-right:10px; width:806px; height:450px; border:1px solid #000000; background: #999999; float:left; } .sidebar { width:180px; height:450px; border:1px solid #000000; background: #FF9900; float:left; } .foot { clear:both; } .footer { margin-top:10px; margin-left:auto; margin-right:auto; width:1000px; height:50px; border:1px solid #000000; background: #333399; }
Для каждого слоя в описании классов с помощью свойств width и height устанавливаются размеры. Цвет фона задается параметром background .
Позиционирование элементов осуществляется значениями нескольких полей:
Для шапки сразу устанавливается цвет и фоновое изображение. Рисунок вырезается из шаблона psd для сайта и помещается в отдельную папку. Путь к файлу указывается в поле background-image через url .
Все программы в подборке бесплатны. С функциональностью Photoshop они, конечно, не сравнятся, но с простыми задачами справятся. Как минимум вы сможете просто открыть PSD-файл как изображение, а некоторые из этих программ открывают даже слои.
Это один из самых интересных бесплатных аналогов Photoshop. GIMP читает файлы PSD без установки дополнительных плагинов, поэтому открыть файл можно так же, как и обычные изображения: File → Open.
GIMP открывает слои PSD-документа для редактирования. Но тут есть свои подводные камни: программа читает далеко не все слои, некоторые требуется растрировать. А ещё GIMP может некорректно сохранить изменения в PSD. После этого файл может не открыться в Photoshop. Последнее не должно вас беспокоить, если вы открыли файл для незначительных правок и сохранения картинки в JPEG.
Paint.NET лучше стандартного Microsoft Paint, но такой же максимально понятный и простой в использовании. Если не знаете, что делать с файлом в GIMP, открывайте Paint.NET.
Программа читает PSD, но только после установки соответствующего плагина. Для этого:
Photopea - онлайн-сервис, интерфейс которого напоминает Photoshop или GIMP. Его преимущество - не нужно ничего устанавливать. Программа откроется в браузере на любом устройстве. Но онлайн-приложения зачастую не такие практичные, как устанавливаемые программы. Photopea не исключение, но зато позволяет работать со слоями в PSD-документе.
XnView - своеобразный графический органайзер, в котором можно открыть и упорядочить коллекции изображений на вашем ПК. В XnView есть примитивные функции редактирования: можно изменить цветовую палитру, добавить фильтр или эффект.
Программа непопулярна, а зря: она способна открыть изображения в более чем 500 форматах и пересохранить их в ещё 70. Так что установите её в качестве примитивного редактора для PSD или конвертера.
В базовой версии поддерживаются только английский, французский и немецкий языки.
Программа IrfanView, как и XnView, предназначена для просмотра и конвертирования графических файлов. Но IrfanView поддерживает меньше форматов. Программа открывает PSD как картинку. Редактировать слои нельзя, но обычное изображение можно. Чтобы получить больше возможностей для обработки, PSD-файл сначала нужно конвертировать в другой формат.
IrfanView быстро работает и мало весит (установочные файлы занимают чуть больше 3 МБ).
Если ни один из вариантов вам не подходит, можете конвертировать PSD в JPG, используя Go2Convert или любой другой конвертер. Вы также можете открыть PSD как картинку в Google Drive.
Объявление
Файлы PSD позволяют графическим дизайнерам, а также другим пользователям редактировать изображения с помощью слоев. Слои позволяют легко добавлять и удалять элементы, а также добавлять и удалять различные фильтры, эффекты, диапозитивы и в принципе менять изображение. Файлы PSD можно открыть различными версиями программы Photoshop. Более того, такие файлы можно сохранять в других форматах (PNG, JPEG, GIF и т.п.) для дальнейшей загрузки, отправки или сохранения. После конвертирования файла PSD в другой формат все слои становятся одним слоем. В случае же сохранения файла с расширением PSD слои сохранятся. Их можно просматривать и редактировать. Такие файлы очень часто используются в случае с черновиками документом, а не с готовыми публикациями или изображениями.
Файлы программы Photoshop с расширением PSD сохраняют изображение и одновременно позволяют воспользоваться набором инструментов редактирования в программе Adobe Photoshop. Некоторые из таких инструментов включают следующие: маски, диапозитивы, сочетание двух полутонов, градиенты, балансировку цветов, смешение, траектории обрезки и др. Файлы PSВ похожи на файлы PSD, не могут содержать изображения, чьи высота и ширина превышают 300 000 пикселей, а длина составляет более 4 эксабайт. При этом в таких файлах сохраняются отдельные слои, а не целое изображение. Такие запатентованные типы файлов имеют больший размер и служат в качестве рабочих документов для проектов графического дизайна. Конвертирование из формата PSD в другие форматы изображений позволяет получить окончательно сжатое изображение.
| Расширение файла | .psd |
