1. Создайте новый документ размером 210 * 260 px. Создайте новый слой и выберите инструмент Rectangular Marquee Tool (M) установите фиксированный размер (fixed size) 200px * 30px и щёлкните мышкой по рабочему полю, чтобы установить выделение. Выберите Select -> Modify -> Smooth и установите radius 3px (убедитесь, что выделение не касается ни одного края рабочего поля)
2. Увеличьте масштаб изображения и выберите инструмент Rectangular Marquee Tool (M) , при этом убедитесь, что не стоит фиксированный размер (fixed size), нажмите и удерживайте клавишу Shift, сделайте выделение квадрата у нижнего угла (чтобы сделать угол под 90 градусов). 
3. Сделайте также со вторым нижнем углом и выберите цвет вашего блока(в моём примере #00c0ff, в примере урока #ff7f00)
4. Теперь нажмите Ctrl+Click по слою с цветом, чтобы сделать выделение. Затем создайте новый слой, выберите Select -> Modify -> Contract установите параметр 1px и нажмите ок. Теперь выберите Edit -> Stroke, с параметрами 1px белая (#ffffff) обводка.
5. Опять увеличьте масштаб, удалите нижнюю полоску при помощи Eraser Tool (E) . Затем выберите инструмент Pencil Tool (B) и дорисуйте две полоски до низа.
6. Поменяйте blend mode этого слоя на Overlay и установите opacity 50%
7. Создайте новый слой, выберите инструмент Rectangular Marquee Tool (M) и сделайте выделение как показано ниже.
8. Залейте выделение белым цветом и поменяйте blend mode этого слоя на Soft Light и установите opacity 35%
9. Повторите шаг 7, но сделайте выделение чуть поменьше как показано на скрине ниже. Поменяйте blend mode этого слоя на Soft Light и установите opacity 25%.
10. Теперь текст, напишите любой текс какой хотите. Я использую шрифт Segoe UI, 18pt Белый.
11. Примените следующий стиль слоя к нашему тексту.
- Stroke:
12. Создайте новый слой, выберите инструмент Rectangular Marquee Tool (M) , установите фиксированный размер (fixed size) 200 * 210px
13. Выберите Edit -> Stroke и примените следующие настройки.
14. Не снимая выделения, создайте новый слой, выберите Select -> Modify -> Contract и установите contract 1px, теперь выберите Edit -> Stroke, со следующими параметрами:
15. Увеличьте масштаб, удалите верхнюю полоску при помощи Eraser Tool (E) . Затем выберите инструмент Pencil Tool (B) и дорисуйте две полоски, чтобы соединить шапку блока и основную часть.
16. Поменяйте blend mode этого слоя на Overlay и установите opacity 50%
17. Теперь давайте сделаем внутреннее содержание, выделите внутреннюю белую часть, используя инструмент Rectangular Marquee Tool (M) .
18. создайте новый слой и залейте его цветом #f9f6ee.
19. Создайте новый слой, нажмите Ctrl+Click на предпоследнем слое (п.18) чтобы сделать выделение. Выберите Select -> Modify -> Contract, установите contract 1px, выберите Edit -> Stroke и установите 1px цвет обводки #9c9c9c.
20. Теперь добавьте некоторый текст, это будут ссылки. Я использую шрифт Verdana 12pt цвет #3888ca
21. Наложите какой-нибудь узор перед ссылками (автор ссылается на источник famfamfam), чтобы блок не казался пустым, вот вообще и всё.
Автор: Kvarcs
Переводчик: http://photoshoplovr.com/website-design/pixel-style-navigation-box/
Исходник: DOWNLOAD
Установка блока на сайт uCoz-а.
Урок от меня, как поставить такого рода блоки на почти всеми любимую систему uCoz.
1. Если у вас несколько слоёв, то объедините их.
2. Выберите инструмент Rectangular Marquee Tool (M) , вырежьте шапку и сохраните её.
3. Повторите п.2 вырежьте середину.
4. Повторите п.3 вырежьте основание блока.
5. Используя файловый менеджер, создайте в нём папку images и закачайте туда 3 картинки.
6. Далее html коде шаблона, в нужное место вставьте код.
Code
<table border="0" cellpadding="0" cellspacing="0" width="200">
<tr><td height="38" style="background:url('/images/1.png')"><b>Название</b></td></tr>
<tr><td style="background:url('/images/2.png')">$SITE_MENU$</td></tr>
<tr><td><img src="/images/3.png" border="0"></td></tr>
</table>
Где,
width="200" - ширина блока
height="38" - высота шапки блока
/images/1.png - 1-я картинка
/images/2.png- 2-я картинка
/images/3.png - 3-я картинка
Название - любое название блока (если нарисовали название в фотошопе, то просто оставьте пустое место)
$SITE_MENU$ - это оператор Меню, вместо этого оператора можно написать что угодно. 
Вот и всё.
Автор: kVARCS
:ok:
