Делаем инновационный дизайн сайта-портфолио с альтернативным UI/UX

дизайн сайта портфолио

От автора: чего вы прежде всего хотите от своего сайта-портфолио? Чтобы он выделялся! Сегодня Пол Дж. Нобл (Paul J Noble) проведет нас по этапам создания своего собственного сайта-портфолио с уникальным дизайном. Он покажет нам подсказки и приемы Adobe Photoshop’а, а также несколько разумных подходов к его выделению из огромного количества подобных сайтов.

Детали учебника

Программа: Adobe Photoshop

Версия: CS4

Примерное время выполнения: 1 час

дизайн сайта портфолио

демо

Создание запоминающегося сайта-портфолио

Думайте о сайте-портфолио как о своем представителе перед лицом потенциальных клиентов. Тщательно сделанный, он должен рассказать людям о том, чем вы занимаетесь, показать ваши лучшие работы и дать им возможность связаться с вами. Это все очевидно – тогда в чем же разница между обычным сайтом-портфолио и на самом деле запоминающимся сайтом?

Разгадка создания эффективного сайта-портфолио – не в больших проектах – она в произведении впечатления на посетителей. Конечно, это могут быть великолепные иллюстрации, если вы графический дизайнер – но для веб-дизайнеров и разработчиков это часто значит необходимость расширения границ UI/UX и кодирования ради того, чтобы показать свои самые сильные стороны.

В этом учебнике Пол Дж. Нобл (Paul J Noble) собирается показать нам на примере собственного сайта, как он применил простые, но отличающиеся новаторством подходы к UI/UX для создания превосходящего ожидания пользователя портфолио, используя интерактивность и легкие световые эффекты.

Давайте примемся за него!

Шаг 1. Холст

Создайте в Photoshop новый документ размером в 1400 x 900px. Окончательный, визуализированный HTML сайт получит в качестве отличительной черты «резиновые» (т.е. масштабируемые) элементы, так что нам следует помнить о том, что окончательная модель будет не фиксированного размера.

холст

Шаг 2. Разметьте основу

Создание устойчивого фона – это легкий способ начать работу. Для этой модели мы будем использовать основной цвет, достаточно темный для подчеркивания изображений переднего плана, и в то же время смещенный чистый черный, который может оказаться в изображениях портфолио. Мы также включим немного размытия для создания «прохладного» темного цвета, который объединится с элементами интерфейса.

Выбрать слой/Select Layer > Новая заливка слоя/New Fill Layer > Плотный цвет/Solid Color и назначьте цвет #252a3b.

основа

Шаг 3. Разметка направляющих

Так как мы пользуемся масштабируемой разметкой, то нужно определить минимальную ширину по горизонтали. Для большинства коммерческих сайтов это примерно 1000 px, чтобы приспособиться к пользователям с дисплеями разрешением 1024×768. Однако для этого сайта мы установим как минимальную ширину 1100 px.

Сначала убедитесь, что элементы ваших направляющих установлены на пиксели. Это можно определить, зайдя в Установки/Preferences > Единицы измерения и линейки/Units & Guides.

Разметка направляющих

Затем зайдите в Вид/View > Новая направляющая/New Guide. Так как мы собираемся расположить контент в центре и сделать минимальной общую ширину в 1100 px, то следует разместить вертикальный направляющие на 150px и 1250px.

Разметка направляющих

Шаг 4. Создайте текстурный узор

Тонкие диагональные линии помогут сделать дизайн модели тоньше путем создания разделения между элементами портфолио переднего плана и текстурным фоном.

Чтобы добиться этого, мы применим слой с заливкой Узор/Pattern. Однако сначала нужно создать узор.

