Волшебная фазенда

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Волшебная фазенда » Создаем анимацию и рисуем в Photoshop » Линеечки для сайта и форума


Линеечки для сайта и форума

Сообщений 1 страница 7 из 7

1

Этот урок писала специально для девочек Ставропольского мамского форума. Они насмотрелись на Материнстве красоты и решили творить ее сами. Попросили меня написать урок. Уж не знаю урок это или нет, но как смогла объяснила. Информацию брала с Материнства. Спасибо девочкам!
Линейки,  состоят из двух частей - Измерителя (где написаны цифры) и самого счетчика или бегунка.
Стандартный размер Измерителя - длина 406 пикселей, высота от 14 до 68 пикселей.
Бегунка максимально ширина 60-70 пикселей, высота 70-80 пикселей; можно и маленькие: 30х40 пикселей.
И мне кажется что ширина измерителя с бегунком должны быть одинаковыми по высоте. Бегунок то по измерителю бегает, будет на равномерно. Но могут быть и исключения конечно...И всё в формате gif с прозрачностью. И еще, когда из большой картинки делаешь маленькую четкость моментом пропадает, да и тем более картинки сохраняются в gif, а этот формат сам плохой по качеству. Мы попробуем с этим явлением побороться. Чтобы качество изображения не пропадало при уменьшении, уменьшать надо постепенно, в идеале не больше 10 % за раз.
Размещать или нет копирайт решать будет наша администрация, т.к. конструктор может поставить копирайт и сам,  и получится два копирайта, что не есть хорошо, да и не понятно как может именно наш копирайт повести себя при установке на форуме...

Тут же наляпала по уроку) Когда начинаешь делать линеечки, остановиться практически не возможно!

http://s40.radikal.ru/i089/0909/e7/1cea40bacef2.gif http://s57.radikal.ru/i158/0909/ff/c571f757877e.gif

Измерители
http://s03.radikal.ru/i176/0909/95/dc6a78b89414.gif
http://s15.radikal.ru/i188/0909/ad/1570dd3b5db2.gif
http://s05.radikal.ru/i178/0909/f9/b2bef5f710ff.gif
http://s46.radikal.ru/i112/0909/a3/fe0cc5fdf443.gif

Бегунки
http://s09.radikal.ru/i182/0909/c5/763e1d7b14df.gifhttp://s48.radikal.ru/i119/0909/35/15db55ad3bac.gifhttp://s45.radikal.ru/i107/0909/4e/8b9f7d311e6b.gif

Отредактировано радостная (2009-09-25 14:46:53)

+1

2

Фон можно сделать самостоятельно, так же как и бегунок...А можно взять и авторскую работу, предварительно поблагодарив автора за щедрость и доброту. Единственно чего делать нельзя, это брать работу автора если он категорически запрещает это делать и предупреждает об этом, и элементы платных скрапов...

Итак создадим новый документ 406х50 пикселей
http://s53.radikal.ru/i139/0909/08/91a2db02917et.jpg
Я подготовила два файла, один из них фон, а другой принцесса, которая будет гулять по нашему фону...Это авторские работы. Спасибо авторам...
http://i075.radikal.ru/0909/ff/272cf1ddf697t.jpg
И фон и принцесса у нас огромного размера, нам их нужно уменьшать, подробно как я это буду делать описывать я не буду, т.к. у нас есть урок по увеличению изображения инструментами фотошоп (урок Оли), уменьшить можно точно также). Как вы видите уменьшенный фон заполнил наш измеритель всего на часть, нам нужно продублировать это слой три раза. Что я уже и сделала.
http://s49.radikal.ru/i123/0909/4b/5577c6abea64t.jpg
Теперь берем инструмент ластик (мягкую кисть) и уменьшаем непрозрачность и стираем грубые стыки на нашем измерители, которые получились в результате наложения наших фонов.
http://i079.radikal.ru/0909/62/868031fbbc4ct.jpg
Вот такой получился измеритель. Объединяем слои.
http://i041.radikal.ru/0909/f8/34734acd1c2ct.jpg
По мне так картинка получилась не яркая, хотелось бы чего-нибудь по-сочнее. Я делаю это так.
Копирую слой с фоном и изменяю режим наложения верхнего слоя на Умножение, потом немного уменьшаю непрозрачность.
http://i050.radikal.ru/0909/2f/4315a5a068b9t.jpg
Так мне нравиться значительно больше, а вам?
http://i044.radikal.ru/0909/00/c63f28de5cb8t.jpg
Все те же самые операции мы проделываем с нашей принцессой. Т.е. уменьшаем ее, улучшаем цвета. Вот такая получилась Дюймовочка.
http://s42.radikal.ru/i097/0909/5b/0763da1b5c81t.jpg
Вот собственно и все.
Если нужен копирайт, то используйте для него именно пиксельные - компьютерные шрифты, что бы текст был читабельным.
Вот так линеечка смотрится в собранном виде
http://s43.radikal.ru/i100/0909/db/76e02a652748.jpg

Не забудем сохранить наши файлы раздельно в формате gif. (Файл - сохранить для web)

http://s51.radikal.ru/i133/0909/23/71d7cbf710ef.gif http://i049.radikal.ru/0909/c7/ebbcaf4e6a9f.gif

+1

3

Вопрос бестолковый, но всё-равно задам. А для чего нужна линеечка? А бегунок? Он что должен двигаться по линеечке?

0

4

Лен, это как у меня линеечки, они отсчитывают день до какой то определенной даты(задаешь сам) или наоборот считают сколько уже прошло с какого то определенного дня.
На линеечке нанесены штрихи с метками(может и не быть) а бегунок отображает сколько уже прошло.
Надеюсь понятно объяснила.http://i013.radikal.ru/0803/5a/63d3908653b9.gif

0

5

Волшебница написал(а):

На линеечке нанесены штрихи с метками(может и не быть) а бегунок отображает сколько уже прошло.

А как он двигается или кто его двигает бегунок-то этот?

0

6

Лен, вот именно об этом я  и говорила, что это сделает Ирина. Там как-то все не просто, она куда-то будет загружать, какие коды писать) Но она согласна на это)http://i013.radikal.ru/0803/5a/63d3908653b9.gif А наша задача сделать  много красивых и разных линеек)

0

7

Ну тогда ОК!

0


Вы здесь » Волшебная фазенда » Создаем анимацию и рисуем в Photoshop » Линеечки для сайта и форума