Ещё больше уроков в нашей группе Вконтакте!





сортировать посты по: Рейтингу | Посещаемости | Комментируемые

Введите свои исправления:


Имя:
Комментарий:

Подсказка

Если Вы нашли неточность в переводе, ошибку или считаете, что содержание данного шага не совсем точное – используйте функцию «Изменить», чтобы внести свои изменения.

*Ваши изменения будут отправлены администрации на модерирование.
*Поля "Имя" и "Комментарий" не обязательны.

В конечном итоге у нас получится такая страничка для видео:


Веб-страница видео блога


1. Создайте новый документ размером 788×1000 px и разрешением 72 dpi. При помощи инструмента Прямоугольник (Rectangle Tool) создайте основной слой для страницы сайта. Цвет слоя - EFF2F5.



Веб-страница видео блога


2. Примените для слоя стиль Внутреннее свечение (Layer Style - Inner Glow):



Веб-страница видео блога


Обводка:



Веб-страница видео блога


Веб-страница видео блога


3. Выберите инструмент Прямоугольник с закругленными краями (Rounded Rectangle Tool) (радиус - 5 рх) и нарисуйте кнопку меню на заголовке сайта:



Веб-страница видео блога


4. Примените для кнопки стиль Внутреннее свечение (Layer Style - Inner Glow):



Веб-страница видео блога


Наложение градиента:



Веб-страница видео блога


Настройки градиента:



Веб-страница видео блога


Обводка:



Веб-страница видео блога


Веб-страница видео блога


5. Сделайте 5 копий слоя, содержащего кнопку, и расположите их справа налево. В режиме Свободного трансформирования (Free Transform) растяните пятую копию.



Веб-страница видео блога


6. При помощи инструмента Прямоугольник (Rectangle Tool) создайте окно поиска белого цвета из растянутой кнопки:



Веб-страница видео блога


7. Примените для окна стиль Обводка (Layer Style - Stroke).



Веб-страница видео блога


Веб-страница видео блога


8. Теперь создайте кнопку запуска поискового процесса возле окна поиска. Выберите для этой операции инструмент Прямоугольник с закругленными краями (Rounded Rectangle Tool) радиусом 3 рх.



Веб-страница видео блога


9. Примените для кнопки стиль Наложение градиента (Layer Style - Gradient Overlay).



Веб-страница видео блога


Настройки градиента:



Веб-страница видео блога


Обводка:



Веб-страница видео блога


Веб-страница видео блога


10. Вставьте названия кнопок на заголовке сайта и надпись для поиска и кнопок меню. Настройки указаны ниже:



Веб-страница видео блога


Веб-страница видео блога


11. При помощи инструмента Прямоугольник с закругленными краями (Rounded Rectangle Tool) (радиус - 5 рх) создайте баннер:



Веб-страница видео блога


12. Примените для баннера стиль Внутреннее свечение (Layer Style - Inner Glow).



Веб-страница видео блога


Наложение градиента:



Веб-страница видео блога


Настройки градиента:



Веб-страница видео блога


Веб-страница видео блога


13. Скопируйте слой баннера, заменяя цвет копии на белый и отменяя настройки стилей слоя. Выберите инструмент Добавить точку привязки (Add Anchior Point Tool) и измените форму элемента. Также используйте инструмент Преобразовать точку привязки (Convert Point Tool) для внесения коррекций в форму свечения, как на рисунке ниже:



Веб-страница видео блога


14. Установите Заливку (Fill) слоя - 20% и Режим наложения – Наложение
(Blending Mode – Overlay).



Веб-страница видео блога


15. Вставьте текст на созданный баннер. Настройки для “video blog”:



Веб-страница видео блога


Для “latest video on the web”:



Веб-страница видео блога


Веб-страница видео блога


16. Напишите название раздела сайта. Настройки для главного текста:



Веб-страница видео блога


Для текста ссылок:



Веб-страница видео блога


Для даты:



Веб-страница видео блога


Веб-страница видео блога


17. Используя инструмент Прямоугольник (Rectangle Tool), вставьте в показанный раздел специальную панель для проигрывания видео. Цвет панели - белый.



Веб-страница видео блога


18. Примените для панели стиль Обводка (Layer Style - Stroke).



Веб-страница видео блога


Веб-страница видео блога


19. Изобразите на созданной панеле проигрывателя рисунок видео файла.



Веб-страница видео блога


20. Инструмент Прямоугольник с закругленными краями (Rounded Rectangle Tool) (радиусом 5 рх) поможет добавить указательную линию проигрывания под рисунокм видео файла.



Веб-страница видео блога


21. Примените для линии стиль Наложение градиента (Layer Style - Gradient Overlay).



Веб-страница видео блога


Настройки градиента:



Веб-страница видео блога


Веб-страница видео блога


22. Используя тот же инструмент Прямоугольник с закругленными краями
(Rounded Rectangle Tool) (радиусом 5 рх), создайте указатель проигрывания цветом #1EA1FF. Удерживая Alt, инструментом Прямоугольник (Rectangle Tool) удалите указатель с левой стороны.



Веб-страница видео блога


Веб-страница видео блога


23. На правой и левой сторонах указателя вставьте продолжительность трека. Настройки указаны ниже:



Веб-страница видео блога


Веб-страница видео блога


24. При помощи инструмента Эллипс (Ellipse Tool) создайте специальную кнопку, предназначенную для запуска видео-проигрывателя. На этом этапе используйте цвет - #575757.



Веб-страница видео блога


25. Примените для кнопки стиль Отбрасывание тени (Layer Style - Drop Shadow).



Веб-страница видео блога


Веб-страница видео блога


26. Скопируйте слой кнопки и в режиме Свободного трансформирования (Free Transform) расположите копию, как показано ниже:



Веб-страница видео блога


27. Сделайте ещё одну копию кнопки, заменяя цвет копии на #A6A6A6.



Веб-страница видео блога


28. Создайте новый слой (Create New Layer) и выберите инструмент Карандаш (Pencil Tool) (кисть - 2 рх) белого цвета и нарисуйте символы на кнопках проигрывателя.



Веб-страница видео блога


29. Используя тот же инструмент, нарисуйте указатель почты цветом #8D8D8D.



Веб-страница видео блога


30. Вставьте надписи на панель проигрывателя, соблюдая настройки ниже:



Веб-страница видео блога


Веб-страница видео блога


31. При помощи инструмента Карандаш (Pencil Tool) (кисть - 1 рх) создайте указатель воспроизведения и меню цветом #777777.



Веб-страница видео блога


32. Выберите инструмент Линия (Line Tool) и нарисуйте несколько вертикальных разделительных линий на меню видео-проигрывателя. Цвет линий - #BDBDBD.



Веб-страница видео блога


33. Используя тот же инструмент, нарисуйте разделительную линию цветом #C5C7C8 на левой стороне видео-проигрывателя.



Веб-страница видео блога


34. Теперь перейдите к работе с боковым меню на левой стороне проигрывателя. Настройки для “Categories”:



Веб-страница видео блога


Веб-страница видео блога


Веб-страница видео блога


35. При помощи инструмента Произвольная фигура (Custom Shape Tool) создайте маленькую звезду возле пункта бокового меню.



Веб-страница видео блога


Веб-страница видео блога


36. Примените для звезды стиль Отбрасывание тени (Layer Style - Drop Shadow).



Веб-страница видео блога


Наложение градиента:



Веб-страница видео блога


Настройки градиента:



Веб-страница видео блога


Обводка:



Веб-страница видео блога


Веб-страница видео блога


37. Сделайте 9 копий слоя звезды и инструментом Свободное трансформирование
(Free Transform) разместите копии, как на рисунке ниже:



Веб-страница видео блога


Веб-страница видео блога


38. Выберите ранее используемые инструменты (Произвольная фигура (Custom Shape Tool) и Прямоугольник (Rectangle Tool)) и создайте несколько маленьких звёзд и 2 прямоугольника. Цвет элементов - #1EA1FF.



Веб-страница видео блога


39. Вставьте их названия между созданными элементами. Настройки указаны ниже:



Веб-страница видео блога


Веб-страница видео блога


40. Теперь объедините в группу все слои, содержащие элементы под панелью проигрывателя и надписи. Создайте новый документ размером 2×1 px и разрешением 72 dpi. Выберите инструмент Карандаш (Pencil Tool) (кисть - 1рх) и нарисуйте узор цветом #858585, как на рисунке ниже:



Веб-страница видео блога


41. Перейдите в меню Редактировать>Определить узор (Edit>Define Pattern) и сохраните узор. Инструментом Линия (Line Tool) создайте горизонтальную разделительную линию под ранее нарисованными элементами.



Веб-страница видео блога


42. Установите Заливку (Fill) слоя - 0% и примените для слоя стиль Наложение узора
(Layer Style - Pattern Overlay).



Веб-страница видео блога


Веб-страница видео блога


43. Вставьте надписи видео-файлов, под разделительной линией, соблюдая требования ниже. Настройки для дополнительной информации о файле:



Веб-страница видео блога


Веб-страница видео блога


Настройки для главного текста:



Веб-страница видео блога


Настройки для ссылок:



Веб-страница видео блога


Веб-страница видео блога


44. Скопируйте горизонтальную прерывистую линию под видео-проигрывателем. Объедините все слои (Ctrl+E). Поверните копию на 90 градусов и сотрите ненужные элементы инструментом Ластик (Eraser Tool).



Веб-страница видео блога


45. Вставьте рисунки видео-файлов:



Веб-страница видео блога


46. Сделайте 2 копии группы элементов, расположенных под панелью проигрывателя, и в режиме Свободного трансформирования (Free Transform) расположите копии под рисунками фидео-файлов:



Веб-страница видео блога


47. Теперь добавьте соответствующее количество комментариев пользователей и рейтинг видео-файлов, соблюдая нижеуказанные настройки:



Веб-страница видео блога


Веб-страница видео блога


Веб-страница видео блога






Ссылка на источник урока

Добавление комментария

Ваше Имя

Ваш E-mail

Код:Включите эту картинку для отображения кода безопасности
обновить код

Введите код: