Строение
Урок №6: Делаем шапку для сайта(1) или "не так страшен черт, как его малюют".
Тема в разделе "Веб-Дизайн", создана пользователем artik69, 20 июн 2011.
  1. artik69

    artik69 Новичок

    Сообщения:
    163
    Симпатии:
    12
    Баллы:
    0
    По многочисленным просьбам, этим уроком начинается интересная для многих тема создания "шапок" для сайтов. В данном уроке будет описан один, достаточно простой, из многочисленных способов дизайна "шапки" для веб-странички.

    Как уже говорилось в рамках этого форума в темах, посвященных сайтостроению и веб-дизайну, создание шапки не столько технически сложный, сколько творческий процесс. Конечно, необходимо учитывать при ее создании общий дизайн сайта (в идеале дизайн шапки делается одновременно с дизайном всего сайта). Также нужно определиться с такими техническими особенностями будущего сайта, влияющими в итоге на вид шапки, как позиционирование (по центру страницы, либо «прижатость» к какому-то краю), «резиновость» (возможность масштабирования) и т.д. Но при всех технических нюансах, всё-таки решающую привлекательность сайту придает именно дизайн шапки (главная картинка-заголовок страницы).
    В этом уроке мы сделаем достаточно простую шапку, без встроенного в неё меню (иногда меню встраивается в шапку), и прочих «излишеств». Я нарочно постараюсь избегать приведения горячих клавиш, чтобы было понятно, какие именно действия происходят при выполнении каждой конкретной операции. То есть не буду писать типа «нажмите Shift+Ctrl+I и будет вам щастье», а так и напишу «выберите пункт Inverse верхнего меню Select для того, чтобы инвертировать(обратить) выделение».
    Вот то, что в итоге должно у нас получиться:



    Данная шапка хороша тем, что ее можно будет разместить по центру страницы, а значит, будет возможность масштабирования ее (страницы) по всей ширине.

    Итак, делаем шапку для компании «Sayan - Shina». Название компании определяет род ее деятельности и подсказывает нам сценарий-идею коллажа, который будет составлять основу шапки.
    Для коллажа используем всего две картинки.

    собственно, горы Саяны:



    И… колесо:



    Обычно, когда речь идет о конкретном товаре конкретного производителя, изображения этого товара должен предоставлять сам заказчик. Но в нашем случае, нам пришлось подыскивать подходящее колесо в интернете (оставим авторство колеса как товара на совести заказчика :ab:).

    Шаг 1. Создадим документ, указав его размеры в пикселях, соответственно предполагаемым размерам шапки на будущей странице (в нашем случае 1024 х 270), и зальем его предполагаемым (или уже имеющимся, если вы создаете шапку для замены на уже готовом сайте) цветом фона:



    Шаг 2. Вставим в него изображение гор. Для этого достаточно просто, используя ЛКМ «перетянуть» изображение из документа «горы» в документ с нашей будущей шапкой. Возможно, придется подвигать и помасштабировать картинку после ее размещения внутри нашего документа. Используйте для этого команды меню Edit – Transform – Scale. Слой с картинкой при этом должен быть активным (выделенным в палитре слоев):



    Шаг 3. Добавим слою с горами контраста (верхнее меню – Image – Adjusments – Brightness/Contrast):



    Шаг 4. Теперь возьмем инструмент Eraser Tool (Ластик) и сотрем всё лишнее, примерно как показано на картинке ниже:



    Важно! Для указанной в шаге 4 операции, необходимо предварительно поработать с настройками «ластика», а именно выбрать ластик с мягкими краями. См. меню настроек инструмента - Brush (обычно оно отображается под верхним меню, при условии, что инструмент выбран). Там же настраивается размер самого «ластика». Если вы не видите изменений курсора – размера «ластика» нажмите Caps Lock (при вкл. англ. раскладке). При выбранном инструменте «ластик», курсор должен отображаться, как окружность с выбранным диаметром площади стирания. Горячие клавиши быстрого изменения этого диаметра (размера ластика) – «[» и «]».

    Шаг 5. Вставим в наш документ изображение колеса:



    Конечно, мы могли бы удалить лишний белый фон вокруг колеса, используя инструмент выделения Magic Wand Tool (Волшебная палочка). Обычно так и делается когда нужно что-то быстро выделить и удалить и когда контраст между фоном и изображением (как в нашем случае), позволяет это сделать. Но мы, для практики, сделаем это вручную.
    Для данной операции воспользуемся инструментом Polygonal Lasso Tool (Полигональное лассо). Рекомендую перед началом выделения выставить значение Feather в настройках инструмента равное 1 px. Это позволит краям объекта, после его вырезания, быть «мягкими» не рубленными.
    Рекомендую также перед выделением увеличить масштаб документа, чтобы в процессе оконтуривания не напрягать глаза и лучше контролировать качество линии выделения.



    Ручное выделение объектов – это достаточно кропотливая, порой ювелирная работа. Но именно такой способ выделения позволяет наилучшим образом контролировать качество вырезания объекта, а значит и итоговый результат всей работы. Если вы сделали неудачный шаг («скривили»), просто нажмите Del и инструмент «откатит» ваши действия на шаг назад.
    После того как вы пройдетесь инструментом по контуру всего колеса и замкнете выделение, изображение колеса будет выглядеть так словно по его контуру бегут «муравьи» - это пунктирная линия, обозначающая границу выделенной зоны.



    Шаг 6. Поскольку нам надо удалить не колесо, а то, что вокруг него, инвертируем выделение: Верхнее меню – Select – Inverse, после чего нажмем Delete, и белый фон вокруг колеса удалится. Чтобы снять уже ненужное выделение в том же Верхнем меню – Select, выберите команду Deselect.



    Шаг 7. Теперь напишем по краям колеса слова, обозначающие название компании «SAYAN» и «SHINA». Воспользуемся для этого инструментом Horizontal Type Tool (попросту, Горизонтальный текст). Выбор гарнитуры шрифта, его цвета и размера целиком зависит от ваших творческих пристрастий и наличия достаточного выбора шрифтов в «базе». Я же предпочитаю легко читаемый, без особых наворотов. В данном случае HeliosCondBlack, белого цвета:



    После того, как текст установлен в нужном месте, покрашен в нужный цвет и т.д. (вобщем если вы твердо уверены, что уже не будете его больше редактировать, красить и масштабировать) рекомендую его растрировать (то есть превратить в слой с картинкой): в палитре слоев на слое с текстом ПКМ и выбрать Rasterize Layer.

    Шаг 8. Для лучшей читабельности применим к слою с надписью эффект обводки (синего цвета). Для этого, при активном слое, выполните: Верхнее меню – Layer (Слой) – Layer Style Stroke. В открывшемся окне выберите цвет и размер контура и нажмите ОК:



    У наших белых букв должна получиться вот такая темно-синяя обводка:



    Шаг 9. Добавим буквам эффект отражения. Для этого сделаем копию слоя. Просто перетащите в палитре слоев с помощью ЛКМ слой с буквами на иконку «Create a New Layer».



    Отобразим вновь созданный слой по вертикали (Верхнее меню - Edit - Transform - Flip Vertical) и сдвинем его вниз, как показано на рисунке ниже, после чего уменьшим прозрачность слоя-отражения, например до 75%:



    Шаг 10. Повторим операцию отражения с колесом.



    Надо сказать, что после создания слоя, выполняющего роль отражения, необходимо переместить его в палитре слоев ниже слоя-родителя. Так будет правильнее. Отражение недолжно накладываться на объект, который оно отражает. Лучше, если оно будет «под ним». Для того чтобы, поменять слои местами достаточно ЛКМ перетащить любой из них в палитре слоев на место другого:



    Шаг 11. Сотрем с помощью «мягкого ластика» нижнюю часть колеса, как показано на картинке ниже:



    Шаг 12. Еще немного поработаем с буквами. Применим к ним эффект, о котором рассказывалось в предыдущем уроке «Интересный эффект – Текст в окружающей его среде». Для этого выделим слой с нашей надписью (сделаем его активным). Далее выполним Верхнее меню – Select – Load Selection. В результате данной операции наши буквы должны выделиться по контуру, как показано на картинке ниже:



    Шаг 13. Теперь, не снимая выделение (!) перейдем на слой с изображением гор (выберем его, сделаем активным в палитре слоев). Далее, выполним стандартную для всех редакторов операцию «копировать - вставить»: Верхнее меню – Edit –Copy, затем Edit-Paste.
    Сейчас мы не видим вставленный слой. Для того, чтобы его увидеть, надо переместить его в палитре слоев «над» слоем с буквами.
    Теперь можно поиграть с настройками слоя гор вырезанных по контуру текста и вставленных над ним. Я сделал его немного ярче и прозрачнее. Вот, что должно в итоге получиться:



    Вот, собственно, и всё.

    На готовой страничке эта шапка может выглядеть примерно так:



    По подобному принципу с использованием вот этих исходных картинок:





    готовилась шапка для вот этого сайта:

     
    Последнее редактирование модератором: 20 июн 2011
  2. samg

    samg Новичок

    Сообщения:
    5.822
    Симпатии:
    26
    Баллы:
    0
    artik69, спасибо за очередной урок. Давно хотелось увидеть, как создается шапка для сайта.
     
  3. DarkAngel

    DarkAngel Новичок

    Сообщения:
    2.908
    Симпатии:
    45
    Баллы:
    0
    artik69, спасибо за интересный урок, но у меня вопрос: что посоветуете для моего сайта сделать? Дизайн | Уроки Может что-то другое вставить ? Просто "подкиньте" идея, а я уже сам сделаю :)
     
  4. KreOzoT

    KreOzoT Новичок

    Сообщения:
    49
    Симпатии:
    10
    Баллы:
    0
    Я б оставил как есть, только бы с надписью поработал бы.. Шрифт другой, эффектов побольше.. В общем, побольше фантазии..
    Вот, к примеру, навскидку - 3D:
     
  5. artik69

    artik69 Новичок

    Сообщения:
    163
    Симпатии:
    12
    Баллы:
    0
    Идея – это такая капризная «тетя», которая не может, к сожалению, прийти по приказу :ab:.

    Если отталкиваться о той идеи, которая уже присутствует в оформлении сайта, то могу посоветовать следующее:

    Использовать в шапке дизайнерскую тему, которая уже есть на сайте, а именно что-то вроде мазка по штукатурке, как под словом «Поиск» и т.д. Только в шапке этот мазок должен быть побольше.

    Ведерко с краской, да и всю шапку я бы сделал тоже покрупнее.

    Шрифты – на сайте их слишком много. Особенно бьет по глазам шрифт в названии сайта. Вообще, считается неправильным одновременное использование в дизайне шрифтов «с засечками» и «без засечек». Посему шрифт в названии рекомендую поменять, например, на тот, что используется в меню (Impact его название, если ничего не путаю).

    Цвета – ими тоже не стоит злоупотреблять. Элементы дизайна должны сочетаться – перекликаться цветами. Когда женщины подбирают макияж под цвет сумочки или туфель, они, на самом деле, делают это не каприза ради :ab:. Вот буквы, опять же в названии, которые сейчас бледно-темно-коричневого цвета, я бы советовал покрасить в какой-нибудь цвет, который уже есть на странице. Например, сделать их такого же цвета (если есть тяга к коричневому), как «бирочки» на которых написана дата:



    Или можно сделать их поярче, например, оранжевым цветом, как значок и надпись RSS:



    Либо вообще покрыть буквы какой-нибудь текстурой:



    Цвет закрашенной цифры «4», по идее, должен совпадать с цветом краски в ведерке. К тому же, можно показать объемно, применив соответствующий эффект, что это действительно покрашенная (не докрашенная) буква, и краска «течет» по ней.

    Кисточка тоже, по идее, должна быть не чистая, а уже, как минимум, один раз «обмакнутая» в ведерко с краской.

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

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

    ………………….

    Создание шапок для сайтов, которые взяты с шаблонных, вроде бы и не сложно, но, в то же время и имеет свои трудности. Для того чтобы «впихнуть» в уже имеющийся шаблон сайта свою шапку, нужно как минимум, знать как это сделать, и из чего, собственно, сделана - собрана страница, и чего где менять, и вообще, возможно ли «впихнуть невпихуемое». Также могут возникнуть проблемы с нестыковкой шапки с остальными элементами (особенно если есть всякие рамочки, которые «захватывают» область шапки). Могут появиться нестыковки цветов фона шапки и основного документа, особенно если используется градиентная заливка. Я уже молчу про случаи, когда в шапке шаблонного сайта размещены кнопки меню, окно поиска и т.д.

    ...............

    Что касается, какой-то новой идеи, то, как я уже сказал, это дело такое... Надо садиться и думать... залезать в ванну и думать... ложиться ночью спать и думать... и т.д. :ag: и иногда "на это уходят годы" (с) а иногда это может прийти за 5 секунд и совершенно невзначай :ab:
     
    Последнее редактирование модератором: 22 июн 2011
  6. DarkAngel

    DarkAngel Новичок

    Сообщения:
    2.908
    Симпатии:
    45
    Баллы:
    0
    А можно подробнее написать как сделать такой вид? Пробовал тоже кисточку "обмакнуть", но не получилось у меня...

    ---------- Добавлено в 18:16 ---------- Предыдущее сообщение было написано в 18:13 ----------

    Вот это тоже не знаю как сделать...
     
  7. artik69

    artik69 Новичок

    Сообщения:
    163
    Симпатии:
    12
    Баллы:
    0
    Да, есть много вариантов как это сделать. Я же «обмакивал» кисточку самым ленивым способом. Наверняка есть пара-тройка более изящных методов, но мы-то это делали по-быстрому.
    Постараюсь повторить эффект:

    1. Создаем новый слой над слоем с кисточкой.
    2. Инструментом Polygonal Lasso Tool делаем примерно такое выделение:



    3. Заливаем выделенную область цветом краски, которая в банке:



    4. Применяем к слою эффект выдавливания Bevel and Emboss с настройками по умолчанию, лишь поменяв цвет тени с черного на более подходящий:



    5. Меняем режим смешивания слоя на Screen, чтобы обозначить текстуру волосков кисти (мы применили это до шага 4, и этот эффект уже виден на предыдущей картинке).

    6. При необходимости дорабатываем («причесываем») слой ластиком и инструментом Smudge Tool (Палец):



    Данный вариант отличается от представленного ранее наличием тени, объема… Видимо в прошлый раз я на каком-то этапе слил слои с эффектом выдавливания.

    Шаги 1 и 2 можно заменить, просто зарисовав нужным цветом необходимую область инструментом Brush Tool (Кисть):



    И далее также по шагам, начиная с 4-го.

    Либо, есть еще такой вариант:
    Не создавая над слоем с кисточкой новый слой, прямо с этого слоя копируем и вставляем выделенную область (выделение см. шаг 2, далее копировать - вставить), то есть кусочек кисти, который нужно покрасить копируем поверх самой кисти (он вставится новым слоем). Затем просто поэкспериментируем с Hue/Saturation этого слоя, подобрав ему необходимый оттенок и яркость. Текстура кисти при этом сама по себе, у слоя, который «обмакнули», останется заметной:

     
    Последнее редактирование модератором: 27 июн 2011
  8. artik69

    artik69 Новичок

    Сообщения:
    163
    Симпатии:
    12
    Баллы:
    0
    Не могу сказать, что сделать это достаточно просто. Если есть возможность, например, имеется исходная картинка в нормальном качестве, то лучше, конечно, использовать ее.
    К тому же, тут много технических нюансов. Я не знаю, как вставить эту картинку в данный конкретный сайт. Там могут быть тонкости, чисто программные, которые надо учитывать непосредственно при верстке страницы.

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

    Итак у нас есть исходная картинка, подобную которой (только в увеличенном виде) нам нужно сделать:



    Загрузим ее в Photoshop. Затем создадим новый документ нужного нам размера (в данном случае 600 х 200 пикселей) и зальем фон цветом (предварительно взяв его образец пипеткой из исходной картинки) внутренней области "мазка".



    Это будет нижний «подштукатурочный» слой.

    С верхним слоем (самой штукатурки) немного сложнее. Мы не можем просто взять его образец пипеткой, как в предыдущем случае, так как он имеет текстуру. Поэтому делаем следующее.
    Выделим (зажав Shift) ровную квадратную область, размером примерно 15 х 15 пикселей на свободном поле исходника:



    Далее идем в меню Edit и копируем Copy выделенный кусок в буфер обмена. Создаем новый документ (он уже будет того размера, который имеет находящийся в буфере образец нашей штукатурки), и вставляем скопированный кусок EditPaste. После чего нам нужно сохранить данный образец в качестве обоев (заливки). Для этого выполняем Edit – Define Pattern. В открывшемся окне пишем название «образца обоев» и жмем ОК, тем самым сохраняя образец в библиотеке.



    Переходим к основному документу, создаем новый слой и заливаем его сохраненной ранее текстурой. Для этого, при активном новом слое, выполняем для него Edit – Fill, в открывшемся диалоге в разделе Contents – Use выбираем способ заливки Pattern, в окошке Custom Pattern находим наш сохраненный ранее образец, выбираем его и жмем ОК. Слой документа зальется текстурой штукатурки, причем образец которой, был взят непосредственно со страницы сайта:



    Теперь перетащим изображение исходного мазка в окно основного документа и увеличим полученный слой до нужных размеров:



    Видно, что при увеличении изображения оно «размылось» (так всегда бывает при увеличении растровой картинки). Кроме того при таком масштабировании увеличится и зерно текстуры фона картинки, а значит не совпадет с текстурой фона страницы. Всё это и является причиной, того, ради чего мы собственно затеяли эту нашу работу.

    Мы загрузили образец в окно документа и увеличили его лишь с одной целью – обрисовать, т.е. выделить примерно контур мазка. Для этого воспользуемся инструментом Polygonal Lasso Tool:



    После данной операции слой с исходной картинкой можно отключить или удалить. Она нам больше не пригодится.

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



    Теперь зайдем в свойства слоя с штукатуркой (дважды кликнув по нему в палитре слоев) и сделаем предварительные настройки эффекта тени (предварительные, потому что потом их все равно придется подправлять по ходу работы…):



    Жмем ОК. После чего поочередно выбирая разные виды и размеры ластика и кисти, стираем-сглаживаем, дорисовываем рваные края мазка:





    до тех пор пока не получится, что-то подобное:



    Возможно, в процессе этих экспериментов с ластиком - кистями придется не раз корректировать настройки тени слоя, ее цвет, прозрачность, наклон, интенсивность и т.д.

    Конечно, данные «дефекты» штукатурки лишь отдаленно напоминают исходную картинку, но, как говорится, зато сделано собственными руками :ab:. Осталось добавить «банку с краской» и логотип:



    ...................................

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



    Налицо нестыковка фонов страницы и шапки. Всё потому, что верхняя часть фона страницы имеет градиент (переход от светлого к темному), в то время как фон нашей шапки равномерный.

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

    В общем, сделать шапку заодно с дизайном с нуля - это одно, а сделать шапку под готовый дизайн – это уже совсем другое :ab:.
     
    Последнее редактирование модератором: 27 июн 2011
  9. neoser

    neoser Новичок

    Сообщения:
    8
    Симпатии:
    0
    Баллы:
    0
    все так просто, а начинаешь делать что-то и всегда появляются осложнения, но автору спасибо за роботу!
     
  10. dik

    dik Новичок

    Сообщения:
    93
    Симпатии:
    0
    Баллы:
    0
    Ответ: Урок №6: Делаем шапку для сайта(1) или "не так страшен черт, как его малюют".

    красиво получилось. и в ответах тоже много интересного. спасибо всем за советы
     
  11. Надежда Орехова

    Надежда Орехова Новичок

    Сообщения:
    22
    Симпатии:
    0
    Баллы:
    0
    Ответ: Урок №6: Делаем шапку для сайта(1) или "не так страшен черт, как его малюют".

    Здорово! Действительно, смотреть - так все просто, а как начинаешь делать, так то одно вылезает, то другое... Совсем недавно узнала, почему у меня то появляется диаметр ластика и кисти, а то его не видно. Куда только не пробовала потыкать - никаких изменений! Иногда даже в совсем не нужном тебе уроке вдруг появляется подсказка, ответ на который тщетно пытаешься найти уже достаточно долго.
    Спасибо за урок!
     
  12. Blogolady

    Blogolady Новичок

    Сообщения:
    5
    Симпатии:
    0
    Баллы:
    0
    Ответ: Урок №6: Делаем шапку для сайта(1) или "не так страшен черт, как его малюют".

    В комментариях столько интересного почерпнула - пожалуй, даже больше, чем в основной теме :) Хотя и она пойдет в копилку - так как нарисовать свой дизайн своему сайту хочу уже давно. Спасибо автору :)
     
Показать ещё