Создайте новый документ 12×12 px с прозрачным фоном и добавьте новый фон с черной заливкой (#000000).

текстурный узор

Теперь добавьте новый слой (Слой/Layer > Новый/New > Слой/Layer). При помощи инструмента карандаш с размером кисти 1px начертите три линии в точности так, как они выглядят на изображении внизу.

текстурный узор

Выключите заливку и установите непрозрачность слоя с линиями на 6%. Чтобы сохранить его в качестве узора выберите Правка/Edit > Определить узор/Define Pattern.

Вернувшись к исходному холсту, создайте новый слой с узором, выбрав Слой/Layer > Новый слой-заливка/New Fill Layer > Узор/Pattern и выберите ранее определенный узор.

текстурный узор

текстурный узор

Шаг 5. Навигация

Теперь, когда создана основа, можно сделать несколько плоских слоев, заключающих главные элементы сайта.

Сначала навигация. Так как этот сайт создается без вертикальной прокрутки, мы можем разместить навигацию, выровняв ее по низу экрана.

Создайте новую Группу/Group в панели слоев и назовите ее ‘Navigation’ (навигация).

Затем создайте новый слой, применив инструмент Прямоугольник/Rectangle Tool (U). Открыв окно информации (Info), начертите эту фигуру размером 1400×61 (общая ширина окна документа и 61 px в высоту). Выровняйте этот слой внизу окна документа.

Навигация

Теперь примените градиент, щелкнув правой кнопкой мыши на слой фигуры в панели слоев (Layers) и выбрав Параметры наложения/Blending Options, а затем отметьте галочкой Наложение градиента/Gradient Overlay (в качестве альтернативного варианта выберите Слой/Layer > Стиль слоя/Layer Style > Наложение градиента/Gradient Overlay).

Навигация

В Редакторе градиентов/Gradient Editor щелкните селектор цвета низа, чтобы открыть Выбор цвета/Color Picker. Для цвета левого края (низ фигуры) используйте #2f313a. Для цвета правого края (верх фигуры) используйте #3c3f49.

Далее создайте новый слой и назовите его ‘highlight’ (выделение). С помощью инструмента Карандаш/Pencil с кистью 1px и цветом #ffffff начертите линию через верх предварительно созданного прямоугольника, придерживая shift. Затем установите непрозрачность этого слоя на 6%.

Навигация

Шаг 6. Логотип

Создайте новый текстовый слой в 20 px от левой стороны документа и выровняйте текст вертикально по центру прямоугольного слоя с навигацией.

В этом примера применен шрифт DIN Light 14px со свободным трекингом (межбуквенным расстоянием) в 200. Для создания сдвига между двумя частями логотипа используются два шрифта. Для первой части — #dddddd, а для второй, более темной части — #737375.

логотип

Далее добавьте легкую тень для создания внешнего вида текста, вставленного в фон. Выберите Слой/Layer > Стиль слоя/Layer Style Отмените выбор ‘Use Global Light’(использовать глобальное освещение), измените направление на -45 градусов, установите размер на 0px, расстояние 1px и непрозрачность 30%.

логотип

Шаг 7. Кнопки навигации

Для кнопок основной навигации мы используем форму прямоугольника с закругленными углами.

Создайте новую группу с названием ‘buttons’ (кнопки).

Создайте новую фигуру Закругленный прямоугольник/Rounded Rectangle 279×31, сдвиньте на 20 px от правой стороны окна документа и выровняйте по вертикали в прямоугольнике с навигацией.

Кнопки навигации

Щелкните правой кнопкой мыши по слою в панели слоев и выберите Параметры наложения/Blending Options. Отметьте галочкой Наложение градиента/Gradient Overlay и примените значения от #292c33 до #43464f. Щелкните OK, а затем отметьте Тиснение/Bevel & Emboss.

Для Тиснения/Bevel & Emboss установите размер на 0px с направлением в 122 градуса. Затем установите непрозрачность Подсветки/Highlight и Тени/Shadow на 10% для создания стойкого легкого эффекта подсветки.

Кнопки навигации

Добавьте текстовые данные с помощью тех же самых установок шрифта, которые применялись для логотипа. Так как тексты кнопок находятся в меньшем вертикальном пространстве, нам нужно уменьшить размер до 12 px и сжать трекинг до 100. Примените те же цвета, что и для логотипа, однако для названия активной страницы возьмите более яркий цвет.

Кнопки навигации

Для выделения кнопок при мягко подсвеченном внешнем виде навигации нам нужно начертить две линии, каждая шириной в 1px. Первая должна быть черной (#000000), а вторая белой (#FFFFFF). Установите непрозрачность белого слоя на 6%, а черного – на 12%. Продублируйте эти слои, нажав Shift и щелкнув на каждый, затем щелкните правой кнопкой на выбранный слой. Расположите продублированные слои в навигации с равными интервалами.

Кнопки навигации

Кнопки навигации

Кнопки навигации

Кнопки навигации

Кнопки навигации

Шаг 8. Кнопки социальных сетей

Функция этих кнопок отличается от остальной навигации, так что мы применим подразумевающий это стиль. Давайте установим их в дополнение к основной навигации.

Сначала создайте новую группу с названием ‘social’ (социальные) и поместите ее в родительскую группу ‘navigation’ (навигация).

Теперь при помощи инструмента Закругленный прямоугольник/Rounded Rectangle с радиусом 4 px, придерживая клавишу shift, создайте квадратную фигуру 25×25 px. Разместите ее по вертикали в центре навигации и в 22 px слева от кнопок основной навигации.

Кнопки социальных сетей

Щелкните правой кнопкой мыши на только что созданную фигуру и выберите Параметры наложения/Blending Options.

Добавьте тень. Для нее мы применим белый цвет (#FFFFFF) и установим режим смешивания на Замена светлым/Lighten. Установите расстояние на 1px, разброс на 0% и размер на 0px. Таким образом вы создадите эффект подсветки нижнего края и отсюда эффект вставленной кнопки.

Кнопки социальных сетей

Далее в том же окне Стиль слоя/Layer Style отметьте внутреннюю тень. Примените черный цвет (#000000) с непрозрачностью в 39%, расстоянием 1px и размером 4px.

Кнопки социальных сетей

Наконец, выберите Наложение цвета/Color Overlay и используйте #353741. Так вы разгладите внешний вид фигуры и добавите контрастности с фоном.

Кнопки социальных сетей

Для иконок социальных сетей мы возьмем существующее изображение и начертим границы, применив инструмент Перо для создания контура (убедитесь, что в меню опций (Options) выбраны Контуры/Paths).

Кнопки социальных сетей

После создания контура иконки примените инструмент Выбор контура/Path Selection и щелкните правой кнопкой мыши на только что созданный контур (убедитесь, что контур выбран из панели Контуров/Paths). Выберите Определить произвольную фигуру/Define Custom Shape… Сохранить фигуру/Save the Shape.

Кнопки социальных сетей

Кнопки социальных сетей

Теперь мы можем использовать иконку как масштабируемый векторный объект. С помощью инструмента Перо/Pen измените Опции/Options слоев фигуры (верхний левый пункт в колонке опций) и выберите инструмент Произвольная фигура/Custom Shape, затем выберите только что созданную иконку. Придерживая клавишу Shift, перетащите объект так, чтобы он поместился в фрагмент изображения иконки.

Установите непрозрачность иконки на 20%.

Кнопки социальных сетей

Повторите эти шаги для всех остальных иконок социальных сетей.

Кнопки социальных сетей

Шаг 9. Еще направляющие

В этом примере мы собираемся показать изображения из портфолио размером 640×480 px.

Так как нам хотелось бы выровнять демонстрируемое изображение по вертикали в области над навигацией, то нужно добавить еще несколько направляющих. Выберите Вид/View > Новая направляющая/New Guide и Добавить/Add горизонтальные направляющие на 180px и 660px. Так мы расположим показываемые изображения посередине пространства над навигацией по вертикали.

Нам также нужно немного текста слева от демонстрируемого изображения, так что добавляем вертикальные направляющие на 400px и 350px для обеспечения поля для текста и места для навигации к следующему изображению. Наконец, добавьте вертикальные направляющие на 1040px и 1070px для установления края просматриваемого изображения и поля между смежными изображениями.

направляющие

Шаг 10. Создайте «заполнители» изображений

Создайте новую группу с названием ‘Projects’ (проекты). Затем при помощи инструмента Прямоугольник/Rectangle начертите прямоугольник 640x480px, который выравнивается вверху в 400px слева от вертикальной направляющей и вверху в 180px от горизонтальной направляющей. Он послужит в качестве «заполнителя» для нашего основного изображения.

Щелкните на только что созданный слой правой кнопкой мыши и выберите Растеризовать слой/Rasterize Layer.

направляющие

Теперь, придерживая кнопку Alt, щелкните и перетащите слой для создания дубликата. Сдвиньте его в правую сторону слоя с полем в 30px, чтобы выровнять по направляющей 1070px, и используйте ту же базовую линию.

Создайте еще два дубликата и выровняйте их по низу каждого с полем между ними в 30px.

направляющие

Затем, применив инструмент Ведро/Paint Bucket, залейте каждую из этих форм цветом #252a3a.

Шаг 11. Виньетка

Создайте новую группу с названием ‘Vignette’ (виньетка) под группой ‘Navigation’ (навигация) и выше группы ‘Projects’ (проекты).

Создайте новый слой и примените инструмент Ведро/Paint Bucket для заливки слоя при помощи цвета переднего плана #0f1219.

С помощью инструмента Эллипс/Ellipse нарисуйте абрис, пересекающий по углам направляющие основного изображения.

Виньетка

Теперь для создания эффекта виньетки нам понадобится обрезать эту область при одновременной растушевке ее края. Чтобы этого добиться, мы используем Выбрать/Select > Модификация/Modify > Растушевка/Feather. Растушуйте выборку на 60px, а затем обрежьте выбор слоя (Ctrl-x / Command-x).

Виньетка

Виньетка

Шаг 12. Создайте маски проекта

Так как нужно выставлять работу в наиболее выгодном свете, нам понадобится разместить в «заполнителях» несколько скриншотов. Вернитесь к группе ‘Projects’ (проекты) и вставьте скриншот, выбрав при этом основной «заполнитель». Так вы вставите слой поверх него. Затем щелкните правой кнопкой по слою и выберите Создать обтравочную маску/Create Clipping Mask.

маска

Вставьте еще три скриншота в другие «заполнители».

маска

Уменьшите непрозрачность всех скриншотов, кроме расположенного по центру, до 20%.

Шаг 12 Вставка текста

Для аннотации каждого проекта мы используем три текстовых слоя. Создайте для их размещения новую группу поверх группы ‘vignette’ (виньетка).

Для первого слоя, заголовка, мы применим светлый шрифт. В этом примере я использовал DIN Light, однако другой похожий вид шрифта тоже может подойти. С помощь инструмента Текст/Text перетащите текстовый блок в направляющие влево от основного изображения и на 40px ниже верхней направляющей. Установите цвет на #FFFFFF, трекинг на -25 для более плотного межбуквенного интервала и используйте размер шрифта 28px.

вставка текста

Мы, кроме того, добавим строку категории проекта и даты. Установите размер на 14px, трекинг на 100, нажмите caps и примените цвет #338966 для того, чтобы подчеркнуть эту строку.

вставка текста

Далее в тексте основы мы будем использовать системный шрифт, такой как Lucida Grande или Lucida Sans Unicode 12px с цветом #8C8F95 и высоту строки 18px.

вставка текста

Шаг 14. Добавьте управление мышкой

Для навигации своего сайта-портфолио мы сделаем управление мышью или с клавиатуры. Интуитивное размещение направленных кнопок навигации производится согласно их функции. Например, кнопка со стрелкой вправо будет справа от основного изображения.

Для кнопок мы применим полупрозрачные формы, меняющие непрозрачность при проведении над ними мышью или событии щелчка. Создайте новую группу с названием ‘Buttons’ (кнопки) над группой ‘Vignette’ (виньетка).

Затем создайте новый документ с разрешением 37x37px. С помощью инструмента перо начертите форму шеврона, как внизу. Повторяя процесс Шага 8, при помощи инструмента Выбор контура/Path Selection щелкните правой кнопкой мыши по форме и выберите Определить произвольную форму/Define Custom Shape. Сохраните фигуру.

управление мышкой

Перейдя к основному холсту, используйте инструмент Произвольная фигура/Custom Shape, чтобы вставить предварительно созданную фигуру.

управление мышкой

Затем выберите Правка/Edit > Трансформирование/Transform > Отразить по горизонтали/Flip horizontal. Так вы развернете стрелку вправо. Скопируйте эту фигуру и используйте Правка/Edit > Трансформирование/Transform > Поворот на 90 градусов по часовой стрелке/Rotate 90 degrees Clockwise для создания фигуры, указывающей вниз.

управление мышкой

Разместите все эти фигуры в центре их соответствующего направления. Предусмотрите поле в 15px, чтобы кнопки могли частично перекрывать смежные изображения и снизьте непрозрачность до 12%.

управление мышкой

Шаг 15. Карта ориентирования

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

Создайте новую группу с названием ‘Orientation’ (ориентирование) и разместите ее над группой ‘Vignette’ (виньетка).

При помощи инструмента Карандаш/Pencil выберите Квадратную кисть/Square brush, установленную из меню fly-out. Затем при помощи цвета #FFFFFF и толщины в 5px начертите линию высотой 60px, выровненную по направляющей дальнего левого края.

Карта ориентирования

Карта ориентирования

Скопируйте этот слой и разместите его в 2px справа. Повторите то же самое и создайте до 12 линий.

Карта ориентирования

Установите непрозрачность всех слоев на 12%. Это легко сделать, установив непрозрачность для первого слоя, затем щелкнуть правой кнопкой мыши и выбрать Скопировать стиль слоя/Copy Layer Style. Затем выбрать все оставшиеся слои и Вставить стиль слоя/Paste Layer Style.

Карта ориентирования

Расположите эти слои в шахматном порядке с помощью команды Правка/Edit > Свободное трансформирование/Free Transform для уменьшения/увеличения каждой линии.

Карта ориентирования

Наконец, создайте новый слой и снова примените карандаш, чтобы нарисовать на первой линии маркер. Это – индикатор местоположения.

Карта ориентирования

Шаг 16. Управление с клавиатуры

Часто управление с клавиатуры предлагает интуитивное использование навигации. Однако мы должны дать пользователю понять, что с клавиатуры тоже можно управлять. Для выполнения этой задачи создадим иконки со стрелками клавиатуры.

Создайте новую группу с названием ‘Keyboard’ (клавиатура) и разместите ее над группой ‘Vignette’ (виньетка).

С помощью инструмента Прямоугольная фигура/Rectangle Shape начертите квадрат (придерживая Shift) 20x20px с цветом #262a34. Щелкните правой кнопкой мыши на панель слоев/Layers и выберите Параметры наложения/Blending Options. Найдите Обводку/Stroke и примените снаружи обводку в 1px цветом #32343f.

правление с клавиатуры

Затем при помощи инструмента перо (убедитесь, что в панели опций стиль установлен По умолчанию/Default) цветом #fff нарисуйте стрелку со слегка квадратным острием. Отрегулируйте так, как вам нужно с помощью инструмента Прямой выбор/Direct Selection. Установите непрозрачность на 20%.

правление с клавиатуры

В панели слоев, придерживая shift, выберите два только созданных слоя. Щелкните правой кнопкой мыши и выберите Дублировать слои/Duplicate layers. Затем с помощью опции меню Правка/Edit > Трансформирование/Transform вращайте дублированные слои до их правильного расположения. Повторите тот же шаг для создания всех четырех иконок.

правление с клавиатуры

Заключение

Отлично! Сейчас мы закончили раздел моделирования своего проекта… значит, все, что осталось сделать – это закодировать его при помощи основного HTML/CSS, jQuery Hotkeys и нескольких дополнительных приемов jQuery. Если кто-то хочет увидеть, как Пол кодировал свою модель, дайте об этом знать в комментариях, чтобы мы смогли все организовать!

Автор: Paul J Noble

Источник: http://webdesign.tutsplus.com/

Редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.

Хотите научиться создавать шикарные дизайны сайтов?

Получите бесплатную пошаговую обучающую систему по веб-дизайну

Получить

Метки: ,

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (62)

  1. Александр

    «Если кто-то хочет увидеть, как Пол кодировал свою модель, дайте об этом знать в комментариях, чтобы мы смогли все организовать!»

    — Конечно хотим увидеть как кодировать! Самое вкусное, так сказать))

  2. Андрей

    Классный урок, очень хочется увидеть продолжения!

  3. Артем

    Хочу увидеть, как Пол кодировал свою модель, даю Вам знать, так сказать:)

  4. Денис

    Да я очень хочу посмотреть этапы кодинга данного сайта

  5. Евгений

    огромное спасибо авторам за ВАШ труд и конечно же хочется увидеть кодировку.А так же если это возможно покажите как организуется оплата товаров через СМС?

  6. Евгений

    огромное спасибо авторам за ВАШ труд и конечно же хочется увидеть кодировку.А так же если это возможно покажите способ оплаты товаров через СМС

  7. Леонид

    спасибо за урок, обязательно покажите кодировку, жду с нетерпением.

  8. Николай

    Спасибо за урок! Конечно хочу увидеть как кодировать!

  9. александр

    очень хотелось бы продолжения

  10. Юрий Петрович

    Вы наполовину БАРАНЫ или Полные.
    Почему Вы не уважаете Русскоязычные программы
    Либо Вам нравиться издеваться над Русским
    пользователем.Лично Мне противно даже смотреть
    эти уроки,
    а Вы просто не уважаете прежде самого себя, а
    потом и Меня и всех РУССКИХ Пользователей.
    Подумайте, если есть чем.

    • Виктор Рог

      Юрий, если Вам не нравится, то можете не читать наш сайт.
      Но вопрос в другом.
      Это лишь хороший перевод зарубежной статьи. На нашем блоге есть также масса материалов НАШИХ авторов, таких как Андрей Кудлай, к примеру. Или Михаил Беляев. Они очень талантливы.
      Юрий с таким подходом как у Вас надо отменять всем детям английский язык в школе, только по той причине, что он английский.

      ПОЭТОМУ, Я не вижу ничего плохого в том, чтобы давать переводы качественных переводов с зарубежных блогов.
      Юрий, или Вы просто ТРОЛЬ??? Может я зря тут распинаюсь?

      • Юрий

        Виктор, здравствуйте. Не обижайтесь на ЮП, у нас их очень много, кроме критиканства ни на что больше не способны. А статья отличная, на пять с плюсом. Я сам сейчас перевожу книгу одного интернет-предпринимателя и знаю, что это не пару кнопок надавить.Нужно ещё и хорошее знание родного языка, чтобы правильно подобрать аналог английскому слову и выражению.Удачи Вам и ждём продолжения.

  11. Андрей

    Андрей Бернацкий,
    Вы же считаете себя веб-разработчиком, верно?
    Я всегда удивлялся людям, которые считают себя программистами, но на практике — копируют код из зарубежа.
    Серьезно..
    Это смешно

    • Andrey Bernacki

      Андрей, во-первых на данном ресурсе публикуются мои авторские статьи, статьи других наших авторов. Плюс к этому на ресурсе публикуются переводы качественных и полезных статей зарубежных авторов.
      Во-вторых, я не побоюсь этого слова, абсолютное большинство разработчиков черпают и усовершенствуют свои знания читая статьи зарубежных авторов, посещая зарубежные ресурсы.
      Мы же их переводим и размещаем на данном ресурсе. А читать их или нет – это уже на ваше усмотрение. Не думаю, что статья воспринималась бы как-то по-другому будь я ее автором.

  12. Валентин

    Урок ,конечно интересный, но не всё понятно,и желательно на этот урок сделать видео,чтобы увидеть все действия и одновременно объяснение голосом этих действий и попутно показать,какие кодировки, вернее как кодировать ,чтобы всё нарисованное работало.

  13. Сергей

    Спасибо, очень интересный и позновательный урок. Все описанно просым и понятным языком. Пишите продолжение.

    • Алексей

      Мне и текстовый понравился. Канал связи у меня не широкий и потому видеоматериалы я не всегда могу смотреть, а текстовые — всегда пожалуйста.

  14. евгений

    Прочитал с «раскрытым ртом» на одном дыхании .
    Очень хочется добавки.Нравится от и до!
    Огромное спасибо.

  15. Игорь

    Понравилось!

  16. Борис

    Большое спасибо….Жду с нетерпением продолжения!!!

  17. Владимир

    ждем продолжения.

  18. Stepan

    Всё здорово,спасибо! И теперь осталось только сверстать этот рисуночек!

  19. Алексей

    Вы проделали огромную работу — за это Вам спасибо. И нарисовали красивый шаблон, готовый к верстке. Мне нравится.

  20. Ренат

    Спасибо, клевая тема! и сайт сам офигенно сделан.
    для тех кто кодит — исходники вроде не скрыты, и закачиваются обычно вместе со страницей на локалку, на жесткий диск.

  21. игрорь

    Уроки все классные,конечно надо продолжения,для фэзеоошника сложновато, да у меня с материала о вертикальном выпадающем меню , не могу сделать сссылкм, с этих подменю, как их сделать,Автор: Михаил Влащенко,
    помогите советом пожалуйста,хочется пока сделать простой одностранияный сайт для партнерки! Спасибо, Игорь

  22. Светлана

    Ждем продолжения. Очень интересно!

  23. Pocherk

    Урок хороший, но лично мне рисование в Фотошопе — не очень интересно. Обучалками по Фотошопу весь Интернет завален. Важнее HTML-верста и кодинг.

    • Юрий

      Почему бы Вам не использовать Artisteer — программу для создания шаблонов под WordPress и ещё несколько других cms, возможность создавать html-страницы с навигацией как в автоматическом режиме, так и вручную настраивать вплоть до мельчайшей детали с сохранением результата в папку или в zip-архив.

      • Pocherk

        Уважаемый, Юрий! Artisteer — это для ленивых и недалеких якобы web-мастеров. Вы выдели код, который генерит Artisteer? Фотошоп я знаю довольно неплохо, поэтому и говорю, что уроки по нему мне не очень интересны. Без знаний HTML, CSS, PHP, MySQL все CMS-ки лажа. Утомили пожожие друг на друга блоги, сделаные на одних и тех же темах.

  24. Светлана

    да,хочу увидеть кодировку

  25. Сергей

    Спасибо за интересный урок.

  26. Владимир

    Мне понравился урок и очень важно посмотреть кодировку.

  27. Мезит С.В.

    интересный сайт. Как кодирвать дальше при помощи основного HTML/CSS- без понятия Хочется узнать подробнее.

  28. Liliya

    Ребята, спасибо вам за все! Я многому у вас научилась, пусть даже и перевод. Это все полезнейшая информация. Вы молодцы!
    И конечно хотим кодировочку!
    А там еще есть один сайтик классный, тоже хочется разобрать по косточкам:http://www.awwwards.com/web-design-awards/tao-community-website

    • Дмитрий

      А что именно по косточкам хочется разобрать? там обычный WP влог с кстати очень простым дизайном) вы просто начинайте присматриваться сами а то все гоняетесь за тем кто бы вам чего по косточкам разжевал, еще видео снял и за вас все сделал))) ничему так не научитесь) чтобы научиться дизайну, кодированию да и вообще всему что угодно достаточно одной более менее нормальной книги по теме и с этой книгой в зубах разбирать самостоятельно, искать… почему тут не работает или тут… (пишу с пазитивом! как негатив не воспринимать, воспринимать как совет!)

  29. Евгений

    Андрей!
    Не надо распинаться перед Юриями и тезками!
    Они, вереотно, забыли про годы учебы и про учебники, по которым учились. Тогда вопросов не возникало, а почему мол я, такой умный, учусь по каким-то учебникам?
    Они просто не понимают — это процесс. Учебный, позновательный, творческий, если хотите!
    Одним словом — не распыляйтесь на пустозвонов!

  30. Денис

    Когда уже будет кодировка ?

  31. Galust

    Спасибо большое, статья очень понравилась ! Жду продолжения. С уважением, Галуст Хачатрян

  32. Юрий

    Да Я поддерживаю Андрея Бернадского.
    Он уважает Тех пользователей кля которых
    создаёт свои уроки.
    Я знаю что Андрей не будет делать
    Такой дешовый перевод,в переводчике с иностранных сайтов.
    Я Вам желаю Делать уроки
    Для Китайцев на Китайском
    Для Украинцев на Украинском
    Для Англичан на Английском
    Ну и так далее……
    Это и есть УВАЖЕНИЕ к ПОЛЬЗОВАТЕЛЯМ
    тех стран для которых Вы создаёте
    свои уроки
    А серость и не воспитаность свою
    НЕ надо ПОКАЗЫВАТЬ.
    Юрий.

  33. Виктор Рог

    Никак не пойму, кто на данном ресурсе показывает свою серость и невоспитанность?

  34. Ольга

    Спасибо огромное, ребят, за ваш труд, за очень интересные, полезные материалы, очень многому у вас научилась. А тем, кому это кажется неинтересным, видимо, не сюда. С нетерпением буду ждать HTML и CSS.

  35. Александр

    Конечно хочу увидить, учиться то надо:)

  36. Егор

    жду урока по вёрстке дизайна!)

  37. Lana

    Благодарность за урок.
    Очень хочется увидеть кодировку.

  38. Юрий

    Большое спасибо за материал. Обязательно воспользуюсь. Вот ещё бы как кодировать добавить. если не сложно, пожалуйста.

  39. Владимир

    Материал полезный. Ждем продолжения.

  40. алексей

    Спасибо за урок!!! Ну очень хочется посмотреть этап кодирования.

  41. Александр

    На данный момент как раз для меня важна кодировка, т.к. я сам художник. Спасибо за ваш любой совет и урок, я люблю учиться всему, чего не знаю сам

    • Дмитрий

      Если вам нужна кодировка то скачайте сайт «пример» и разберите код самостоятельно а если не можете пока но в дальнейшем так же нужны будут кодировки советую самостоятельно изучить по CSS книги т.к. без понимания (не на уровне болтовни и просмотренного а именно на уровне рук своих) того как все устроено вы постоянно будете путаться и искать решение тех или иных задач при том что решение у вас перед носом) и если вы хотите научиться могу посоветовать вам по теме всего одну книгу, не кучу видео курсов и прочего хлама а просто одну книгу которая вас поэтапно научит тому что нужно именно вам) так что если есть желание научиться и не тратить свое время впустую, пишите)

  42. Фаруз

    ДА поскорей бы увидеть продолжение

  43. Андрей

    Здравствуйте!

    Отличный материал, спасибо! Я вот только не понял, как равномерно расставить надписи на кнопках, простым центрированием этого ведь не сделаешь?

  44. Игорь

    Мне все уроки ваши наравятся, но трудно успевать переваривать, ну а как кодировать и загружать на сайт интересно.

  45. Саша

    Хорошие уроки

  46. ЮрийПетрович

    Всем добрый день.
    Да это Я ЮП повторяться не буду,по поводу
    английского языка и описания.
    Я хочу сказать,что дизайн сайта Мне не понравился,этот сайт выглядит как виньетка
    на фото. Все углы темные,значки плохо прсматриваються,шрифт мелкий.На этом сайте долго не задержишся,устанут глаза очень быстро.Такие уроки есть в видео формате,
    с фотошопом с русскоязычным интерфейсом.
    У Меня есть сайт,сделан он в консрукторе
    сайта в компании Jimdo.Да-да про это некоторые скажут,что это для лентяев,но это
    не так.Этот конструктор для таки как Я.
    Я не програмист и ангийским не владею и Мне
    уже 63 года.А модым сайтостроителям Я хочу
    сказать,не теряейте не одной минуты своего драгоценного времени,изучай ВСЁ что не приколочено.Набирайтесь знаний,это очень
    нужная штука.Знания Сила,а в игрушки играют
    только одни лодыри и бездельники которых
    ни чего не интересует.
    А это мой сайт:videopetrovich.com/
    Можете зайти обсудить,Я не обижусь.
    А если дадите совет Я буду только РАД.
    С уважением,Юрий Петрович.

    • Pocherk

      Уважаемый, ЮП!
      Такого отстойного сайта как videopetrovich.com/ я не видел уже очень давно. У меня первое впечатление — не сайт, а свалка всякого хлама… Про дизайн вообще молчу, т.к. его там вообще нет — понадергали каких-то доисторических GIF-анимашек…

  47. Влад

    Не могу найти урока по кодированию подобного сайта, если он есть, не могли бы дать ссылку?

  48. Влад

    Сам нашел!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree