Блог О пользователеmikele

Регистрация

Календарь

  Январь 2010  
Пн Вт Ср Чт Пт Сб Вс
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31

Фотошоп Вам в помощь

 
Ученье свет, а неученье - чуть свет и на работу!
 

Делаем отступы вокруг картинки


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

<  img  >
пару параметров: hspace и vspace (соответственно отступ по-горизонтали и по-вертикали)

Пример: 

<  img src="адрес рисунка" hspace="10" vspace="10"  >
. И всё, отступ по 10 пикселей по-горизонтали и по-вертикали готов. Но, в большинстве случаев, на блог-платформах этот код режется и на выходе мы имеем такой результат. (рисунок справа)

 

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

Какой выход из этой ситуации? Я предлагаю Вам использовать один из вариантов решения этой проблемы. Если нет возможности сделать отступ вокруг рисунка — нужно его нарисовать. Ниже пошагово рассмотрим все действия.

Возьмем более сложный вариант, когда цвет фона вашего блога не белый. 

 

Шаг N 1. Открываем блог и делаем его скриншот (нажимаем на клавиатуре кнопку PrntScrn).

Шаг N 2. Открываем Adobe Photoshop и создаем новый документ. (File — New). Вставляем в него скриншот блога (Edit — Paste).

Шаг N 3. На панели инструментов берем пипетку и кликаем ей на фоне блога. В результате этих действий основным цветом становится цвет фона блога.

 


Шаг N 4. Открываем в фотошопе нужный рисунок, например этот:

 


 Шаг N 5. Закрашиваем фон. Берем, например, волшебную палочку и выделяем фон вокруг телефона. Перед тем, как залить фон цветом, можно расширить выделение на 1—2 пикселя(Select — Modify — Expand) для более гладких границ. Затем заливаем фон основным цветом (Edit — Fill — Foreground Color).

Шаг N 6. Рисуем отступы. Заходим в пункт меню Image —Canvas Size  и переводим отображение размеров в пикселях и внизу выбираем заполнить фон основным цветом (Foreground Color):

 


Шаг № 7. Теперь изменяем значения ширины и высоты рисунка. Если мы делаем отступы по 10 пикселей то размеры соответственно увеличиваем на 20 (по 10 на каждую сторону). Если вы будете располагать рисунок справа, то можно сместить якорь изменения размеров вправо (как на рисунке) и тогда будет создан только отступ слева.




Шаг N 8. Сохраняем рисунок, например в jpg-формат и загружаем в блог. Теперь создается иллюзия отступа текста от рисунка. Не забывайте, что при смене фона блога фон рисунка будет видимым и это нужно будет снова исправить в фотошопе.

 


Вот и весь секрет.