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

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

Ресурсы для веб-дизайнера

Бесшовные фоны

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

Думаю, Вы и сами не раз видели такие фоны на различных веб страницах в сети.

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

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

Что я здесь имею в виду?

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

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

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

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

К тому же браузеру гораздо проще загрузить более маленькую и легкую картинку, нежели большую.

Ресурс, о котором я хочу Вам рассказать, называется subtlepatterns.com.

Если Вы на него перейдете, то увидите следующее.

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

Кроме того, здесь есть поиск (правда писать придётся на английском). Таким образом, если Вам, например, нужна текстура бумаги, то вбейте «paper».

А дальше все просто! Нажимаете на кнопку «Download», и нужная текстура скачивается к Вам на компьютер. Распаковываете архив, открываете текстуру в Photoshop. Выбираете «Edit – Define Pattern» и все.

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

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

Бесшовные текстуры для композиций

Возможно, Вам также приходится создавать и композиции в Photoshop.

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

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

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

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

Теперь можете ее смело использовать.

Изображения формата .png

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

Имея такие изображения, становится гораздо проще создавать эффектные композиции.

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

Ресурс называется png.at.ua.

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

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

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

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

А на этом у меня сегодня все.

Не забывайте оставлять свои комментарии и подписывайтесь на обновление блога. С Вами была Анна Котельникова.

Удачи и до новых встреч!