Существуют разные способы привлечь внимание читателя к определенной части текста. Один из этих способов – сделать обводку. С помощью программы Photoshop эту задачу можно выполнить несколькими способами.
Вам понадобится
- Программа Photoshop.
Инструкция
1 При помощи команды "New" («Новый») из меню "File" («Файл») создайте новый документ в программе Photoshop. Можете сделать то же действие, используя сочетание клавиш "Ctrl"+"N". В палитре «Инструменты» выберите инструмент "Horizontal Type Tool" («Горизонтальный текст»). Поместите указатель курсора на созданный документ, щелкните левой кнопкой мыши в нужном месте и напишите текст. Переведите написанный текст в растр. Для этого щелкните правой кнопкой мыши по текстовому слою в палитре "Layers" («Слои») и выберите опцию "Rasterize Type" («Растрировать текст»).Выполните обводку текста. Для этого воспользуйтесь командой "Stroke" («Обводка») из меню "Edit" («Редактирование»). В открывшемся окне настроек выберите ширину обводки в пикселях, цвет обводки и ее расположение: внутри обводимого контура, по центру или снаружи контура. Нажмите кнопку "ОК". Сохраните созданный документ при помощи команды "Save" («Сохранить») в меню "File" («Файл»).
2
Другой способ создания обводки дает возможность не переводить текст в растр. Иначе говоря, вы сможете редактировать текст с обводкой, созданной как стиль слоя. Для этого создайте слой с текстом, воспользовавшись инструментом «Горизонтальный текст».Кликните правой кнопкой мыши по текстовому слою и выберите опцию "Blending Options" («Опции наложения»). Поставьте галочку в чекбоксе "Stroke" («Обводка»). Кликните по этой вкладке левой кнопкой мыши. В открывшейся вкладке настроек выберите ширину обводки в пикселях. Этот параметр можно настроить, вводя чистовые значения в поле "Size" («Размер»), или передвигая ползунок. Из раскрывающихся списков выберите позицию обводки и режим наложения. В раскрывающемся списке "Fill Type" («Тип заливки») выберите, чем будет заполняться обводка: цветом, градиентом или текстурой. В открывшейся палитре настройте цвет, градиент или текстуру для обводки. Результат изменения параметров будет отображаться в документе, который вы создали. Нажмите кнопку "ОК".Сохраните текст с обводкой при помощи команды "Save" («Сохранить») в меню "File" («Файл»).
Совет 2: Как сделать раскрывающийся текст
Размещение скрытых блоков текста улучшает визуальное восприятие страницы веб-сайта - она загружается в браузер именно в том виде, который разработал дизайнер, независимо от размещенного объема информации. Кроме того, это удобнее посетителю - в поисках нужного блока информации ему не приходится просматривать весь массив, а только лишь небольшие «верхушки айсбергов».
Вам понадобится
Базовые знания языков HTML и JavaScript.
Инструкция
1 Используйте пользовательскую функцию на языке JavaScript, чтобы организовать в HTML-странице сокрытие и отображение нужных блоков текста. Общая для всех блоков функция намного удобнее, чем добавление кода к каждому из них по отдельности. В заголовочную часть исходного кода страницы поместите открывающий и закрывающий теги script, а между ними создайте пустую пока функцию с названием, например, swap и одним обязательным входным параметром id:<script>function swap(id) {}</script>
2 Добавьте две строки JavaScript-кода в тело функции - между фигурными скобками. Первая строка должна считывать текущее состояние блока текста - включена его видимость или выключена. Таких блоков в документе может быть несколько, поэтому каждый должен иметь собственный идентификатор - именно его функция получает в качестве единственного входного параметра id. По этому идентификатору она и разыскивает в документе нужный блок, присваивая значение видимости/невидимости (состояние свойства display) переменной sDisplay:sDisplay = document.getElementById(id).style.display;
3 Вторая строка должна менять свойство display нужного блока текста на противоположное - скрывать, если текст видим, и отображать, если скрыт. Это можно делать таким кодом:document.getElementById(id).style.display = sDisplay == 'none' ? '' : 'none';
4
Поместите в заголовочную часть еще и такое описание стилей:<style type="text/css">a {cursor: pointer}</style>Оно понадобится для правильного отображения указателя мыши при наведении курсора на неполный тег ссылки. С помощью таких ссылок вы организуете в странице переключение видимости/невидимости текстовых блоков.
5 Разместите в тексте эти ссылки-переключатели перед каждым скрытым блоком, а в блоки - в конце текста - добавьте аналогичную ссылку. Невидимый текст заключите в теги span, у которых в атрибутах style задана невидимость. Например:Раскройте текст <a onclick="swap('hiddenTxt')">+++</a> <span id="hiddenTxt" style="display: none">Это скрытый текст <a onclick="swap('hiddenTxt')">---</a></span>В этом образце щелчок по ссылке из трех плюсов будет вызывать описанную выше функцию по событию onClick, передавая ей идентификатор блока, который нужно сделать видимым. А внутрь блока помещена ссылка из трех минусов с такими же функциями - щелчок по ней будет скрывать текст.
6
Создайте нужное количество текстовых блоков, аналогичных описанному в предыдущем шаге, не забывая при этом менять идентификаторы в атрибуте id тега span и в переменной, передаваемой функции по событию onClick в двух ссылках.
ДОМИК НА ОКРАИНЕ
:Владислав Макеенко
Совет 1: Как сделать обводку текста
Существуют разные способы привлечь внимание читателя к определенной части текста. Один из этих способов – сделать обводку. С помощью программы Photoshop эту задачу можно выполнить несколькими способами.
- Программа Photoshop.
Инструкция
1
При помощи команды "New" («Новый») из
меню "File" («Файл») создайте новый документ в программе Photoshop.
Можете сделать то же действие, используя сочетание клавиш "Ctrl"+"N". В
палитре «Инструменты» выберите инструмент "Horizontal Type Tool"
(«Горизонтальный текст»). Поместите указатель курсора на созданный
документ, щелкните левой кнопкой мыши в нужном месте и напишите текст.
Переведите написанный текст в растр. Для этого щелкните правой кнопкой
мыши по текстовому слою в палитре "Layers" («Слои») и выберите опцию
"Rasterize Type" («Растрировать текст»).Выполните обводку текста.
Для этого воспользуйтесь командой "Stroke" («Обводка») из меню "Edit"
(«Редактирование»). В открывшемся окне настроек выберите ширину обводки в
пикселях, цвет обводки и ее расположение: внутри обводимого контура, по
центру или снаружи контура. Нажмите кнопку "ОК". Сохраните созданный
документ при помощи команды "Save" («Сохранить») в меню "File" («Файл»).
2
Другой способ создания обводки дает
возможность не переводить текст в растр. Иначе говоря, вы сможете
редактировать текст с обводкой, созданной как стиль слоя. Для этого
создайте слой с текстом, воспользовавшись инструментом «Горизонтальный
текст».Кликните правой кнопкой мыши по текстовому слою и выберите опцию
"Blending Options" («Опции наложения»). Поставьте галочку в чекбоксе
"Stroke" («Обводка»). Кликните по этой вкладке левой кнопкой мыши. В
открывшейся вкладке настроек выберите ширину обводки в пикселях. Этот
параметр можно настроить, вводя чистовые значения в поле "Size"
(«Размер»), или передвигая ползунок. Из раскрывающихся списков выберите
позицию обводки и режим наложения. В раскрывающемся списке "Fill Type"
(«Тип заливки») выберите, чем будет заполняться обводка: цветом,
градиентом или текстурой. В открывшейся палитре настройте цвет, градиент
или текстуру для обводки. Результат изменения параметров будет
отображаться в документе, который вы создали. Нажмите кнопку
"ОК".Сохраните текст с обводкой при помощи команды "Save" («Сохранить») в
меню "File" («Файл»).
Совет 2: Как сделать раскрывающийся текст
Размещение скрытых блоков текста
улучшает визуальное восприятие страницы веб-сайта - она загружается в
браузер именно в том виде, который разработал дизайнер, независимо от
размещенного объема информации. Кроме того, это удобнее посетителю - в
поисках нужного блока информации ему не приходится просматривать весь
массив, а только лишь небольшие «верхушки айсбергов».
Базовые знания языков HTML и JavaScript.
Инструкция
1
Используйте пользовательскую функцию на
языке JavaScript, чтобы организовать в HTML-странице сокрытие и
отображение нужных блоков текста. Общая для всех блоков
функция намного удобнее, чем добавление кода к каждому из них по
отдельности. В заголовочную часть исходного кода страницы поместите
открывающий и закрывающий теги script, а между ними создайте пустую пока
функцию с названием, например, swap и одним обязательным входным
параметром id:<script>function swap(id) {}</script>
2
Добавьте две строки JavaScript-кода в
тело функции - между фигурными скобками. Первая строка должна считывать
текущее состояние блока текста - включена его видимость
или выключена. Таких блоков в документе может быть несколько, поэтому
каждый должен иметь собственный идентификатор - именно его функция
получает в качестве единственного входного параметра id. По этому
идентификатору она и разыскивает в документе нужный блок, присваивая
значение видимости/невидимости (состояние свойства display) переменной
sDisplay:sDisplay = document.getElementById(id).style.display;
3
Вторая строка должна менять свойство display нужного блока текста
на противоположное - скрывать, если текст видим, и отображать, если
скрыт. Это можно делать таким
кодом:document.getElementById(id).style.display = sDisplay == 'none' ?
'' : 'none';
4
Поместите в заголовочную часть еще и
такое описание стилей:<style type="text/css">a {cursor:
pointer}</style>Оно понадобится для правильного отображения
указателя мыши при наведении курсора на неполный тег ссылки. С помощью
таких ссылок вы организуете в странице переключение
видимости/невидимости текстовых блоков.
5
Разместите в тексте эти ссылки-переключатели перед каждым скрытым блоком, а в блоки - в конце текста
- добавьте аналогичную ссылку. Невидимый текст заключите в теги span, у
которых в атрибутах style задана невидимость. Например:Раскройте текст
<a onclick="swap('hiddenTxt')">+++</a> <span
id="hiddenTxt" style="display: none">Это скрытый текст <a
onclick="swap('hiddenTxt')">---</a></span>В этом образце
щелчок по ссылке из трех плюсов будет вызывать описанную выше функцию по
событию onClick, передавая ей идентификатор блока, который нужно
сделать видимым. А внутрь блока помещена ссылка из трех минусов с такими
же функциями - щелчок по ней будет скрывать текст.
6
Создайте нужное количество текстовых
блоков, аналогичных описанному в предыдущем шаге, не забывая при этом
менять идентификаторы в атрибуте id тега span и в переменной,
передаваемой функции по событию onClick в двух ссылках.
Источники:
Обводка текста в Photoshop
#ФотоУроки