Реклама и Статистика


SEO sprint - Всё для максимальной раскрутки!





Журнал

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

Откройте новый документ фотошопа размером 1000 пикселей по ширине и 750 пикселей по высоте. Залейте фон черным цветом. Сначала мы будем создавать фон. Найдите картинку, которую вы хотите использовать в качестве фона сайта, я буду использовать изображение отсюда . Если вы будете использовать тоже изображение, что и я, то помните, пожалуйста, о правах создателей. Поместите изображение в ваш документ и затем дублируйте изображение до тех пор, пока не заполните весь документ текстурой. Склейте все эти слои и назовите новый слой «Background1»

Теперь дублируйте слой «Background1» и назовите новый слой «Background2». Установите прозрачность слоя (opacity) «Background1» около 10%. Теперь создайте маску слоя на «Background2» и используйте Radial Gradient (Радиальный градиент) для эффекта как на рисунке ниже.

Дублируйте слой «Background2» и назовите новый слой «Background3». Теперь создайте другую радиальную маску внизу документа так, чтобы получилось как на рисунке

Далее создайте новый корректирующий слой с помощью Layer > New Adjustment Layer > Hue/Saturation (Слой>Новый корректирующий слой>Оттенок и насыщенность) и щелкните OK. Выберите Colorize (Колорирование) и затем поэкспериментируйте с цветами пока не найдете подходящий вариант. Теперь создайте новый слой и назовите его «Background4», а затем зайдите в Image > Apply Image (Изображение>Примените изображение). Далее примените Filter > Sharpen > Sharpen (Фильтр>Резкость>Резкость). Фон закончен. Создайте новую группу и назовите ее «Background» и переместите все наши слои фона в нее. Вот, что получилось у меня.

Теперь будем создавать «Journal». Найдите картинку куска старой бумаги, которую вы хотите использовать в качестве журнала, я собираюсь использовать картинку отсюда . Помните о правах создателей картинок. Поместите бумагу в ваш документ и сотрите белые края с помощью Magic Wand Tool (Волшебная палочка). Установите tolerance (допуск) около 32, необязательно сделать идеально, поскольку мы собираемся добиться грязного вида. Измените размер бумаги, до размера как у меня и затем назовите слой «Paper1». Дублируйте слой «Paper1» и назовите его «Paper2», затем поместите его слева от слоя «Paper1». Теперь отразите слой «Paper2» с помощью Edit > Transform > Flip Horizontal (Правка>Трансформация>Отразить по горизонтали). Ваше изображение будет похоже на мое.

Теперь дублируйте слои «Paper1» и «Paper2» несколько раз каждый. Закрепите верхние слои «Paper1» и «Paper2» , поскольку нам не надо их двигать. Теперь поверните слегка дублированные слои под разными углами так, чтобы они выглядели, как множество страниц журнала. Теперь создайте новую группу и назовите ее «Journal», поместите туда все слои журнала. Вот, что получилось у меня.

Теперь дублируйте один из слоев журнала и потом поместите его поверх всех слоев журнала, назовите этот слой «ContactBg». Теперь вы можете изменять размер и поворачивать слой «ContactBg» до тех пор пока не получиться как на рисунке ниже или вы можете склеить различные части бумаги вместе с помощью eraser tool (ластик) и мягкой кисти. Поместите его справа вверху журнала под легким наклоном. Вот, что у меня получилось.

Теперь проделайте тоже самое снова, но назовите слой «TitleBg» и затем поместите его сверху слева нашего журнала.

Теперь будем делать переплет книги. Я буду использовать это изображение . Поместите выбранное изображение в документ и назовите слой «Bind». Используйте ластик (eraser tool) с мягкой кистью для создания переплета. Дублируйте слой «Bind» несколько раз и разместите их вдоль корешка журнала. Вот, что у меня получилось.

Теперь мы будем создавать скрепки. Выберите custom shape tool (Произвольные фигуры) и найдите фигуру скрепки. Создайте скрепку и установите стили слоя как на рисунке ниже.

