Cоздаём пиксельный (точечный) фон для сайта/блога

* Особые навыки и знание программы не обязательны!

Для работы нам понадобится Adobe Photoshop, любой версии (в данном случае я использовал Photoshop CS 5), а также капля терпения и 10-15 минут свободного времени.

1. Запускаем программу Photoshop

2. Создаём новый документ

а.		В главном (верхнем) меню программы переходим File > New
б.		В открывшемся окне устанавливаем необходимые нам параметры
в.		Выбираем на панели инструментов «Лупу» (Zoom) и увеличиваем (кликая по центру документа) на сколько позволяет программа

3. Выбираем необходимый цвет и закрашиваем документ

а.		Выбираем цвет фона соответствующий дизайну сайта/блога
б.		На панели инструментов выбираем «Заливку» (Paint Bucket) и кликаем им на получившийся у нас квадрат

4. Рисуем точку в центре документа

а.		Создаём новый слой
или
б.		На панели инструментов выбираем инструмент «Карандаш» (Pencil)
в.		Выставляем толщину линии 1px
г.		Выбираем белый (или любой другой цвет из палитры)
д.		Кликаем один раз в середину документа                                                         Увеличить картику

5. Устанавливаем прозрачность

а.		В верхней части панели «Слои» (Layers) передвигаем бегунок «Прозрачность» (Opacity) до нужного нам значения.

6. Сохраняем получившееся изображение

а.		Идём в главное (верхнее) меню программы File > Save for Web & Devices
б.		В верхней, правой части открывшегося окна, из выпадающего меню выбираем тип картинки, который мы хотим получить (в данном случае PNG-24)                                                         Увеличить картику
в.		Нажимаем в нижней части окна кнопку «Сохранить» (Save), выбираем папку, где хотели бы сохранить файл и задаём имя файла. Снова нажимаем «Сохранить» (Save)
Увеличить картику

7. Готово. Теперь данный файл может служить фоновым изображением для любой web-страницы.

Точечный фон созданный такием способом, можно увидеть на нашего блога.

---

Дополнения и советы

1.

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

Что такое "горячие клавиши? Горячими клавишами называют комбинации кнопок на клавиатуре выполняющие различные функции для ускорения рабочего процесса. Практически все действия в программе Adobe Photoshop можно выполнять двумя способами: 1.) Ходить по вкладкам меню / по панели инструментов мышью, выберая необходимые функции для достижения требуемого результата; 2.)Переключаясь при помощи "горячих клавиш" переключатся между инструментами и выполнять действия не трогая лишний раз мышь, тем самым экономя драгоценное время.

	И так... "Горячие клавиши", которые можно использовать при выполнении данного урока:
	а.		Создаём новый документ (File > New) = Ctrl + N
	б.		Выбираем инструмент "Лупа" (Zoom) = Z
	в.		Выбираем инструмент "Заливка / Градиент" (Paint Bucket / Gradient) = G
	г.		Создаём новый слой (Layer) = Shift + Ctrl + N
	д.		Выбираем инструмент «Карандаш / Кисть» (Pencil / Brush) = B
	е.		Регулируем толщину кисти / карандаша = Ctrl + [ или Ctrl+] - работает в версии CS 2 и выше
	ж.		Сброс цветов на стандартные (Чёрный и Белый) = D
	з.		Переключение между двумя выбранными цветами = X
	и.		Установка прозрачности = 1,2,3,4,5,6,7,8,9,0 - каждая из цифр соответствует десятикратному значению прозрачности слоя (Opacity), ноль означает 100%. Для установки промежуточных значений нажимайте две клавиши подряд, на пример для установки значения прозрачности 35% необходимо нажать кнопки 3 и 5. Управление прозрачностью с помощью клавиатуры может не срабатывать, если в момент переключения не выбран инструмент "Движение" (Move). Для быстрого выбора нажмите клавишу V, а за тем установите значение прозрачности.
	к.		Сохраняем документ для Web = Ctrl + Shift + Alt + S

2.

Формат файла

Что такое PNG и чем он отличается от других форматов?

	Почему мы сохранили файл именно в формате PNG?
	а.		Файлы более популярного JPG имеют свойство со временем портится (терять в качестве). Если же взять формат GIF, то PNG выгодно отличается от своего собрата качеством, хотя на такой маленькой картинке это можно и не заметить.
	б.		Вес. Для интернет страниц довольно значимым является вес картинок, это влияет на скорость загрузки страницы, а так же (возможно это кому-то покажется смешным в отношении файлов таких размеров, но в случае больших проектов это немаловажный фактор) на занимаемое место арендуемого сервера (Hosting). В случае бесплатных блогов, данное примечание значения не имеет. Стоит отметить, что скорость загрузки страницы влияет на выдачу в таких поисковых машинах, как Google, Яндекс, Bing и прочие. Если сравнить три формата c одинаковым содержимым (конечным результатом нашего урока): JPG = 322 b PNG = 120 b GIF = 45 b то выходит, что самым лёгким оказался файл формата GIF, в нашем случае допустимо его использование и даже желательно, но при более сложной цветовой гамме GIF может исказить содержимое изображения. Моя же цель заключается в том, чтобы научить вас использовать оптимальные решения для разных задач именно по этой причине я и выбрал PNG, как формат который нам подойдёт.