Урок по фотошопу №2 Сайтостроение
В этом уроке аж две части. Когда я спрашивала вас о том, хотите ли вы видеть у меня в жж уроки фотошопа "От маленькой кнопки для сайта до самого сайта", я как-то упустила из вида то, что сперва придется рассказать о том, какую структуру может иметь сайт и какие шаги необходимо предпринять, пержде чем садится за отрисовку собственно дизайна. А когда взялась готовить второй урок, поняла, что без этого - ну совсем никак. Так что первая часть урока будет состоять из кучки теории, которая пригодится в дальнейшем, а вторая покажет, как отрисовать прикольное облачко специального предложения для сайта.
Сложность теории: легкая, но занудная.
Сложность практики: средняя, исключительно из-за общего количества действий.
Итак, теория.
Я не буду здесь говорить о том, как сверстать сайт в HTML. Хотя, если интересно, могу ввести допуроки еще и по нему. Впрочем, любой, кто пользуется жж, так или иначе знаком с этим языком разметки текста.
Однако, я буду рассказывать, как сделать верстабельный сайт так, чтобы не загромождать его графикой, но и так, чтобы было красиво и правильно. Начну я, наверное, с базовых понятий веб-дизайна.
Здесь я буду говорить о так называемом позиционировании внутри сайта. В связи с чем вот вам термины, касающиеся позиционирования:
1. Сетка сайта - это такая фигня, которая показывает, как будет расположена информация на странице. Где будет меню, где текст и так далее.
2. Шапка сайта - это такая фигня, на которой обычнот расположено название сайта, его логотип и кучка другой информации, на которую создатель сайта хочет обратить внимание (напр., контакты или спецпредолжения)
3. Меню - это такая фигня, которая помогает посетителю перемещаться по сайту.
4. Контент - это, собственно, текстовое наполнение страницы или сайта. То есть, та информация, ради которой посетитель сюда пришел.
5. Подвал - это такая фигня, в которой обычно пишут копирайты разработчиков дизайнеров и так далее.
Позиционирование информации на сайте бывает двух видов:
1. По сетке.
Вы можете расположить информацию на сайте как вам взбредет в голову, однако, есть несколько стандартных и наиболее часто используемых сеток.
2. По контенту внутри сетки.
С позиционированием внутри - все.
Теперь к наполнению дизайн-макета. Частенько так случается, что на момент создания дизайна у заказчика/друга/себя самого тексты еще не готовы/проходят последние проверки/не очень красивы стилистически и т.д. Тогда встает вопрос, чем заполнять дизайн-макет.
Обычно его заполняют так называемой рыбой - каким-то левым текстом, которого по объему хватает для того, чтобы занять пустоту.
Для русскоязычных сайтов стандартной рыбы не существует - у нас веб-дизайн не получил еще того развития, что и на западе. Я использую любой текст схожей сайту тематики, выдернутый из интернета.
У Лебедева есть забавный текстогенератор для таких вот целей, при недостатке информации можно пользоваться им. http://vesna.yandex.ru/
А вот с англоязычными сайтами все любопытнее. Существует готовая рыба, котрая выглядит очень забавно:
"Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi."
Это - трансформированный до неузнаваемости текст философского трактата Цицерона «О пределах добра и зла», написанного в 45 году до нашей эры на латинском языке. Говорят, 32 абзаца. Но 32 абзац выглядит так:
"Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur?"
Вот как-то так.
На сегодня закончила грузить вас теорией, надеюсь, не бесполезно.
Перейдем к практике.
Сегодня мы нарисуем наклейку-облачко, которую можно будет использовать на сайте для привлечения пользователей =)
Создаем в фотошопе картинку 500х500 пикселей.
Выберем в панели инструментов рисование фигур.
(здесь и далее картинки кликабельны)
В пенели управления инструментом, наверху, выбираем облачко.
Если там нет облачка, нажмите на стрелочкув правом верхнем углу и выберите пункт "All"
Рисуем облачко, зажав "Shift".
Размеры облачка произвольные, желательно - покрупнее. Располагаем облачко по центру картинки. Цвет облачка - произвольный, все равно будем менять.
Растеризуем слой, на котором получилось наше облачко (правая кнопка мыши на слое с облачком).
Опять щелкнем правой кнопкой мыши на слое с облачком и выберем пункт "Blending options"
В появившемся окне из списка слева выбираем пункт "Drop shadow" и ставим настройки как на картинке (цвет тени: #cccccc)
Выбираем из списка слева "Gradient overlay" и ставим параметры градиенту по цветам:
и по другим настройкам:
Дублируем слой и убираем у нового слоя стили
Поднимаем его так, чтобы нижняя часть облачка нового слоя образовывала с облачком старого слоя еще одно облачко
Дальше зажимаем "Ctrl" и твкаем в палитре слоев на картинку между глазиком и названием слоя на новом облачке. Должно получиться выделение по контуру картинки.
Заливаем его градиентом
с таким параметрами:
Снимаем выделение и меняем прозрачность слоя на 76 (возможно, позже придется поменять ее позже):
Выбираем слой с первым облачком, зажимаем "Ctrl" и твкаем в палитре слоев на картинку между глазиком и названием слоя. Не снимая выделение, переходим на новый слой, нажимаем "Ctrl" + "Shift" + "I", должно получиться обратное выделение:
Жмем на "Del".
Собственно, почти все. Остались доработки.
Наше облачко нечетко видно на белом слое, значит его надо обвести. Для этого на старом облачке выбираем "Blending options"
и в списке слева (где тень и градиент), выбираем "Stroke", ставим ему такие параметры:
Дальше берем инструмент "текст" и понравившимся цветом и шрифтом пишем "Внимание! Специальное предложение от нашего сайта!"
Слой с текстом можно поместить под слой с новым облачком или оставить поверх всех слоев. Если помещать его под слой с новым облачком, у этого слоя придется увеличить прозрачность.
Результат:
По традиции, вопросы и предложения, а так же показ собственных работ - в коментариях.
Сложность теории: легкая, но занудная.
Сложность практики: средняя, исключительно из-за общего количества действий.
Итак, теория.
Я не буду здесь говорить о том, как сверстать сайт в HTML. Хотя, если интересно, могу ввести допуроки еще и по нему. Впрочем, любой, кто пользуется жж, так или иначе знаком с этим языком разметки текста.
Однако, я буду рассказывать, как сделать верстабельный сайт так, чтобы не загромождать его графикой, но и так, чтобы было красиво и правильно. Начну я, наверное, с базовых понятий веб-дизайна.
Здесь я буду говорить о так называемом позиционировании внутри сайта. В связи с чем вот вам термины, касающиеся позиционирования:
1. Сетка сайта - это такая фигня, которая показывает, как будет расположена информация на странице. Где будет меню, где текст и так далее.
2. Шапка сайта - это такая фигня, на которой обычнот расположено название сайта, его логотип и кучка другой информации, на которую создатель сайта хочет обратить внимание (напр., контакты или спецпредолжения)
3. Меню - это такая фигня, которая помогает посетителю перемещаться по сайту.
4. Контент - это, собственно, текстовое наполнение страницы или сайта. То есть, та информация, ради которой посетитель сюда пришел.
5. Подвал - это такая фигня, в которой обычно пишут копирайты разработчиков дизайнеров и так далее.
Позиционирование информации на сайте бывает двух видов:
1. По сетке.
Вы можете расположить информацию на сайте как вам взбредет в голову, однако, есть несколько стандартных и наиболее часто используемых сеток.
2. По контенту внутри сетки.
С позиционированием внутри - все.
Теперь к наполнению дизайн-макета. Частенько так случается, что на момент создания дизайна у заказчика/друга/себя самого тексты еще не готовы/проходят последние проверки/не очень красивы стилистически и т.д. Тогда встает вопрос, чем заполнять дизайн-макет.
Обычно его заполняют так называемой рыбой - каким-то левым текстом, которого по объему хватает для того, чтобы занять пустоту.
Для русскоязычных сайтов стандартной рыбы не существует - у нас веб-дизайн не получил еще того развития, что и на западе. Я использую любой текст схожей сайту тематики, выдернутый из интернета.
У Лебедева есть забавный текстогенератор для таких вот целей, при недостатке информации можно пользоваться им. http://vesna.yandex.ru/
А вот с англоязычными сайтами все любопытнее. Существует готовая рыба, котрая выглядит очень забавно:
"Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi."
Это - трансформированный до неузнаваемости текст философского трактата Цицерона «О пределах добра и зла», написанного в 45 году до нашей эры на латинском языке. Говорят, 32 абзаца. Но 32 абзац выглядит так:
"Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur?"
Вот как-то так.
На сегодня закончила грузить вас теорией, надеюсь, не бесполезно.
Перейдем к практике.
Сегодня мы нарисуем наклейку-облачко, которую можно будет использовать на сайте для привлечения пользователей =)
Создаем в фотошопе картинку 500х500 пикселей.
Выберем в панели инструментов рисование фигур.
(здесь и далее картинки кликабельны)
В пенели управления инструментом, наверху, выбираем облачко.
Если там нет облачка, нажмите на стрелочкув правом верхнем углу и выберите пункт "All"
Рисуем облачко, зажав "Shift".
Размеры облачка произвольные, желательно - покрупнее. Располагаем облачко по центру картинки. Цвет облачка - произвольный, все равно будем менять.
Растеризуем слой, на котором получилось наше облачко (правая кнопка мыши на слое с облачком).
Опять щелкнем правой кнопкой мыши на слое с облачком и выберем пункт "Blending options"
В появившемся окне из списка слева выбираем пункт "Drop shadow" и ставим настройки как на картинке (цвет тени: #cccccc)
Выбираем из списка слева "Gradient overlay" и ставим параметры градиенту по цветам:
и по другим настройкам:
Дублируем слой и убираем у нового слоя стили
Поднимаем его так, чтобы нижняя часть облачка нового слоя образовывала с облачком старого слоя еще одно облачко
Дальше зажимаем "Ctrl" и твкаем в палитре слоев на картинку между глазиком и названием слоя на новом облачке. Должно получиться выделение по контуру картинки.
Заливаем его градиентом
с таким параметрами:
Снимаем выделение и меняем прозрачность слоя на 76 (возможно, позже придется поменять ее позже):
Выбираем слой с первым облачком, зажимаем "Ctrl" и твкаем в палитре слоев на картинку между глазиком и названием слоя. Не снимая выделение, переходим на новый слой, нажимаем "Ctrl" + "Shift" + "I", должно получиться обратное выделение:
Жмем на "Del".
Собственно, почти все. Остались доработки.
Наше облачко нечетко видно на белом слое, значит его надо обвести. Для этого на старом облачке выбираем "Blending options"
и в списке слева (где тень и градиент), выбираем "Stroke", ставим ему такие параметры:
Дальше берем инструмент "текст" и понравившимся цветом и шрифтом пишем "Внимание! Специальное предложение от нашего сайта!"
Слой с текстом можно поместить под слой с новым облачком или оставить поверх всех слоев. Если помещать его под слой с новым облачком, у этого слоя придется увеличить прозрачность.
Результат:
По традиции, вопросы и предложения, а так же показ собственных работ - в коментариях.