В творчестве, как и любви, легче остановить мгновение, чем самого себя. (Леонид С.Сухоруков)
Photoshop paper texture from scratch then create a grungy web design with it
РисуемЧасть первая. Создание бумажной текстуры.
У нас есть три способа получить текстуру бумаги:
1. Отсканировать вашу бумагу
Посмотрите отличную работу Bittbox's — Создание гранджевой текстуры бумаги
2. Использовать уже готовые текстуры
Найти эти текстуры вы можете по следующим ссылкам:
Bittbox | Texture King | PSDTUTS Textures
3. Сделать эту текстуру в фотошопе
Мы пойдем по этому пути!
Создание текстуры в фотошопе приводит к более стилизованному варианту, нежели реалистичному, однако есть и преимущества этого способа — вам не нужны никакие «внешние» изображения.
Шаг первый.
Естественно, первым делом мы должны открыть нашу программу, Adobe Photoshop. Создаем новый документ с размерами 1200 пикселей по ширине, и 900 пикселей по высоте. Затем заливаем наш фон бежевым цветом — #e8e8e2.
Шаг второй.
Создаем новый слой и выбираем главный и фоновый цвета: #979a8f и #cfd1c5 соответственно. Затем идём: Filter > Render > Clouds.
Шаг третий.
Сейчас выполняем: Filter > Artistic > Palette Knife с параметрами, показанными в изображении выше. Palette Knife превращает наши облака в капли, в конечном счете это добавит помятости нашей бумаге.
Шаг четвертый.
Теперь добавляем «шума» нашей бумаге, с помощью Filter > Noise > Add Noise, с настройками, показанными выше на картинке. Это добавит бумаге «грубости».
Шаг пятый.
Мы добавили шума нашей бумаге. Самое время изменить наложение этого слоя на Multiply, и снизить непрозрачность до 30%. Это придаст тон для заднего фона.
Шаг шестой.
Сейчас создаем новый слой поверх обоих слоев, выбираем главный и второстепенный цвета: #42433e и #cfd1c5 соответственно. Как вы заметили, этот фон более тёмен, чем предыдущий, созданный таким же образом (с помощью фильтра «облака»), это придаст контраст. Идём в Filter > Render > Clouds
Шаг седьмой.
Простой шаг. Идем в Filter > Artistic > Palette Knife, и ставим настройки как на картинке выше.
Шаг восьмой.
Опять же, изменяем наложение слоя на Overlay и понижаем непрозрачность до 60%
Вот видите, эти действия придали нашей бумаге больше глубины, рельефности.
Шаг девятый.
Можно считать, что для этого урока текстура уже совершенна, но вы можете легко сделать другие вариации, стоит только «поиграть» с режимами наложения. Например, чтобы сделать эту темную коричневую бумажную текстуру, нужно:
1. Возьмите легкую (светлую) версию текстуры и нажмите Ctrl+U, затем идите в Image > Adjustments > Hue/Saturation, измените «ползунки» этой настройки на -30, -10 и -5 соответственно.
2. Продублируйте слой и нажмите Ctrl+Shift+U, чтобы сделать его черно-белым
3. На слое с черно-белой текстурой идите в Image > Adjustments > Brightness/Contrast и измените параметры на -30 и +30 соответственно.
4. Измените наложение слоя с черно белой текстурой на Overlay.
5. Теперь создайте новый слой поверх всех, заполните его цветом #beac93 и измените наложение на Multiply.
6. Продублируйте этот слой.
7. Снова продублируйте черно-белый слой и переместите на самый верх. Измените наложение на Overlay, непрозрачность понизьте до 20%, и поверните слой на 90' (градусов), чтобы добиться глубины.
Шаг десятый.
Это цветовое решение не обязательно, вы можете сами настроить всё как вам надо.
Вот, например, еще один способ:
1. Возьмите самую первую «шумливую» текстуру и выполните Filter > Texture > Texturizer, используйте там Canvas, первый параметр поставьте на 75% и еще 2 настройте по своему усмотрению.
2. Возьмите вторую «шумливую» текстуру и выполните предыдущий фильтр.
3. Сейчас продублируйте второй слой и поверните на 90', измените параметры наложения на Overlay и непрозрачность снизьте до 60%.
4. Создайте новый слой сверху и заполните белым цветом — #ffffff
5. Выполните фильтр Filter > Texture > Texturizer и опять же выберите там Canvas, 200% и 16 соответственно, измените наложение на Overlay и непрозрачность на 20%.
6. Сейчас создайте еще один слой поверх и опять залейте белым цветом, но в этот раз смените наложение на Color, а непрозрачность на 53%, чтобы добавить текстуре белизны.
Финальный шаг о текстуре.
Теперь вы можете использовать текстуру, полученную из урока — turn it into a seamlessly tiled background
Во всех остальных частях урока будет использована первая текстура, полученная в 8 шаге.
Часть 2. Создание шаблона сайта.
Сейчас мы будем создавать структуру сайта-портфолио, с использованием нашей бумажной текстуры. На картинке — приблизительная структура главной страницы сайта. Как вы заметили, это более сложная структура макета, чем в предыдущем уроке (на PSDTUTS.com), потому что в этот раз самое главное — внутренняя структура сайта.
Сетка макета — это трехколонный вариант, в главной группе мы использовали сетку, чтобы разбить область в два главных интервала, один — размер колонки 1 и другие — размеры следующих колонок.
Шаг тринадцатый.
Для начала разметим рабочую область чтобы облегчить работу с макетом. Задаем отступы макета от края фона, первый на отметке в 100 px по линейке (линейке программы Photoshop), а второй отступ на отметке в 1100 px по линейке — в итоге получаем ширину квадрата 1000 пикселей.
Затем создаем новый слой, и рисуем большой белый квадрат, как на рисунке.
Шаг четырнадцатый.
Затем понижаем непрозрачность этого слоя до 25%
Теперь нужно сделать наш прямоугольник «грубее». Есть очень много наборов гранджевых кистей, но для этого шага мы будем использовать одну из стандартных кистей фотошопа. Посмотрите скриншот — это кисть под номером 60
Если у вас нету этой кисти, щелкните по маленькой стрелке вверху этого окошечка кистей и выберите Wet Media Brushes, затем щелкните в появившимся диалоговом окне на Append. Всё готово, кисть у вас есть.
Шаг пятнадцатый.
выберите инструмент ластик (Е), выберите там кисть, которую мы только что упомянули, а затем пройдитесь ей по краю нашего прямоугольника, чтобы добавить «грубости», рваности нашей бумаге. Я оставил верхний край неповрежденным, посмотрите на картинку.
Шаг шестнадцатый.
Потом создайте новый слой ниже белого прямоугольника, и используйте радиальный градиент (G), с настройками цвета от белого к прозрачному. Это место, где мы разместим фирменный знак (логотип). Измените режим наложения на Overlay и непрозрачность на 70%.
Шаг семнадцатый.
Теперь добавляем небольшой «фирменный знак» — в нашем случае это просто слово, зато с хорошим шрифтом. Шрифт, который я выбрал, здесь — Egyptian-710 BT, он очень известен, хорошо воспринимается и подходит для наших целей, потому что нам нужен шрифт, который подчеркивал бы неровность всего макета, стилизованного под бумагу.
Шаг восемнадцатый.
Позже мы сделаем эффект водяного знака, просто для того, чтобы чем-то наполнить верхнюю часть. Вообще, вы можете наложить на текст другую текстуру, однако в этом уроке мы ограничимся эффектом водяного знака.
Я написал слово «Folio» этим шрифтом — HumstSlab712 Blk, а цвет выбрал такой — #c5c6ba.
Шаг девятнадцатый.
Меняем параметр наложения на Color Burn, непрозрачность 70%, и добавляем окантовку в Blending Options, 1 пиксель. Заметьте, что для пущего эффекта, я использовал паттерн (образец) а затем выбрал текстуру для окантовки. Теперь устанавливаем низкую непрозрачность (36%) и параметр наложения на Multiply, создается эффект «затухания» окантовки.
Шаг двадцатый.
Двигаем наш водяной знак под логотип с надписью Manilla
Шаг двадцать первый.
Добавляем под логотип горизонтальную полосу на новом слое, темно-коричневым цветом, карандашом в 1 пиксель.
Шаг двадцать второй.
Теперь ластиком с этой гранджевой кистью подтираем нашу линию, чтобы стилизовать ее под весь макет.
Шаг двадцать третий.
На слое под линией нарисуйте небольшой прямоугольник высотой 3—4 пикселя.
Шаг двадцать четвертый.
Измените наложение на Multipky и непрозрачность на 5%. Получилась тень от разделителя.
Шаг двадцать пятый.
Создайте новый слой и нарисуйте прямоугольник высотой в 20 пикселей .
Шаг двадцать шестой.
Измените непрозрачность на 50% и опять подотрите его инструментом ластик, той же гранджевой кистью.
Шаг двадцать седьмой.
Повторите три последних шага, чтобы создать второй белый прямоугольник, но сотрите его таким образом, чтобы он получился ниже чем предыдущий.
Оба этих слоя смотрятся очень гармонично в соответствии со стилем сайта.
Создайте группу этих трех слоев (линия, первый прямоугольник и второй прямоугольник).
Шаг двадцать восьмой.
Продублируйте эту группу слоев, чтобы разделить сайт на три части по вертикали — шапку, большую часть контента и меньшую.
Шаг двадцать девятый.
Размещаем немного контента. Как вы видите, я использую шрифт с начертанием regular.
Я использовал шрифт Cambria, это стандартный шрифт ОС Vista. В CSS лучше задать шрифт Georgia, т.к. не у всех есть шрифты «висты». Если у вас нету этих шрифтов, вы можете получить их свободно и юридически, следуя этим инструкциям. Необязательно использовать именно этот шрифт. Мне, например, еще нравится шрифт Calibri.
Шаг тридцатый.
Как вы видите из картинки, я добавил нашу главную панель сайта. Я использовал очень темно-коричневый цвет — #1e1a19 и Rounded Rectangle Tool (U), с радиусом закругления 5 пикселей.
Шаг тридцать первый.
Теперь сильно приблизьте холст и выделите край, который вы видите на картинке, залейте его тем же коричневым темным цветом. Нам не нужна кривая в этом углу.
Шаг тридцать второй.
Теперь также приблизьте к правому углу и инструментом Polygonal Lasso (L) (Полигональное выделение/лассо) с зажатой клавишей Shift выделите правый верхний угол, как на картинке выше, и нажмите клавишу Delete.
Шаг тридцать третий.
Создайте новый слой, и с помощью полигонального лассо нарисуйте под обрезанным углом такой треугольник на расстоянии 1-ого пикселя от края, залив его цветом — #352f2b.
Шаг тридцать четвертый.
Теперь создайте новый слой и начните рисовать слева кнопку. Сейчас мы будем рисовать основную форму этой кнопки. Используем Pen Tool(Перо), и несколькими точными кликами определяем точки формы нашей кнопки. В изображении выше я выключил все остальные слои, чтобы вы могли полностью, без помех увидеть форму. Ниже — инструкция по рисованию, если вы считаете, что легко нарисуете такую форму — можете смело пропускать её:
— Начните с точки нижней левой стороны, кликнув для её обозначения (на листе).
— Затем, удерживая SHIFT рисуйте линию таким образом, что бы получить ровную, прямую линию и щелкните на следующий пункт вдоль линии.
— Сейчас щелкните на третью позицию, и снова удерживая клавишу мыши, а также держа SHIFT зажатым, чтобы чертить все линии под правильным углом, чертите следующую линию, к четвертой позиции. Если у вас что-то не получается, и нужно вернуться на шаг назад — стоит только нажать CTRL-Z, чтобы уничтожить предыдущую линию; и если вам нужно вернуться назад больше, чем на один шаг — нажмите CTRL-ALT-Z.
— Потом, все еще зажав SHIFT, щелкните по четвертому пункту. Именно зажатая клавиша SHIFT гарантирует, что все линии будут ровными, под правильными углами.
— Наконец, держа нажатым SHIFT, протащите линию к пятому пункту и закройте кривую — вы получили красивую форму.
Шаг тридцать пятый.
После того, как вы отметите пятый пункт, вы можете, уже не обращая внимания на форму, закончить ее, потому что мы все равно отрежем нижний край.
Как только вы завершили эту форму, щелкаем на ней правой кнопкой и выбираем пункт Make Selection (Создать выделение).
Шаг тридцать шестой.
Теперь заполняем наше выделение темно-коричневым цветом, таким же, как и главная часть (прямоугольник). Благодаря одинаковому цвету эта кнопка как бы продолжает основную часть.
Шаг тридцать седьмой.
Теперь продублируем слой с нашей кнопкой, и разместим его под слоем с предыдущей кнопкой, также, как на картинке. Потом смените наложение на Color Overlay и залейте красивым, красно-оранжевым цветом — #cc5630. Переместите ее чуть правее, как на картинке выше.
Затем зажимаем CTRL и щелкаем по слою с первой кнопкой, затем выбираем Rectangular Marquee Tool, и нажимаем стрелку на клавиатуре несколько раз, пока наше выделение не закроет чуть-чуть оранжевую кнопку.
Шаг тридцать восьмой.
Затем создаем новый слой между двумя кнопками, и заливаем его более темным оранжевым цветом — #b44724. Потом, удерживая CTRL, щелкните по оранжевой кнопке, затем нажмите Ctrl-Shift-I, чтобы инвертировать выделение, и щелкните по среднему слою, и нажмите клавишу Delete. Теперь у вас осталась темно-оранжевая часть, которая частично покрывает ярко-оранжевую кнопку.
Шаг тридцать девятый.
Итак, мы получили что-то вроде стилизованной тени на второй, оранжевой кнопке.
Я говорю, что они выглядят очень красивыми, благодаря их форме и тому, что одна кнопка частично покрывает другую. К сожалению это также осложняет последующую верстку в HTML. Разумеется, вы можете сделать несколько PNG-изображений, или придумать другой способ, но, так или иначе — это не тема нашего урока.
Шаг сороковой.
Вот это — дизайн сайта на данный момент. Я добавил еще парочку кнопок, и, естественно ввел в них текст, обозначающий то, куда вы перейдете по их нажатию.
Шаг сорок один.
Сейчас создадим воображаемую рабочую область. Пока это просто белый прямоугольник, где будет потом какая нибудь картинка. Создаем новый слой, и, используя полигональное лассо, рисуем неровный прямоугольник с «заваленными» сторонами, и зальем его очень темным цветом, почти черным — #0e0c0c.
Шаг сорок два.
Я еще добавил описательный текст слева, и, естественно, элемент описания — изображение. Заметьте, что я использовал темный цвет для заголовков (Название проекта и Краткое описание проекта), благодаря чему они не слишком сильно выделяются на фоне, ведь самое важное — это описание, а оно как раз выполнено в светлом цвете.
Также я добавил немного радиального градиента в рабочей области, от белого к бежевому — потому что я очень люблю такие градиент, и мне их никогда недостаточно :-)
Шаг сорок три, завершающий.
Наконец, я добавлю несколько завершающих штрихов, чтобы закончить проект. Для них я использовал кисти Давида, а также превосходные и свободно-скачиваемые кисти. Вы можете добавить кисти, открывая палитру кистей, щелкнув по маленькой стрелке, выбрав пункт Load Brushes
Поскольку кисти получились слишком размытыми, я использовал Filter > Sharpen > Unsharpen Mask , чтобы это компенсировать.
Итог урока: дизайн.
И внутренняя страница.
Автор: Collis;
Перевод: Art De Photoshop
Источник.
РисуемЧасть первая. Создание бумажной текстуры.
У нас есть три способа получить текстуру бумаги:
1. Отсканировать вашу бумагу
Посмотрите отличную работу Bittbox's — Создание гранджевой текстуры бумаги
2. Использовать уже готовые текстуры
Найти эти текстуры вы можете по следующим ссылкам:
Bittbox | Texture King | PSDTUTS Textures
3. Сделать эту текстуру в фотошопе
Мы пойдем по этому пути!
Создание текстуры в фотошопе приводит к более стилизованному варианту, нежели реалистичному, однако есть и преимущества этого способа — вам не нужны никакие «внешние» изображения.
Шаг первый.
Естественно, первым делом мы должны открыть нашу программу, Adobe Photoshop. Создаем новый документ с размерами 1200 пикселей по ширине, и 900 пикселей по высоте. Затем заливаем наш фон бежевым цветом — #e8e8e2.
Шаг второй.
Создаем новый слой и выбираем главный и фоновый цвета: #979a8f и #cfd1c5 соответственно. Затем идём: Filter > Render > Clouds.
Шаг третий.
Сейчас выполняем: Filter > Artistic > Palette Knife с параметрами, показанными в изображении выше. Palette Knife превращает наши облака в капли, в конечном счете это добавит помятости нашей бумаге.
Шаг четвертый.
Теперь добавляем «шума» нашей бумаге, с помощью Filter > Noise > Add Noise, с настройками, показанными выше на картинке. Это добавит бумаге «грубости».
Шаг пятый.
Мы добавили шума нашей бумаге. Самое время изменить наложение этого слоя на Multiply, и снизить непрозрачность до 30%. Это придаст тон для заднего фона.
Шаг шестой.
Сейчас создаем новый слой поверх обоих слоев, выбираем главный и второстепенный цвета: #42433e и #cfd1c5 соответственно. Как вы заметили, этот фон более тёмен, чем предыдущий, созданный таким же образом (с помощью фильтра «облака»), это придаст контраст. Идём в Filter > Render > Clouds
Шаг седьмой.
Простой шаг. Идем в Filter > Artistic > Palette Knife, и ставим настройки как на картинке выше.
Шаг восьмой.
Опять же, изменяем наложение слоя на Overlay и понижаем непрозрачность до 60%
Вот видите, эти действия придали нашей бумаге больше глубины, рельефности.
Шаг девятый.
Можно считать, что для этого урока текстура уже совершенна, но вы можете легко сделать другие вариации, стоит только «поиграть» с режимами наложения. Например, чтобы сделать эту темную коричневую бумажную текстуру, нужно:
1. Возьмите легкую (светлую) версию текстуры и нажмите Ctrl+U, затем идите в Image > Adjustments > Hue/Saturation, измените «ползунки» этой настройки на -30, -10 и -5 соответственно.
2. Продублируйте слой и нажмите Ctrl+Shift+U, чтобы сделать его черно-белым
3. На слое с черно-белой текстурой идите в Image > Adjustments > Brightness/Contrast и измените параметры на -30 и +30 соответственно.
4. Измените наложение слоя с черно белой текстурой на Overlay.
5. Теперь создайте новый слой поверх всех, заполните его цветом #beac93 и измените наложение на Multiply.
6. Продублируйте этот слой.
7. Снова продублируйте черно-белый слой и переместите на самый верх. Измените наложение на Overlay, непрозрачность понизьте до 20%, и поверните слой на 90' (градусов), чтобы добиться глубины.
Шаг десятый.
Это цветовое решение не обязательно, вы можете сами настроить всё как вам надо.
Вот, например, еще один способ:
1. Возьмите самую первую «шумливую» текстуру и выполните Filter > Texture > Texturizer, используйте там Canvas, первый параметр поставьте на 75% и еще 2 настройте по своему усмотрению.
2. Возьмите вторую «шумливую» текстуру и выполните предыдущий фильтр.
3. Сейчас продублируйте второй слой и поверните на 90', измените параметры наложения на Overlay и непрозрачность снизьте до 60%.
4. Создайте новый слой сверху и заполните белым цветом — #ffffff
5. Выполните фильтр Filter > Texture > Texturizer и опять же выберите там Canvas, 200% и 16 соответственно, измените наложение на Overlay и непрозрачность на 20%.
6. Сейчас создайте еще один слой поверх и опять залейте белым цветом, но в этот раз смените наложение на Color, а непрозрачность на 53%, чтобы добавить текстуре белизны.
Финальный шаг о текстуре.
Теперь вы можете использовать текстуру, полученную из урока — turn it into a seamlessly tiled background
Во всех остальных частях урока будет использована первая текстура, полученная в 8 шаге.
Часть 2. Создание шаблона сайта.
Сейчас мы будем создавать структуру сайта-портфолио, с использованием нашей бумажной текстуры. На картинке — приблизительная структура главной страницы сайта. Как вы заметили, это более сложная структура макета, чем в предыдущем уроке (на PSDTUTS.com), потому что в этот раз самое главное — внутренняя структура сайта.
Сетка макета — это трехколонный вариант, в главной группе мы использовали сетку, чтобы разбить область в два главных интервала, один — размер колонки 1 и другие — размеры следующих колонок.
Шаг тринадцатый.
Для начала разметим рабочую область чтобы облегчить работу с макетом. Задаем отступы макета от края фона, первый на отметке в 100 px по линейке (линейке программы Photoshop), а второй отступ на отметке в 1100 px по линейке — в итоге получаем ширину квадрата 1000 пикселей.
Затем создаем новый слой, и рисуем большой белый квадрат, как на рисунке.
Шаг четырнадцатый.
Затем понижаем непрозрачность этого слоя до 25%
Теперь нужно сделать наш прямоугольник «грубее». Есть очень много наборов гранджевых кистей, но для этого шага мы будем использовать одну из стандартных кистей фотошопа. Посмотрите скриншот — это кисть под номером 60
Если у вас нету этой кисти, щелкните по маленькой стрелке вверху этого окошечка кистей и выберите Wet Media Brushes, затем щелкните в появившимся диалоговом окне на Append. Всё готово, кисть у вас есть.
Шаг пятнадцатый.
выберите инструмент ластик (Е), выберите там кисть, которую мы только что упомянули, а затем пройдитесь ей по краю нашего прямоугольника, чтобы добавить «грубости», рваности нашей бумаге. Я оставил верхний край неповрежденным, посмотрите на картинку.
Шаг шестнадцатый.
Потом создайте новый слой ниже белого прямоугольника, и используйте радиальный градиент (G), с настройками цвета от белого к прозрачному. Это место, где мы разместим фирменный знак (логотип). Измените режим наложения на Overlay и непрозрачность на 70%.
Шаг семнадцатый.
Теперь добавляем небольшой «фирменный знак» — в нашем случае это просто слово, зато с хорошим шрифтом. Шрифт, который я выбрал, здесь — Egyptian-710 BT, он очень известен, хорошо воспринимается и подходит для наших целей, потому что нам нужен шрифт, который подчеркивал бы неровность всего макета, стилизованного под бумагу.
Шаг восемнадцатый.
Позже мы сделаем эффект водяного знака, просто для того, чтобы чем-то наполнить верхнюю часть. Вообще, вы можете наложить на текст другую текстуру, однако в этом уроке мы ограничимся эффектом водяного знака.
Я написал слово «Folio» этим шрифтом — HumstSlab712 Blk, а цвет выбрал такой — #c5c6ba.
Шаг девятнадцатый.
Меняем параметр наложения на Color Burn, непрозрачность 70%, и добавляем окантовку в Blending Options, 1 пиксель. Заметьте, что для пущего эффекта, я использовал паттерн (образец) а затем выбрал текстуру для окантовки. Теперь устанавливаем низкую непрозрачность (36%) и параметр наложения на Multiply, создается эффект «затухания» окантовки.
Шаг двадцатый.
Двигаем наш водяной знак под логотип с надписью Manilla
Шаг двадцать первый.
Добавляем под логотип горизонтальную полосу на новом слое, темно-коричневым цветом, карандашом в 1 пиксель.
Шаг двадцать второй.
Теперь ластиком с этой гранджевой кистью подтираем нашу линию, чтобы стилизовать ее под весь макет.
Шаг двадцать третий.
На слое под линией нарисуйте небольшой прямоугольник высотой 3—4 пикселя.
Шаг двадцать четвертый.
Измените наложение на Multipky и непрозрачность на 5%. Получилась тень от разделителя.
Шаг двадцать пятый.
Создайте новый слой и нарисуйте прямоугольник высотой в 20 пикселей .
Шаг двадцать шестой.
Измените непрозрачность на 50% и опять подотрите его инструментом ластик, той же гранджевой кистью.
Шаг двадцать седьмой.
Повторите три последних шага, чтобы создать второй белый прямоугольник, но сотрите его таким образом, чтобы он получился ниже чем предыдущий.
Оба этих слоя смотрятся очень гармонично в соответствии со стилем сайта.
Создайте группу этих трех слоев (линия, первый прямоугольник и второй прямоугольник).
Шаг двадцать восьмой.
Продублируйте эту группу слоев, чтобы разделить сайт на три части по вертикали — шапку, большую часть контента и меньшую.
Шаг двадцать девятый.
Размещаем немного контента. Как вы видите, я использую шрифт с начертанием regular.
Я использовал шрифт Cambria, это стандартный шрифт ОС Vista. В CSS лучше задать шрифт Georgia, т.к. не у всех есть шрифты «висты». Если у вас нету этих шрифтов, вы можете получить их свободно и юридически, следуя этим инструкциям. Необязательно использовать именно этот шрифт. Мне, например, еще нравится шрифт Calibri.
Шаг тридцатый.
Как вы видите из картинки, я добавил нашу главную панель сайта. Я использовал очень темно-коричневый цвет — #1e1a19 и Rounded Rectangle Tool (U), с радиусом закругления 5 пикселей.
Шаг тридцать первый.
Теперь сильно приблизьте холст и выделите край, который вы видите на картинке, залейте его тем же коричневым темным цветом. Нам не нужна кривая в этом углу.
Шаг тридцать второй.
Теперь также приблизьте к правому углу и инструментом Polygonal Lasso (L) (Полигональное выделение/лассо) с зажатой клавишей Shift выделите правый верхний угол, как на картинке выше, и нажмите клавишу Delete.
Шаг тридцать третий.
Создайте новый слой, и с помощью полигонального лассо нарисуйте под обрезанным углом такой треугольник на расстоянии 1-ого пикселя от края, залив его цветом — #352f2b.
Шаг тридцать четвертый.
Теперь создайте новый слой и начните рисовать слева кнопку. Сейчас мы будем рисовать основную форму этой кнопки. Используем Pen Tool(Перо), и несколькими точными кликами определяем точки формы нашей кнопки. В изображении выше я выключил все остальные слои, чтобы вы могли полностью, без помех увидеть форму. Ниже — инструкция по рисованию, если вы считаете, что легко нарисуете такую форму — можете смело пропускать её:
— Начните с точки нижней левой стороны, кликнув для её обозначения (на листе).
— Затем, удерживая SHIFT рисуйте линию таким образом, что бы получить ровную, прямую линию и щелкните на следующий пункт вдоль линии.
— Сейчас щелкните на третью позицию, и снова удерживая клавишу мыши, а также держа SHIFT зажатым, чтобы чертить все линии под правильным углом, чертите следующую линию, к четвертой позиции. Если у вас что-то не получается, и нужно вернуться на шаг назад — стоит только нажать CTRL-Z, чтобы уничтожить предыдущую линию; и если вам нужно вернуться назад больше, чем на один шаг — нажмите CTRL-ALT-Z.
— Потом, все еще зажав SHIFT, щелкните по четвертому пункту. Именно зажатая клавиша SHIFT гарантирует, что все линии будут ровными, под правильными углами.
— Наконец, держа нажатым SHIFT, протащите линию к пятому пункту и закройте кривую — вы получили красивую форму.
Шаг тридцать пятый.
После того, как вы отметите пятый пункт, вы можете, уже не обращая внимания на форму, закончить ее, потому что мы все равно отрежем нижний край.
Как только вы завершили эту форму, щелкаем на ней правой кнопкой и выбираем пункт Make Selection (Создать выделение).
Шаг тридцать шестой.
Теперь заполняем наше выделение темно-коричневым цветом, таким же, как и главная часть (прямоугольник). Благодаря одинаковому цвету эта кнопка как бы продолжает основную часть.
Шаг тридцать седьмой.
Теперь продублируем слой с нашей кнопкой, и разместим его под слоем с предыдущей кнопкой, также, как на картинке. Потом смените наложение на Color Overlay и залейте красивым, красно-оранжевым цветом — #cc5630. Переместите ее чуть правее, как на картинке выше.
Затем зажимаем CTRL и щелкаем по слою с первой кнопкой, затем выбираем Rectangular Marquee Tool, и нажимаем стрелку на клавиатуре несколько раз, пока наше выделение не закроет чуть-чуть оранжевую кнопку.
Шаг тридцать восьмой.
Затем создаем новый слой между двумя кнопками, и заливаем его более темным оранжевым цветом — #b44724. Потом, удерживая CTRL, щелкните по оранжевой кнопке, затем нажмите Ctrl-Shift-I, чтобы инвертировать выделение, и щелкните по среднему слою, и нажмите клавишу Delete. Теперь у вас осталась темно-оранжевая часть, которая частично покрывает ярко-оранжевую кнопку.
Шаг тридцать девятый.
Итак, мы получили что-то вроде стилизованной тени на второй, оранжевой кнопке.
Я говорю, что они выглядят очень красивыми, благодаря их форме и тому, что одна кнопка частично покрывает другую. К сожалению это также осложняет последующую верстку в HTML. Разумеется, вы можете сделать несколько PNG-изображений, или придумать другой способ, но, так или иначе — это не тема нашего урока.
Шаг сороковой.
Вот это — дизайн сайта на данный момент. Я добавил еще парочку кнопок, и, естественно ввел в них текст, обозначающий то, куда вы перейдете по их нажатию.
Шаг сорок один.
Сейчас создадим воображаемую рабочую область. Пока это просто белый прямоугольник, где будет потом какая нибудь картинка. Создаем новый слой, и, используя полигональное лассо, рисуем неровный прямоугольник с «заваленными» сторонами, и зальем его очень темным цветом, почти черным — #0e0c0c.
Шаг сорок два.
Я еще добавил описательный текст слева, и, естественно, элемент описания — изображение. Заметьте, что я использовал темный цвет для заголовков (Название проекта и Краткое описание проекта), благодаря чему они не слишком сильно выделяются на фоне, ведь самое важное — это описание, а оно как раз выполнено в светлом цвете.
Также я добавил немного радиального градиента в рабочей области, от белого к бежевому — потому что я очень люблю такие градиент, и мне их никогда недостаточно :-)
Шаг сорок три, завершающий.
Наконец, я добавлю несколько завершающих штрихов, чтобы закончить проект. Для них я использовал кисти Давида, а также превосходные и свободно-скачиваемые кисти. Вы можете добавить кисти, открывая палитру кистей, щелкнув по маленькой стрелке, выбрав пункт Load Brushes
Поскольку кисти получились слишком размытыми, я использовал Filter > Sharpen > Unsharpen Mask , чтобы это компенсировать.
Итог урока: дизайн.
И внутренняя страница.
Автор: Collis;
Перевод: Art De Photoshop
Источник.
@темы: Уроки, Web-дизайн