Шапка для сайта картинки – 20 —

Где взять бесплатные картинки для сайта или блога

Авторский блог является неким виртуальным представительством, поэтому должен выглядеть уникально. Проблема в том, что большинство бесплатных шаблонов (если не все) доступны каждому в сети, поэтому достаточно велик шанс встретить два абсолютно одинаковых сайта. Я говорю сейчас исключительно о дизайне шапки сайта и других элементов макета, так как это первое, что бросается в глаза посетителя. Это можно сравнить с тем, когда вы идете на вечеринку или праздник и встречаете человека, который одет точно также. Могу предположить, что вы его возненавидите и будете всячески избегать:)

Но не спешите расстраиваться, ведь очень часто внести уникальность в блог можно простой сменой шапки (header`а). Как правило, этот ход, как и добавление различных виджетов в боковую панель, может выделить вас среди других блоггеров.

Поэтому предлагаю вашем вниманию несколько сайтов с «хедерами», которые помогут персонализировать и приукрасить ваш проект:

  1. 45 Free Beautiful Blog Headers — классный список от Smashing Magazine, некоторые шапки содержат исходники (.psd файлы), поэтому можно их слегка модифицировать.
  2. Free Webpage Headers — неплохая коллекция из нескольких сотен изображений размером 800×200. Картинки отсортированы по категориями для более удобной навигации и поиска.
  3. Dreamstime — на самом деле на этом сайте за изображений нужно платить, тем не менее есть раздел с бесплатными экземплярами.
  4. stock.xchng — не смотря на странное название, на сайте можно найти тысячи бесплатных изображений для блогов.
  5. Stock Vault — сайт, где дизайнеры и фотографы могут поделиться своими работами.
  6. FreeFoto — довольно неплохой сайт, где также можно поискать изображения для шапки.

Платные (премиум) сайты

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

  1. Fotolia — за $1 можно найти классные уникальные изображения для вашего сайта, достаточно легкая регистрация и покупка «кредитов» сразу после настройки своей учетной записи.
  2. Stockxpert — вот еще один ресурс, если вы не нашли подходящего «хэдэра» на Fotolia, стоимость также начинается с одного доллара.
  3. Shutterstock — несколько отличается от предыдущих, так как платить придется помесячно. За 30 дней сможете скачать до 750 изображений.
  4. Photo Library (также известен как Index Stock) — навигация там сложная, зато картинки без наложения логотипа (watermark), поэтому многие можно сохранить.
  5. Getty Images — картинки высокого качества на симпатичном сайте, хотя вряд ли пригодятся для блога.
  6. Photos.com — еще один великолепный сайт с фотками высшего качества. Вы платите $99 в месяц, но можете при этом скачивать столько изображений, сколько вам захочется. Это хороший вариант для маленького бизнеса или фирм, которым требуются изображения для веб-сайтов.
  7. Creastock.com — предлагают фотографии хорошего качества, но стоимость при этом не очень маленькая.

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

Пост написан по мотивам — Top 5 Free Blog Header Image Websites.

design-mania.ru

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

  • резюме доклада флаер

    резюме доклада флаер «представление элементов брошюра шаблон а4 установленные для рекламы рекламы на сайте

    800*800

  • день рождения макет сайта, день рождения, С днем рождения, цветной шар PNG и PSD

    день рождения макет сайта

    1200*1200

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

    снег дрейф вектор праздники новогодний дизайн замороженный лед снежная шапка снежок изолированных иллюстрация

    5000*5000

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

    новогодняя шапка прозрачный элемент материал

    2500*2500

  • шапка бакалавра, мультфильм шапка бакалавра, шляпа, черная шляпа PNG и PSD

    шапка бакалавра

    1200*1200

  • Рождество снежная шапка, Снеговик снежная шапка, Рождество материал, рождество шляпы PNG и PSD

    Рождество снежная шапка

    1200*1200

  • компьютерное зрение примером концепцииквартиру концепции веб   дизайна веб   сайтов и мобильных websitevector иллюстрация, резюме, доступ, справочная информация PNG ресурс рисунок и векторное изображение

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

    2000*2000

  • визитная карточка  визитная карточка шаблон  горизонтальной простой чистой формат шаблона  бизнес   баннер шаблон для веб   сайта Шаблон

    визитная карточка визитная карточка шаблон горизонтальной простой чистой формат шаблона бизнес баннер шаблон для веб сайта

    800*800

  • красный Санта шляпа вектор снег одежда праздник объект сезонный аксессуар Санта Клаус праздник красный и белый шапка зима Рождество дизайн изолированных реалистичные иллюстрации, крышка, шляпа, клаус PNG ресурс рисунок и векторное изображение

    красный Санта шляпа вектор снег одежда праздник объект сезонный аксессуар Санта Клаус праздник красный и белый шапка зима Рождество дизайн изолированных реалистичные иллюстрации

    5000*5000

  • вектор голубой веб   сайта баннер фон художественного дизайна, вектор голубой веб - сайта баннер, винтаж баннер с лозунгом шаблон Photoshop, баннер PNG и PSD

    вектор голубой веб сайта баннер фон художественного дизайна

    1200*1200

  • Новости сайта в поле заголовок, вектор Png, бизнес - Баннеры, Заголовки новостей PNG ресурс рисунок и векторное изображение

    Новости сайта в поле заголовок

    1200*1200

  • Счастливого Рождества название типография красный с новогодней шапкой, рождество, Christmas, красный PNG и PSD

    Счастливого Рождества название типография красный с новогодней шапкой

    1200*1200

  • кроликовый пасхальный кролик малая красная шапка, кролик, мультфильм, милосердие PNG и PSD

    кроликовый пасхальный кролик малая красная шапка

    1200*1200

  • бизнес управления финансами платить за клик значок образование для веб сайтов и разработка приложений плоской векторной иллюстрации, реклама, спросил, бизнес PNG ресурс рисунок и векторное изображение

    бизнес управления финансами платить за клик значок образование для веб сайтов и разработка приложений плоской векторной иллюстрации

    5000*5000

  • блоги обновления контента и новостей круто вектор подписаться на кнопку с курсора  а уведомление в квартире дизайн идеально для потокового видео на сайте баннеры, реклама, стрелка, справочная информация PNG ресурс рисунок и векторное изображение

    блоги обновления контента и новостей круто вектор подписаться на кнопку с курсора а уведомление в квартире дизайн идеально для потокового видео на сайте баннеры

    5000*5000

  • дизайн веб   сайта баннер, веб - сайт, баннер, дизайн PNG и PSD

    дизайн веб сайта баннер

    3000*1400

  • Векторная иллюстрация фон сайта в разработке, вектор строительства, веб-сайт, строительство PNG ресурс рисунок и векторное изображение

    Векторная иллюстрация фон сайта в разработке

    800*800

  • сообщение веб   сайтов, Facebook, Twitter, Facebook иконок PNG и PSD

    сообщение веб сайтов

    1200*1200

  • в рождественской шапке, шляпа, санта - клаус, Santaclaus PNG и PSD

    в рождественской шапке

    1200*1200

  • больше любит изометрический примером концепцииизометрический квартиру концепции веб   дизайна веб   сайтов и мобильных websitevector иллюстрация,

    больше любит изометрический примером концепцииизометрический квартиру концепции веб дизайна веб сайтов и мобильных websitevector иллюстрация

    2000*2000

  • вектор красочный сайт баннер справочная арт   дизайн, вектор красочный баннер, винтаж баннер с лозунгом шаблон Photoshop, баннер PNG и PSD

    вектор красочный сайт баннер справочная арт дизайн

    1200*1200

  • вектор ведьма шапка, Hd, векторный диаграмма, Хэллоуин PNG ресурс рисунок и векторное изображение

    вектор ведьма шапка

    1200*1200

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

    иллюстрации к бизнес решения поисковой оптимизациисовременные вектор иллюстрации концепций для веб сайта и мобильного веб сайтов начать

    2000*2000

  • концепция развития программ и кодирования применение значок для веб   сайтов,

    концепция развития программ и кодирования применение значок для веб сайтов

    5000*5000

  • Новогодняя шапка коммерческий материал, рождество, Новогодняя шапка, шляпа PNG и PSD

    Новогодняя шапка коммерческий материал

    2000*2000

  • бизнес  технологий и финансов icon set для веб   сайтов и мобильных приложений, учет, блоги, бизнес PNG ресурс рисунок и векторное изображение

    бизнес технологий и финансов icon set для веб сайтов и мобильных приложений

    5000*5000

  • блоги обновления контента и новостей круто вектор подписаться на кнопку с курсора  а увед
  • ru.pngtree.com

    Урок фотошоп — Как сделать шапку для сайта или блога

    Дорогие друзья сегодня мы с вами рассмотрим такой актуальный вопрос – как сделать шапку для сайта или блога? После изучения данного урока вы научитесь делать шапки для сайтов в фотошопе. Делать мы будем вот такую шапку:

    (нажмите на картику для просмотра оригинала)

     

    У меня стоит Photoshop CS4 (английская версия). Будем считать что к нам поступил заказ на изготовление шапки для сайта или блога. Заказчик прислал образец будущей шапки и пояснил:

    Слева на шапке хочу тематическую иконку + название сайта и слоган, справа будет 3 тематических картинки из мульфильмом и фильмов. Снизу на шапке будет горизонтальное меню (по центру).

    (нажмите на картику для просмотра оригинала)

    И так, садитесь по удобнее, я начинаю свой рассказ 🙂 1. Создаем новый документ File→New (Файл→Новый или CTRL+N– в скобочках вместе с переводом буду указывать сокращения – проще говоря “горячие” клавиши, которые позволяют экономить время в программе фотошоп). В окошке я указал следующие параметры:

    В итоге получился новый документ:

    (нажмите на картику для просмотра оригинала)

    После этого сделаем небольшую настройку фотошопа: Ставлю галочку Auto-Select (Автоматически выбрать) и в выпадающем меню выбираю Layer (Слои) – данная настройка позволяет выбрать любой слой по клику на нем.

    Включаем шкалу-линейку для документа: Идем Views→Rules (Вид→Линейки или просто жмем CTRL+R) должна появиться горизонтальная и вертикальная шкала-линейка. Сразу же следует убедиться, что данные на линейке отображаются в пикселях. Для этого щелкаем дважды мышкой по самой шкале с линейкой и выбираем такие данные: После этого я с помощью направляющих (щелкаете по линейке и тянете мышку вправо или вниз), размечаю места под основные элементы шапки:

    (нажмите на картику для просмотра оригинала)

    Направляющие можно Показывать/Прятать с помощью View→Show→Guides (Вид→Показывать→Направляющие) или CTRL+; 2. Приступим к созданию основных элементов шапки. Создадим фон для шапки. Идем Windows→Layers (Окно→Слои или F7). Дважды щелкаем по слою Background, тем самым преобразуем его в простой слой (название слоя я указал – fon-shapki)

    Далее еще раз дважды щелкаем по слою fon-shapki и открывается окошко со стилями слоя, там выбираем нужный стиль для слоя, я выбрал градиентную заливку — Gradient Overlay (Заливка градиентом) и поставил следующие настройки. Щелкаем два раза по полоске с градентом: В следующем окошке щелкаем мышкой по левому маркеру: В открывшемся окошке, внизу указываем цвет 196ca6 и жмем OK. Далее щелкаем по правому маркеру и в открывшемся окошке указываем цвет 0048a0 и жмем OK. Далее копируем наш слой с фоном. В палитре Layers (Слои, F7) выбираем наш слой мышкой, далее кликаем мышкой на слои и не отпуская кнопки мыши переносим слой на следующую иконку и отпускаем мышку. Создастся новый слой – копия предыдущего (можно просто нажать CRTL+J). Не снимая выделение со нового слоя, установим ему Opacity (Непрозрачность) в 18%. Далее щелкаем два раза новому слою, снимаем галочку с Gradient Overlay (Заливка градиентом) и ставим галочку Pattern Overlay (Заливка текстурой), ставим следующие настройки: Все фон для шапки у нас готов. 3. Далее сделаем фон для горизонтального меню снизу. Делаем новый слой – нажимаем по пиктограмме или просто жмем Shift+Ctrl+N (у нас получился новый прозрачный слой). После этого выбираем инструмент Rectangular Marque Tool (Прямоугольное выделение, M) и рисуем прямоугольное выделение.

    (нажмите на картику для просмотра оригинала)

    После этого заливаем наше выделение произвольным цветом. Берем инструмент Paint Bucket Tool (Ведро, G) и кликаем по выделению (я выбрал цвет 165394).

    Переходим в стили нового слоя и ставим галочки напротив следующих пунктов: Drop Shadow (Отбрасывать тень), Gradient Overlay (Градиентная заливка), Stroke (Обводка), со следующими настройками: После этого укажем Opacity (Непрозрачность) слою в 80%.

    (нажмите на картику для просмотра оригинала)

    После того как у нас готов фон, можно приступать к созданию других элементов шапки. 4. Напишем название сайта, слоган и текст для горизонтального меню. Для этого выбираем инструмент Horizontal Type Tool (Горизонтальный текст) и щелкаем на шапке в том месте, в котором планируем написать надпись, и пишем ее. Маленькая подсказка. Cлои очень удобно двигать или перетаскивать из документа в документ с помощью инструмента Move Tool. Я выбрал для названия сайта надпись “Myvideo.com” и настройки текста выбрал следующие:

    Для слогана выбрал надпись “только лучшее видео и фильмы” и следующие настройки текста: Для пунктов меню я выбрал надписи “Главная”, “О сайте”, “Контакты”, “Поиск”, “Реклама на сайте”, “Блог” я выбрал следующие настройки текста: И вот что у меня получилось.

    (нажмите на картику для просмотра оригинала)

    Для слоя с названием сайта, применил следующие настройки для стилей слоя (Drop Shadow и Bevel and Emboss).

    Что бы изменить цвет текста, выбираем инструмент , щелкаем прямо по тексту с названием сайта и выделяем текст для которого нужно изменить цвет (я выбрал цвет — add7fe). 5. После этого нам нужно подобрать тематическую иконку. Иконку можно легко найти на интересном сайте Iconfinder.com, просто заходим на сайт, вводим слово характеризующее нужную нам тематику (я ввел слово — Video) и нажимаем Search (Поиск). Выбираем понравившуюся иконку и сохраняем (кликаем правой кнопкой мыши по картинке и выбираем пункт Сохранить изображение…) ее на компьютер. Я выбрал такую картинку: Далее открываем картинку в фотошопе File→Open. Теперь нужно перенести слой с иконкой в наш документ с шапкой. Для этого выбираем инструмент Move Tool, выбираем слои с иконкой, кликаем правой кнопкой мыши и выбираем пункт Dublicate Layer (Копия слоя). В появившемся окошке указываем, какой слой, в какой документ копировать: После проделанных манипуляций иконка должна добавиться в документ с шапкой. Как видим, она имеет гораздо больший размер, чем нам нужен, будем ее уменьшать. Для этого идем Edit→Free Transform (Правка→Свободная Трансформация, Ctrl+T). Вокруг картинки образовалась рамочка с маркерами. Далее для равномерного уменьшения картинки, нажмем Shift и не отпуская его делаем рамку меньше (уменьшая мышкой рамку) тем самым трансформируем картинку как нам нужно. У меня получилось вот так:

    (нажмите на картику для просмотра оригинала)

    Как видите большую часть шапки мы уже сделали, осталось добавить тематические картинки справа и у нас получиться интересная шапка для сайта или блога. 6. Покажу, на примере как я делал первую картинку. Как видите на конечном образце шапки (картинка в самом начале этой новости), все картинки вставлены в рамочки. Нам нужно создать рамку и поместить в нее картинку с нашим изображением. Для этого создадим новый слой Shift+Ctrl+N. Выбираем инструмент инструмент Rectangular Marque Tool (Прямоугольное выделение) и рисуем прямоугольное выделение. Удобно делать выделение с направляющимися (если нужен точный размер), но можно и без них (на глаз).

    Заливаем наше выделение любым цветом берем инструмент Paint Bucket Tool (Ведро, G) или просто жмем Alt+Backspace. После этого щелкаем по слою два раза и попадаем в стили слоя. Я выставил такие настройки для Drop Shadow, Color Overlay: Тематические картинки мультфильмов и фильмов я взял с сайта Kinomania.ru. После того как мы подобрали картинки, открываем их в фотошопе. Переносим каждую картинку в документ с нашей шапкой.

    ([color=#ce2c2c]Внимание![/color] Слой с картинкой после добавления в новый документ может оказаться ниже других слоев распложенных в этом документе. Порядок слоев в документе можно изменять мышью. Для этого в палитре Layer (Слои, F7) выберите нужный слой, нажмите мышью на него, теперь не отпуская мышь перетащите слой выше или ниже других слоев в документе.) Если вы хотите что бы слой оказался выше всех слоев – выделите слой и нажмите Shift+Ctrl+].)

    (нажмите на картику для просмотра оригинала)

    Далее будем делать эффект выхода картинки из кадра. Для этого мы будем использовать маски в фотошопе. Выбираем слой с нашей картинкой, после этого выбираем инструмент инструмент Rectangular Marque Tool (Прямоугольное выделение, M) и рисуем прямоугольное выделение поверх сделанного фона.

    После этого в палитре Layers (Слой, F7), нажимаем на кнопочку . Далее убираем замочек (кликаем по нему мышкой) между картинкой и ее маской. После этого выбираем саму картинку. Проделанные действия позволят нам двигать картинку внутри маски, так же внутри картинку можно трансформировать. Двигать картинку можно клавишами — Вправо, Влево, Вверх и Вниз на клавиатуре или с помощью инструмента Move Tool. Двигая и трансформируя картинку добьемся нужного нам результата:

    (нажмите на картику для просмотра оригинала)

    Теперь нам осталось только добавить ковбою обрезанную шляпу. Для этого идем в палитру со слоями (жмем F7), выделяем наш слой с картинкой и выбираем пиктограмму с маской слоя.

    Далее устанавливаем в фотошопе цвет переднего/заднего плана по умолчанию (черный/белый), для этого жмем D на клавиатуре, так же можно изменять цвета местами с помощью клавиши X (есть так же соответствующие кнопочки внизу панели с инструментами). После этого выбираем инструмент Brush Tool (Кисть, B). Теперь рисуя кистью когда выбран Черный цвет — как цвет переднего плана, на картинки у нас будет маска стираться, а когда у кисти будет стоять Белый цвет – как цвет переднего фона, картинка у нас будет появляться. Проще говоря, при активном Черном цвете, кисточка работает как Резинка (т.е. стирает изображение), а при активном Белом цвете кисточка работает как Восстановитель (восстанавливает все то, что скрыто). Аккуратно обработав картинку кистью, у нас получился эффект выхода из картинки (шапка выходит за пределы картинки). Добавим внутреннюю тень для картинки. Добавим стиль для слоя Inner Shadow (Внутренняя Тень). вот что получилось: Осталось повторить все эти действия для второй и третьей картинки. В конечном итоге у меня получилась готовая шапка для сайта или блога. (нажмите на картику для просмотра оригинала)
    Шапка получилась простенькая, но со вкусом.

    blogohelp.ru

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *