Дизайн на уеб 2.0 интерфейс в Photoshop
Разбирането на урока по-долу е разбиране на техниката, с която можете да си направите графичен потребителски интерфейс за уебсайт. Странична навигация, бутони, заглавията, например. Всички Web 2.0 стил.
Стартирайте ново платно; всякакъв размер. Нещо по-голямо от 450x300px би било добре. Изберете Кръгъл правоъгълен инструмент и начертайте правоъгълник толкова голям, колкото е показано на изображението по-горе.
Кликнете два пъти върху слоя на закръгления правоъгълник, за да стартирате Опции за смесване. Променете настройките за следните стилове.
Бъдете сянка
Непрозрачност: 31% Разстояние: 1px Разпространение: 0% Размер: 5px
Откос и релеф
Дълбочина: 100% Размер: 0px Омекотяване: 0px
Gradiant Overlay
Щракнете два пъти върху Gradiant и задайте следните точки на спиране. Местоположение: 0%, # 1378cd Местоположение: 100% # 4da5f0
Удар
Размер: 5px Позиция: Вътрешен цвят: # 54abf6
Нека вмъкнем текст, подзаглавие, URL адрес или нещо подобно. Имайте го в средата и подравнете надясно, така че логото може да се намира от лявата страна по-късно. Нека стилизираме текста. Използвам Lucida Sans Unicode; 55pt; изглаждане; -120 за проследяване на символи (разстояние между буквите). Кликнете два пъти върху слоя текст и задайте следното Опции за смесване.
Градиентно наслагване
Щракнете два пъти върху Gradiant и задайте следните точки на спиране. Местоположение: 0%, # 9ec7eb Местоположение: 100% ecf6ff
След това ще трябва да поставите логото в лявата част на текста. Ще използвам заоблен правоъгълен с радиус 5px, за да представя логото. Ето Възможност за смесване настройки за заоблен правоъгълник.
Вътрешна сянка
Непрозрачност: 45% Разстояние: 0px Размер: 43px;
Откос и релеф
Дълбочина: 100% Размер: 0px Омекотяване: 0px Непрозрачност на режима на осветяване: 50% непрозрачност на ShadowMode: 100%
Gradiant Overlay
Щракнете два пъти върху Gradiant и задайте следните точки на спиране. Местоположение: 0% # 0e2f4a Местоположение: 47% # 001a31 Местоположение: 48% # 002545 Местоположение: 100% # 0f4b7f
Удар
Размер: 5px Щракнете два пъти върху Gradiant и задайте следните точки на спиране. Местоположение: 0% # 1468af Местоположение: 100% # 50abf8
Нека да дадем малко гланцово действие. държа CTRL и щракнете с левия бутон върху заобления правоъгълник Миниатюра на слоя. Когато е избран целия закръглен правоъгълен, променен на Правоъгълен инструмент за надстройка, държа ALT и извлича втората половина на избраната област; точно като изображението по-горе.
Създайте нов слой; Плъзнете го нагоре, така че да седи над всички слоеве; попълнете избраната част с бяло [#ffffff]; промяна на непрозрачността до 15%.
Урокът ще свърши тук. Как ще се възползвате от този дизайн зависи изцяло от вас. Чрез леко променяне на размера и цветовете, може да се използва като уеб заглавие или бутони. Ето един пример.
Заглавна страница на уебсайта
Бутони за уебсайтове
