Часто владельцы ресторана недооценивают важность оформления меню. Мы уверены, что вы наверняка знакомы с тем, что многие рестораны предлагают посетителям просто абсолютно непривлекательное меню. Если вы владеете рестораном, то вам обязательно стоит позаботиться об оформлении меню, так как это очень важно. Вашими главными приоритетами является предоставить великолепный сервис и качественную еду.
Сегодня мы не хотим приводить кого-то в пример и кричать, что в современном мире каждый человек обязан интересоваться дизайном и понимать его. Ведь это не так. Многие люди сегодня используют не очень красивые предметы, одежду, обувь, их не особо волнует, как выглядит меню в ресторане, мебель, автомобили и прочее. Многие люди на протяжении всей жизни даже минуту не хотят посвятить дизайну, функциональности или эстетике. Это и хорошо и ужасающе одновременно, и при этом вам не следует забывать, что есть и другие люди, которых эти вещи сильно заботят.
Представьте себе, что вы зашли в ресторан, где абсолютно все создает приятное впечатление: интерьер, обслуживание, музыка, еда, дизайн меню. Многие стараются обращать внимание на всевозможные мелочи, и действительно гордиться тем, с какой заботой и внимательностью была сотворена та или иная вещь.
С другой стороны, нам часто попадаются такие заведения, где хочется скорее поесть и уйти.
Если ресторан приносит деньги, пусть даже и небольшие, почему бы не нанять профессионального дизайнера, который бы ответственно подошел к разработке дизайна визитных карточек, флаеров, меню и прочего? Если вы как владелец ресторана заботитесь об имидже вашего заведения и бизнеса в целом, то вам обязательно следует уделить этому внимание. Если у вас нет желания инвестировать в собственный бизнес, это говорит о том, какой вы бизнесмен.
Пожалуйста, не нужно думать, что меню – это единственное, чему следует уделять внимание. Нам кажется, что каждый ресторан должен быть оформлен как-то уникально, с какой-то идеей, чтобы выдерживать конкурентную борьбу, чтобы привлекать внимание посетителей и журналистов, должен предоставлять качественное обслуживание, использовать всевозможные эффективные маркетинговые ходы для привлечения посетителей, предоставлять посетителям великолепное оформление и интерьер заведения.
Давайте наконец поговорим о меню:
* У вас ресторан представительского класса или относится больше к развлекательной сфере? Может ли посетитель это понять по вашему меню?
* Функционально ли ваше меню?
* Присутствует ли в меню ваш логотип?
* Не мелкий ли шрифт? Его удобно читать?
* Верстка меню простая и опрятная? Или вводит в заблуждение?
* Долговечно ли ваше меню?
* Собираетесь ли вы менять меню каждые пару месяцев?
Вам стоит ответить на эти вопросы. Меню – это отличный способ создать впечатление у посетителей о вашем заведении. Вы будете удивлены, насколько сильным может быть эффект от меню. Если вы не владеете дизайнерскими навыками, мы рекомендуем вам нанять талантливого дизайнера, который поможет вам решить эту проблему.
Сегодня мы хотим представить вам 35 примеров красивых дизайнов меню. Мы вручную отобрали только самые лучше примеры реализации, которые помогут вам вдохновиться на небольшой ребрендинг.
www.coolwebmasters.com
В этом уроке я покажу Вам, как создать CSS меню с помощью технологии спрайтов.
Начнем урок с создания графики в Фотошопе, и продолжим написанием необходимого HTML и CSS кода.
Для чего делать меню с помощью картинок?
Ответ очень прост: на изображениях можно использовать более интересные решения (шрифты, текстуры, фоны). Кроме этого, возможно создание более красивых эффектов при наведении мышкой на меню.
CSS спрайты
Лучший способ создать меню с помощью изображений — это использование технологии CSS спрайтов. На нашем сайте уже несколько раз были примеры подобных меню. Можете посмотреть тут, тут и тут.
Фотошоп
Создайте новый документ 800×400px. Наше меню будет меньше, но свободное место нам не помешает.
Фон меню
Выберите инструмент Rectangular Marquee, далее выберите Fixed Size из выпадающего меню Style в панели опций. Введите 550px ширину и 50px высоту.
Добавьте новый слой (нажмите на вторую иконку справа внизу окна со слоями). Теперь нажмите в любом месте документа, чтобы получить прямоугольник 550 на 50 пикселей. Не обязательно вставить его в самый центр, но лучше как можно ближе к нему. Создайте направляющие вокруг прямоугольника как показано на рисунке.
Выберите цвет для фона. В примере используется темно коричневый (#514537). Используйте интрумент Rounded Rectangle. При этом убедитесь, что у Вас выбран режим Shape Layers.
При выбранном инструменте Rounded Rectangle нарисуйте прямоугольник между направляющими. У Вас получится следующее:
Этот прямоугольник будет служить фоном для меню. Последним штрихом будет создание градиента. Кликните дважды по прямоугольнику, чтобы появилось окошко Layer Styles. В нем найдите Gradient Overlay. Выберите два цвета: первый такой же, второй сделайте немного светлее.
Если Вы выбрали темно коричневый как основной цвет, тогда Вам следует выбрать светло коричневый для красивого градиента (#71604d). Вот что у Вас выйдет:
Помните, для получения красивого градиента, второй цвет должен быть немного светлее основного.
Элементы меню
Теперь можем создать элементы меню. В нашем меню 5 кнопок: «Tutorial, Siti CSS, Risorse, Showcase и Offtopic» (можете подставить любой свой текст сюда — в примере используется итальянский язык).
Меню шириной 550 пикселей. Это означает, что каждая кнопка будет 110 пикселей в ширину. Создайте прямоугольник 110 на 50 пикселей и наложите его на верхний левый угол нашего меню и создайте еще одну направляющую.
И так для каждой кнопки. Очень точно выставляйте все направляющие, так как это важно и нам в дальнейшем пригодится.
Используйте инструмент Type и выберите необходимый шрифт. В примере используется шрифт «bebas» (http://www.dafont.com/search.php?psize=m&q=bebas). В примере размер шрифта 18 пикселей, а фон белый. Если у Вас другие цвета, можете подбирать свои варианты.
Нам необходимо, чтобы текст везде находился в самом центре. Чтобы добиться этого нам понадобится создать еще один прямоугольник такого же размера, как и кнопка, и аккуратно поместить его на первый прямоугольник. В настройках инструмента Marquee нажмите на Align Vertical Centers и Align Horizontal Centers (показаны ниже на картинке).
Это выровняет текст по центру:
Повторите эти шаги для каждой кнопки. Совет: вместо создания каждого слоя по отдельности, можно просто копировать первую кнопку, при этом заменяя только текст.
У Вас должно получиться нечто подобное:
Эффект при наведении
Самое сложное уже позади. Нам необходимо создать еще вид меню при наведенной мышке. Это совсем просто. Сгруппируйте все имеющиеся слои (кроме слоя с белым фоном) в одну папку и назовите ее к примеру «Normal State». Далее создайте копию данной кнопки с помощью команды Duplicate Group (появляется при нажатии правой кнопкой на папку). Переименуйте группу слоев, например, в Hover State.
Теперь поднимайте вторую группу слоев вверх над нашим меню. Нижняя граница скопированного меню должна касаться верхней границы нормально меню. Между ними не должно быть просвета. Должно получиться следующее:
Для создания эффекта при наведении нам необходимо только поменять цвет. В примере используется оранжевый (#ffcc00). И вот результат:
Порезка изображений
Пришло время порезать все изображения необходимые для меню. Все направляющие уже готовы, необходимы добавить еще одну над вторым меню. Будьте очень точными при создании направляющих, можете даже использовать зум для наиболее точных результатов.
Используйте инструмент Crop и выберите первый прямоугольник:
После того, как Вы выбрали прямоугольник, нажмите ENTER. На экране останется только выбранная часть. Спрячьте слой с белым фоном в панели слоев. Дело в том, что первые и последние кнопки имеют белые уголки по краям. Если мы когда-либо захотим поменять цвет фона, эти уголки будут белыми. Это нам не подходит. Мы сделаем эти уголки прозрачными, и именно поэтому нам необходимо сохранять изображения в формате .png.
Теперь Вы готовы сохранить изображение. Желательно их сохранять в отдельную папку, и, как я сказал выше, в формате .png.
Повторите эти шаги для каждой кнопки. С фотошопом покончено!
HTML код
Создайте новый документ HTML. Лучше всего для меню использовать неупорядоченный список. Каждому элементу необходимо присвоить отдельный класс, так как для каждой кнопки у нас используется отдельная картинка.
<ul>
<li><a href="@" class="tutorial">Tutorial</a></li>
<li><a href="@" class="siticss">Siti CSS</a></li>
<li><a href="@" class="risorse">Risorse</a></li>
<li><a href="@" class="showcase">Showcase</a></li>
<li><a href="@" class="offtopic">Off topic</a></li>
</ul>
CSS: теория
Вот что мы сделаем с помощью CSS: мы удалим все отступы и границы списка, далее разместим все элементы списка рядом друг с другом. После этого каждой ссылке мы присвоим по изображению для нормального состояния и для состояния при наведенной мышке (при этом мы будем изменять позицию фона).
CSS: практика
В новый CSS документ добавьте следующие строки:
ul {
margin: 0;
padding: 0;
list-style-type: none; }
li { float:left; }Нам необходимо превратить ссылки с инлайновых в блочные элементы для того, чтобы присвоить им фиксированные размеры.
a { display: block; }
Какого размера должны быть ссылки? Наши изображения имеют размер 110 на 100 пикселей. Изображение состоит из двух частей. Нам необходимо показывать только одно из двух в зависимости от поведения пользователя. Для этого, нам необходимо в стилях прописать высоту 50 пикселей.
a {
width: 110px;
height: 50px; }Вы когда-нибудь замечали, что после нажатия на элемент меню, вокруг него появлялась граница? Эта система позволяет юзерам знать на какие ссылки они нажимали. В некоторых браузерах это существенно портит внешний вид меню. Для того, чтобы этого избежать нам необходимо добавить следующее свойство:
a { overflow: hidden; }Нам также необходимо спрятать текст, чтобы отображалась только картинка. Весь текст мы сместим влево:
text-indent:-9999px;Обычно текст смещается на 9999 пикселей. В таком случае он не виден даже на мониторах с большим разрешением. Почему бы совсем не удалить текст? Потому что он полезен для поисковой оптимизации.
Существует несколько свойств CSS, которые относятся к фоновым изображениям. В нашем уроке мы будем использовать три:
* background-repeat — повторять фон или нет;
* background-position — задаем позицию фона;
* background-image — вставляем путь к изображению, которое будет использоваться в качестве фона
Нам нет необходимости повторять фон несколько раз
a { background-repeat: no-repeat; }
С позицией фона все немного сложнее. Давайте рассмотрим этот вопрос детальнее. Наше изображение для кнопки имеет размер 110 на 100 пикселей. Мы определили, что нам необходимо показывать только половину изображения (110 на 50 пикселей), а остальное необходимо спрятать. Это можно сравнить с рамкой для фото: мы можем видеть фото под стеклом, но часть под рамкой для нас невидима.
Технология CSS спрайтов работает аналогично. У нас есть изображение (110 на 100 пикселей) и у нас есть стекло (110 на 50 пикселей), которое способно показать только половину изображения при нормальном состоянии меню, и вторую половину при наведенной мышке. Вопрос заключается в следующем: как нам двигать картинку, чтобы менять половинки фона?
И тут нам пригодится background-position. Цель данного свойства двигать фоновое изображение элемента. Но по отношению к чему должны мы двигать? Нам необходима точка начального отсчета. Именно такой точкой является левый верхний угол площади ссылки (см. картинку ниже)
Свойство background-position использует два значения: расстояние изображения от левого края точки отсчета и расстояние изображения от верха точки отсчета. Оба значения равняются нулю по умолчанию.
Взгляните на картинку выше. Мы вставили нашу картинку, но видна половина, которая используется при наведенной мышке. Нам это не подходит. Значит, нам необходимо сместиться вниз на 50 пикселей от точки отсчета.
background-position:0 -50px;
И все у нас получится:
Для второго состояния мы используем следующий код:
a:hover { background-position: 0 0; }Итак, до этого момента мы уже прописали следующие стили:
a {
display: block;
overflow: hidden;
width: 110px;
height: 50px;
text-indent:-9999px;
background-repeat: no-repeat;
background-position: 0 -50px; }
a:hover { background-position: 0 0; }Осталось только прописать каждой ссылке отдельное фоновое изображение. Тут нам пригодятся классы, которые мы прописывали в HTML.
a.tutorial { background-image:url(immagini/tutorial.png); }
a.siticss { background-image:url(immagini/siti-css.png); }
a.risorse { background-image:url(immagini/risorse.png); }
a.showcase { background-image:url(immagini/showcase.png); }
a.offtopic { background-image:url(immagini/off-topic.png); }Вот и все готово! Надеюсь, данный урок Вам пригодится!
Всем удачи и успехов!!
ruseller.com