Интернетте веб 2.0 дизайнын тиімді пайдалануды үйрететін көптеген оқулықтар мен нұсқаулықтар бар. Бұл оқулықтардың көпшілігі пайдалы болғанымен, сонымен бірге олар веб-дизайндағы түпнұсқалықты жояды. Мысалы, көптеген «нұсқаулар» сізге веб 2.0 жылтыр белгі, жолақтар фоны және қалың қаріптерге ие болу туралы екенін айтады. Нәтиже? Белгілері, жолақтары және қалың үлкен әріптері бар сансыз жүздеген дизайн бар ... және олардың бір-бірінен еш айырмашылығы жоқ. Web 2.0, web 1.0 немесе web 75.0 дизайнын жасау маңызды емес, бәрі түпнұсқа және есте қаларлық.

Дегенмен, сіздің дизайныңызды бейнелейтін ерекше түпнұсқа ештеңе таба алмасаңыз, веб-дизайндың қазіргі трендтеріне жүгіну «қауіпсіз». Міне, веб-дизайн макетінің өте шағын фрагменті және кәдімгі орналасуды веб 2.0 орналасуына қалай айналдыру керек.

Бұл бізде болды ...

14.png

Және бұл біз жасайтын нәрсе ...

13.png

Біз Photoshop бағдарламасында қабат мәнерлерінен басқа ешнәрсе қолданбаймыз; жұмсақ градиенттер мен көлеңкелерге назар аудару.

Бұрыштары дөңгеленген тікбұрышты пішінді пайдаланып,… тіктөртбұрыш салу арқылы бастаңыз.

1.jpg

баннер

Ең алдымен, тіктөртбұрышқа тереңдік пен өмір беру керек. Web 2.0 дизайн принциптеріне сүйене отырып, бізге бұл әсерді тек көлеңкелер, контурлар және жарық градиенттері ғана береді. Сондықтан қабат стильдеріне өтіп, сәл жұмсақ көлеңке түсіріңіз. пайдаландық #96aed6 Осы мақсат үшін.

2.png

Пішінге аздап тереңдік беру үшін (жалпақ нысанға ұқсамауы үшін) қараңғы реңкпен жұмсақ ішкі көлеңке қосыңыз (біз қолдандық. #304f82 )

3.png

Соңында, кішкене контурды қосу маңызды. Біз #FFFFFF ақ түсін қолданамыз, өйткені екі жақтағы көлеңкелеріміз қараңғырақ болғандықтан, пішінді контурлайтын ашық және жартылай көрінетін сызық алғымыз келеді.

4.png