Теперь поворачивайте и изменяйте размер скрепки до тех пор пока не получиться как на рисунке ниже. Поместите скрепку выше слоя «ContactBg» и «TitleBg» так, чтобы они выглядели будто закреплены. Воспользуйтесь eraser tool (ластик) для удаления частей скрепки, которые должны быть скрыты за бумагой.

Теперь начнем создавать содержание сайта. Сначала сделаем заголовок и контакты. Я использовал шрифт «Journal», который можно скачать здесь . Для контактов попытайтесь использовать шрифт наподобие «Arial» поскольку мы хотим потом перекодировать данный дизайн в xhtml. Вот, что у меня получилось.

Теперь мы собираемся поместить несколько изображений на страницу. Дублируйте слой «ContactBg» и назовите его «PhotoBg», затем переместите его как на рисунке ниже, также вы можете переместить слой «PhotoBg» ниже слоя «ContactBg». Теперь загрузите фото, которое вы хотите использовать в вашем журнале, а затем измените размер так, чтобы оно расположилось поверх слоя «PhotoBg». Попытайтесь, чтоб у вас получилось похоже на мой рисунок.

Теперь будем делать фото так, чтоб оно выглядело немного потертым от времени. Создайте новый слой над слоем с фото и назовите его «Grunge1». Теперь выберите «Brush tool» (Кисть) и возьмите кисть «Spatter». Рисуйте вокруг краев фото как на рисунке.

Когда вы будете удовлетворены результатом, выделите слой в палитре слоев и перейдите в Select > Load Selection (Выделение>Загрузить выделение), оставьте настройки по умолчанию и щелкните OK. Теперь у вас будет выделение вокруг слоя «Grunge».

С активным выделение слоя «Grunge1» перейдите Layers > Hide Layers (Слои>Скрыть слои) и выберите слой «Border» в палитре слоев. Теперь нажмите delete и затем снимите выделение с помощью Crtl+D. У вас получиться что-то похожее на рисунок ниже.

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

Теперь будем делать несколько кусочков клейкой ленты так, чтобы оставшаяся часть фоток приклеены к странице. Вы можете сделать свою собственную клейкую ленту или скачайте кисть здесь . Я установил opacity (прозрачность) слоя с клейкой лентой на 95%, затем я использовал burn tool (затемнение) на клейкой ленте, чтобы придать ей немного больше состаривания. Вот, что у меня получилось.

Теперь создадим текст. Now we are going to create the text. Для урока я использовал шрифт «Journal», но конечно, если вы будете позже перекодировать его, то лучше использовать один из стандартных шрифтов для веб, таких как «Arial». Когда я создаю дизайн в фотошопе, я люблю использовать случайный текст как этот , это сэкономит время. Вот, что у меня получилось.

Последний шаг урока – это изменить немного вид бумаги, чтобы не было заметно, что мы делали много копий и вставок. Создайте новый слой в самом верху палитры слоев и назовите его «Burn». Теперь на выделенном слое «Burn» примените Image > Apply Image (Изображение>Применить изображение). Теперь возьмите burn tool (затемнение) с мягкой кистью размером 100px и exposure (экспозиция) около 25%. Пройдитесь вокруг журнала, затемняя различные области до тех пор, пока не будете довольны результатом. Конечный результат:

Журнал

Источник: tutocity.com
Просмотров: 9243

  Коментарии (3)
 1 Написал(а) Виталий, в 21:27 23.04.2011
:) Прикольно 
мне понравилось!
 2 Написал(а) Дюха, в 03:29 15.08.2011
А можно по подробней расписать 2 и 3 пункт,пожалуйста
 3 Написал(а) РусланАстана, в 13:29 30.05.2012
Отличный Урок

Добавить коментарий
Имя:
Коментарий:



Код:* Code

Реклама


Error. Page cannot be displayed. Please contact your service provider for more details. (8)