Если Вы занимаетесь дизайном веб сайтов в программе Photoshop, то информация из этого поста должна быть Вам полезной. Сегодня я расскажу о 3 сервисах, которые я считаю достаточно нужными и которыми пользуюсь сама.
Речь в данном посте пойдет об изображениях. Однако, не просто об изображениях (о том, где можно взять изображения для своего сайта я писала в статье «Где брать графику и фото для сайта» ), а об изображениях с бесшовным фоном, текстурах и картинках формата .png (с прозрачным фоном).
Ресурсы для веб-дизайнера
Бесшовные фоны
Довольно часто, при создании дизайна для сайта хочется сделать фон страницы не просто однотонным, а применить к нему какой-то тематический фон, или текстурный фон, обогащающий вид всей страницы.
Думаю, Вы и сами не раз видели такие фоны на различных веб страницах в сети.
Главное здесь не переборщить и не применить текстуру, которая будет раздражать посетителей Вашего сайта. Текстура фона должна быть легкой, не раздражающей и смотреться приятно.
Однако, это то, что касается внешней стороны вопроса. А если взглянуть на техническую реализацию этого дела, то самое главное, чтобы текстурный фон был «бесшовным».
Что я здесь имею в виду?
Когда вы применяете какую-то текстурную неоднородную заливку к Вашей странице, Вы по сути используете изображение, которое будет повторяться.
Я думаю, Вы понимаете, что создавать огромное изображение фона страницы в надежде, что все страницы будут одной высоты и текстура не будет иметь стыков глупо и непрактично, а также большое изображение будет загружаться не очень-то быстро.
А создать небольшой фрагмент текстурного изображения, который в местах повторения не будет иметь стыков самому не всегда просто. Именно поэтому, есть смысл прибегнуть к уже готовым «бесшовным» фоновым текстурам, которые мы можем найти в сети. И сегодня я расскажу Вам где именно.
Такие текстуры представляют собой небольшое изображение, которое при повторении не образует некрасивых стыков, и общая картина фона будет смотреться как одна сплошная заливка.
К тому же браузеру гораздо проще загрузить более маленькую и легкую картинку, нежели большую.
Ресурс, о котором я хочу Вам рассказать, называется subtlepatterns.com.
Если Вы на него перейдете, то увидите следующее.
Пролистайте страницу ниже, и Вы увидите разнообразные текстуры, любую из которых можно скачать и применить для своего дизайна.
Кроме того, здесь есть поиск (правда писать придётся на английском). Таким образом, если Вам, например, нужна текстура бумаги, то вбейте «paper».
А дальше все просто! Нажимаете на кнопку «Download», и нужная текстура скачивается к Вам на компьютер. Распаковываете архив, открываете текстуру в Photoshop. Выбираете «Edit – Define Pattern» и все.
Теперь, когда Вам нужно будет что-то залить этой текстурой, выбирайте инструмент заливки выставляя ее свойства на «Patter» (это в верхнем левом углу) и там же в маленьком окошке выбирайте Вашу текстуру.
Заливка получается ровной и красивой, а для html верстки теперь можно использовать маленькое и легкое изображение и не беспокоиться о том, как фоновая текстурная заливка будет отображаться.
Бесшовные текстуры для композиций
Возможно, Вам также приходится создавать и композиции в Photoshop.
Например, часто для шапки сайта приходится выдумывать что-то такое-эдакое, что-либо очень уникальное.
Довольно часто для этого бывают нужны текстуры травы, асфальта, песка, земли, кожи и даже обоев. И конечно же, такие текстуры тоже должны быть «бесшовными». То есть Вы должны иметь возможность залить этой текстурой любое пространство и любую форму и при этом сохранить однородность. Ведь если ее не сохранить, то естественность композиции тут же потеряется.
Для этого, я хочу Вам показать еще один сервис, который я наша в сети. Называется он render911.ru и содержит достаточно много подобных текстур.
Выбираете текстуру, щелкаете по ней мышью – она откроется в новом окне. А далее правой кнопкой мыши и выбираете «Сохранить изображение как» и сохраняете на свой компьютер.
Теперь можете ее смело использовать.
Изображения формата .png
Здесь я, в основном, имею в виду те изображения, которые непросто создать самому, и которые должны обязательно иметь прозрачный фон. Например, облака, световые эффекты, блики.
Имея такие изображения, становится гораздо проще создавать эффектные композиции.
Ресурс, который я хочу Вам показать, предоставляет такие (и не только) изображения для свободного скачивания.
Ресурс называется png.at.ua.
Здесь Вам также нужно выбрать категорию, далее выбрать одну из представленных коллекций, а после этого и само изображение.
Процедура скачивания аналогична, как и в бесшовных текстурах для композиций.
А после скачивания можете давать волю своей творческой фантазии, ведь теперь у Вас гораздо больше инструментов для создания неповторимых классных авторских дизайнов.
Кстати, если Вы новичок в веб-дизайне предлагаю Вам воспользоваться уникальным шансом и посмотреть <бесплатный мини-курс, который научит Вас рисовать дизайны сайтов в Photoshop. Просто смотрите и повторяйте.
А на этом у меня сегодня все.
Не забывайте оставлять свои комментарии и подписывайтесь на обновление блога. С Вами была Анна Котельникова.
Удачи и до новых встреч!