Архив тега: дизайн

Эффект курсора для сайта на JavaScript

JavaScript эффектВсем привет и добро пожаловать на SerBlog.ru. Для всех тех у кого имеются блоги на WordPress сегодня вышла новая версия 3.3. Если Вы еще не обновились, то бегом в админку обновляться, появились изменения к лучшему. Рассказывать не буду, сами все увидите. У меня для Вас есть другая, не менее интересная информация. Прикольный эффект для курсора на Вашем сайте. Написано все это дело на JavaScript и работает во всех популярных браузерах, где включена функция отображения Javascript.

Посмотреть демо

Рекомендую скачать и самостоятельно разобраться, как это работает. Если конечно хотите чему-то научиться. Просто знаю из личного опыта то, что если тебя носом тыкают и говорят что и как делать, то научиться чему-то, чтобы делать потом что-нибудь свое никогда не получится. Так и будешь выполнять чужие указания. Движение-жизнь, так что развивайтесь.

По умолчанию  к эффекту прикреплено одно изображение маленького шарика, но Вы его можете поменять на любое другое. Пример в видео. В архив я положил как раз это изображение. Миниатюра земного шара.


Популярность: 12% [?]

CSS кнопки для любого сайта

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

Наиболее корректно отображаются в браузерах Mozilla Fire Fox и Google Chrome. В Opera и Interner Explorer смотрится не совсем так, как должно. Эффект наведения практически не заметен, хотя на нажатие реагируют. В общем Вы можете убедиться в этом сами, посмотреть демо, а также скачать исходники и реализовать данную конструкцию кода на своем сайте.

Посмотреть демо

Популярность: 21% [?]

Обзор программы Adobe Illustrator

Иконка программы Adobe IllustratorВсем привет. Подготовил небольшой обзор программного продукта  Adobe Illuctrator CS5. Этот программный продукт предназначен для работы с векторной графикой, рисования сложных объектов, перспективы и многое другое. В его арсенале содержится множество эффектов, которые можно применить к изображениям, векторным объектам, тексту. Чего только стоит создание в один клик объемных изображений. 3D эффекты для текста делаются за считанные секунды. Интерфейс напоминает фотошоп, но в него добавлены дополнительные инструменты. Также, как и в фотошопе присутствует возможность работы со слоями и более того, каждый объект можно разобрать буквально на мелкие части. Выглядит это примерно во так:Пример рисунка в Adobe Illustrator CS5В наборе по умолчанию есть множество векторных изображений, наподобие этого, а также всевозможных иконок, кнопок для веб-сайтов. Вообще, эта программа идеально подходит для веб-графики. Можно рисовать как отдельные элементы для сайта в виде кнопок, меню, шапок и пр., а также изготавливать полноценные шаблоны.

Программа Adobe Illustrator обладает огромными возможностями и поможет раскрыть Ваши творческий потенциал в наиболее полном объеме. Все программные продукты компании Adobe являются коммерческими, то есть платными. И Цена этого продукта на сегодняшний день составляет 19688.71 руб. Сумма не маленькая, но Вы можете скачать пробную версию и оценить все ее преимущества на русском сайте Adobe.

Например вот такую простую картинку я сделал за 5 минут. Смотрится симпатично.Эффекты Adobe Illustrator

Таким образом можно изготавливать логотипы для сайта совершенно не напрягаясь использую свои творческие способности. Для более подробного изучения и знакомства с инструментами программы рекомендую скачать руководство Adobe Illustrator CS5. Размер 16.3мб.

Популярность: 15% [?]

MODx CMS-Идеальная среда для веб-разработчиков

Популярность: 18% [?]

Создание 3d DVD коробки в фотошопе

Приветствую всех читателей SerBlog.ru. Сегодня будем рассматривать создание 3D объектов в фотошопе. А именно, будем делать, а некоторые даже запустят в производство, свои собственные DVD-диски с фирменными логотипами и изображениями на коробке.))

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

Ну что, приступим?

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

Создайте новый документ размера 800×600 пикселей. Затем во вкладке сверху: 3D — Новая фигура из слоя — Куб, чтобы получился вот такой кубик:3D куб в фотошопе

Теперь нам нужно из этого куба сделать нечто, что будет более похоже на DVD-коробку для дисков. Для этого Вам нужно вызвать меню 3D. Окно — 3D. И нажать на кнопку вращения объекта (горячая клавиша K), чтобы появились стрелки, как на скриншоте сверху. Можете повращать Ваш куб в разные стороны. Но давайте разберем эти инструменты более подробней.

Дело в том, что при помощи этих стрелочек можно изменять размер объекта, приближать или удалять его, а также вращать в разные стороны и менять его положение. Эти 3 стрелки работают по принципу осей координат X, Y, Z. Маленький кубик, который соединяет эти разноцветные стрелки имеет возможность удалять и приближать объект. Попробуйте навести на него курсор и поэкспериментировать.

На концах каждой стрелки — активный элемент, который перемещает объект из стороны в сторону. Следующий элемент стрелки (второй с края)- вращает объект по кругу. Третий с края — сжимает объект.

Это основные элементы, которыми мы будем пользоваться.Инструменты 3D в фотошопе

Но, для начала поместим изображение, которое будет на лицевой стороне нашей коробки. Для этого идем в слой нашего куба и делаем двойной клик на слое под названием Фон. Он находится в самом низу. Откроется новое окно, в которое нужно поместить подготовленное изображение. Возможно, что Ваше изображение не совпадает с размером этого окна. Для того, чтобы оно туда вписалось, нужно зайти в Изображение — Тримминг. Далее: Редактирование — Выполнить обводку и установить значение 5 пикселей и белый цвет.  Теперь можно удалить изображение, сохранив изменения. Следующим шагом будет изменение размера. Используя стрелки, придайте Вашему кубу нужный размер. Получиться должно примерно так:

Создание 3D DVD коробки в фотошопе

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

Так, как данный материал расчитан скорее на новичков, не буду углубляться в работу с 3D светом. Это заслуживает отдельного урока.

После того, как все изображения находятся на своем месте, нужно создать дубликат слоя, разместив их рядом друг с другом и развернув один из них в обратную сторону.

Вы наверное заметили, что углы коробки весьма шероховаты? Сейчас мы будем это исправлять. Перейдем во вкладку: Окно — История, сделаем снимок и определим его как источник для архивной кисти. 

Затем идем меню 3D и выбираем: Окончательная трассировка лучей. 

Нужно будет немного подождать, пока программа обработает изображение. После чего, нажать на слой правой кнопкой мыши и выбрать: Растрировать 3D. Взять архивную кисть и аккуратно стереть необходимые участки, чтобы вернуть былую яркость Вашему изображению.

Такую же процедуру необходимо проделать и с дубликатом слоя. Для пущего эффекта можно отзеркалить каждый слой. О том, как это сделать можно прочитать здесь. Вот, собственно, что у меня получилось. Качество конечно оставляет желать лучшего, но, как говорится, главное понять принцип, а дальше — вперед, экспериментировать.)Создание 3D DVD коробки в фотошопе

Надеюсь, что у Вас получится лучше, чем у меня.)) Если, что не понятно, пишите и оставляйте отзывы.

Популярность: 9% [?]