Предыдущий ролик Следующий ролик  

Видео урок: Изменение графики

Создание отзывчивого веб-дизайна

Если вы продолжаете финальный проект курса "Создание отзывчивого веб-дизайна", то мы изменим некоторые из этих графиков. Итак, заходим в Exercise Files в templates и открываем баннер artwork.psd. Единственное реальное изменение внутри этого файла заключается в том, что эта фотография перевернута горизонтально, чтобы дать нам отрицательное значение вверху слева. Как мы видели во вступительном видео, здесь у нас находится наш логотип, а здесь у нас будет заголовок с анимацией. Также мы создадим анимацию фотографий на горизонтальный манер, поэтому будем использовать инструмент Crop.

Давайте спустимся вниз и выберем инструмент Slice. У нас появятся части. Держим Cmd+Ctrl, двойной щелчок мышкой, чтобы получить опции Slice. Второе изменение, которое я сделал здесь, - увеличил ширину. Ширина большого баннера теперь составляет 1,080 пикселей, чтобы соответствовать горизонтальному движению. Ширина среднего баннера составляет 900 пикселей. А для маленького экрана мы оставляем 500 на 100. После создания этих частей давайте вернемся в меню File. Давайте перейдем сюда и выберем Save for Web. Также у нас установлены настройки оптимизации. Давайте теперь зайдем сюда и нажмем Save.

На экране выбираем папку myWebsite, далее выбираем директорию Images. Для опций выбираем All User Slices, а затем нажимаем Save. Мы переписываем предыдущие файлы, которые у нас остались от последнего курса. Давайте закроем этот файл и вернемся обратно к файлам с упражнениями, а теперь открываем artwork.psd. Это другой файл, который являлся частью предыдущего курса, где мы создавали логотипы разных размеров, промо-графики и мобильные стрелки. Итак, давайте на панели Layers перейдем сюда и включим слой FPL. Я немного увеличу canvas. У меня выбран инструмент Slice, так что мы можем увидеть части.

Одно изменение здесь заключается в том, что я увеличил размер спрайт-графика. В предыдущем курсе наш вызов активной ссылки был спрайт-графиком, который состоял из оранжевой и синей стрелки. И когда пользователи переходили по ссылкам, мы меняли положение графика. Что касается заголовка, который мы собираемся использовать в шапке, то нам нужно четыре разных состояния этого графика. Одна из приятных вещей, касающихся использования таблиц стилей, заключается в том, что мы можем увеличить размер этого графика. Нам не нужно менять предыдущий CSS, мы можем просто добавить больше правил, чтобы поменять эту конкретную таблицу для дополнительных графиков, которые нам нужны. Новый график, который я создал, - это Mobile menu error.

В этом курсе мы будем менять пользовательское представление о сайте, и вместо того чтобы перемещать навигацию вниз экрана, мы зафиксируем навигацию вверху. Кроме того, мы дадим пользователям эту стрелку для мобильной навигации. Это также настраивается как таблица стилей, так что мы можем определить, когда меню закрыто и когда меню открыто. Давайте сохраним это и перейдем к меню Layers. Теперь отключим слой FPL. Идем в меню File и выбираем Save for Web. Все эти настройки также были установлены. Выбираем Save. Убедитесь, что в Slices мы выбрали All User Slices. C экрана мы выбираем myWebsite, Images, а затем нажимаем Save.

После этого мы перепишем существующие графики, теперь нажимаем Save и Close для файла Photoshop. Сейчас мы возвращаемся к папке myWebsite на экране и открываем index.html в браузере. Мы видим, что графики для заголовка теперь изменены, и справа у нас есть конструкции. В следующем ролике мы поменяем местоположение нашего логотипа, чтобы он находился слева. А если мы перейдем сюда и уменьшим размер окна браузера, CSS правила останутся на месте. Если мы уменьшим экран, мы увидим, что навигация показана все еще внизу экрана. Теперь наши графики находятся на месте, и далее мы изменим HTML и CSS, чтобы навигация оставалась наверху,

и переместим логотип, так чтобы он не сталкивался с конструкциями.