С помощью наших фото и видеоуроков по фотошопу вы станите уверенным пользователем программы Adobe Photoshop, научитесь делать различные эффекты в фотошопе. Так же на сайте вы найдете дополнения для фотошопа.
» » » Создание макета сайта для приложений под iPhone

Создание макета сайта для приложений под iPhone

Этот урок поможет вам создать макет сайта для продвижения iPhone/iPad-приложений. 
Я использовал для этого урока векторный пейзаж из запасов grafpedia.com, а также некоторые иконки, которые нашел на этой сайте  и некоторые иллюстрации с тематического  сайта http://culturedcode.com/things/iphone/. 

 

 Прежде чем приступить к этому уроку, посмотрите на конечный результат ниже.

 

 

Создание макета сайта для приложений под iPhone

 

 

Шаг 1: Создаём холст

 

Открываем Photoshop, а затем перейдите в меню Файл> Новый и введите следующие значения: Ширина 1 000 пикселей, Высота 1 200 пикселей.

 

 

Создание макета сайта для приложений под iPhone

 

 

Нажмите кнопку ОК. Ваш новый холст появится на экране. Откройте палитру слоев (чтобы её открыть, перейдите в меню  Окно> Слои (Window> Layers)).


 

 

Создание макета сайта для приложений под iPhone

 

 

Создайте новый слой и назовите его «фон шапки». Установите цвет переднего плана на синий # 3288c3. Используйте инструмент Прямоугольная область (Rectangular Marquee Toll (M)), чтобы создать выделение размером 1000x450 пикселей, затем с помощью инструмента Заливка (Paint Bucket Tool (G з)) залейте выделение выбранным цветом.

 

 

Создание макета сайта для приложений под iPhone

 

 

Теперь добавьтеградиент на синий блок. Чтобы это сделать, перейдите в меню Слои> Стиль слоя> Наложение градиента (Layer> Layer Style> Gradient Overlay).

 

 

Создание макета сайта для приложений под iPhone

 

 

Шаг 2: Создаем первое меню

 

Меню, включая логотип и набор ссылок, будет находиться в верхней части шаблона. Тень будет добавлена ​​под ним. Для создания тени, создайте один новый слой и назовите его «тень».Установите основной цвет на черный, а затем выберите инструмент Градиент (Gradient Overlay (G)), на панели управления выбранным инструментом сделайте градиент от чёрного цвета к прозрачному и выберите Радиальный градиент. Теперь наложите градиент на ваше изображение сверху вниз (см. рисунок ниже).

 

 


Создание макета сайта для приложений под iPhone

 

 

Чтобы закончить его, добавить Слой-маску на слой «тень» с левой и правой сторон. Зайдите в меню Слои> Слой-маска> Показать всё (Layer> Layer Mask> Reveal All). Создайте Градиент (Gradient Overlay) справа и слева.

 

 

Создание макета сайта для приложений под iPhone

 

 

Создайте новый слой и назовите его «фон». Выберите инструмент Прямоугольная область (Marquee Tool (M)), чтобы создать выделение фиксированного размера 1000 х 40 пикселей. Заполните это выделение белым цветом и уменьшите Непрозрачность до 40%.

 

 

Создание макета сайта для приложений под iPhone

 

 

Добавьте Слой-маску к этому слою  и сделайте тень в верхней части меню.

 

 

Создание макета сайта для приложений под iPhone

 

 

Что касается логотипа, введите имя вашего сайта (я использовал шрифт Androgyne). Затем добавьте к этому тексту три стиля слоя: тень, внутренняя тень, наложение градиента.

 

 

Создание макета сайта для приложений под iPhone

 

 

 

Создание макета сайта для приложений под iPhone

 

 

 

Создание макета сайта для приложений под iPhone

 

 

 

Создание макета сайта для приложений под iPhone

 

 

Чтобы закончить меню добавьте блок ссылок справа (шрифт: Helvetica). Для активной ссылки я использовал прямоугольник с закругленными углами с синим цветом # 3d85c1.

 

 

Создание макета сайта для приложений под iPhone

 

 

См. ниже конечный результат меню.

 

 

Создание макета сайта для приложений под iPhone

 

 

Шаг 3: Создаём заголовок

 

Создайте сначала новую группу и назовите ее «заголовок». С помощью Инструмента Горизонтальный текст (Text Tool (T)) добавьте название сайта. В моем примере я использовал шрифт Androgyne.

 

 

Создание макета сайта для приложений под iPhone

 

 

Чтобы придать стиль тексту, уменьшите Непрозрачность второго слоя до 60%. Для названия добавьте те же стили слоя, которые добавляли на логотип. Теперь создадим кнопку. Для начала создайте новую группу и назовите ее «кнопки». Для её создания используйте инструмент Прямоугольник со скруглёнными углами (Rounded Rectangle Tool (U)), задайте Радиус в 6 пикселей.  

 

 

Создание макета сайта для приложений под iPhone

 

 

Для кнопки я добавил, по крайней мере, 5 стилей слоя: тень, внутренняя тень, внутреннее свечение, наложение градиента и обводка.

 

 

Создание макета сайта для приложений под iPhone

 

 

 

Создание макета сайта для приложений под iPhone

 

 

 

Создание макета сайта для приложений под iPhone

 

 

 

Создание макета сайта для приложений под iPhone

 

 

 

Создание макета сайта для приложений под iPhone

 

 

 

Создание макета сайта для приложений под iPhone

 

 

Используя инструмент Элипс (Ellipse Tool (U)) создайте окружность на кнопке (не забудьте нажать клавишу Shift, чтобы создать идеальный круг).

 

 

Создание макета сайта для приложений под iPhone

 

 

Добавьте два стиля слоя на круг: тень и внутренняя тень.

 

 

Создание макета сайта для приложений под iPhone

 

 

 

Создание макета сайта для приложений под iPhone

 

 

 

Создание макета сайта для приложений под iPhone

 

 

Далее возьмите инструмент Произвольная фигура (Custom Shape Tool (U)) и создайте маленькую треугольную стрелочку в центре круга. Примените к стрелочке стиль слоя тень.

 

 

Создание макета сайта для приложений под iPhone

 

 

 

Создание макета сайта для приложений под iPhone

 

 

И в завершении возьмите инструмент Горизонтальный текст (Text Tool (T)) и с помощью него добавьте название. В качестве стилей слоя добавьте тень и обводку.

 

 

Создание макета сайта для приложений под iPhone

 

 

 

Создание макета сайта для приложений под iPhone

 

 

 

Создание макета сайта для приложений под iPhone

 

 

Шаг 4: Облака

 

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

 

 

Создание макета сайта для приложений под iPhone

 

 

Объедините все слои с облаками в одну группу, назовите её «облака». Добавьте Режим наложения  на эту группы. Далее возьмите  инструмент Прямоугольная область (Rectangular Marquee Tool (M)) и инструмент Заливка (Paint Bucket Tool (B))  чтобы вырезать облака (см. рисунок ниже).

 

 

Создание макета сайта для приложений под iPhone

 

 

Скачайте изображение iPhone с этой страницы: http://www.teehanlax.com/downloads/iphone-4-guid-psd-retina-display/.  Откройте PSD-файл и перетащите iPhone на ваш макет. Дублируйте слой с iPhone  и уменьшите его размер на 5%. С помощью инструмента Перемещение (Move Tool (V)) поместите дубликат слева от первого iPhone.

 

 

Создание макета сайта для приложений под iPhone

 

 

С помощью инструмента Горизонтальный текст (Text Tool (T)) добавьте описание программного обеспечения, установите цвет текста на  голубой # 2a638c  и добавьте стрелки.

 

 

Создание макета сайта для приложений под iPhone

 

 

 

Создание макета сайта для приложений под iPhone

 

 

Шаг 5: Некоторые штрихи

 

Откройте файл с векторным изображением самолёта. Скопируйте и вставьте самолет в правом верхнем углу вашего названия.

 

 

Создание макета сайта для приложений под iPhone

 

 

Затем также птиц.

 

 

Создание макета сайта для приложений под iPhone

 

 

Теперь необходимо создать список ссылок с помощью инструмента Горизонтальный текст (Text Tool (T)). Что касается активной ссылки, просто создайте прямоугольник с закругленными углами (используйте инструмент Прямоугольник со скругленными углами (Rounded Rectangle Tool (U)) с Радиусом 6 пикселей).

 

 

Создание макета сайта для приложений под iPhone

 

 

Шаг 6: Контент

 

Страница будет состоять из двух блоков. Первый блок с более подробной информацией о программном обеспечении (скриншот и текст), а второй со ссылками для загрузки. 
Для первого блока создайте новую группу и назовите ее «детали». Создайте новый слой. Сделайте выделение размером в 880x220 пикселей. Залейте выделение белым цветом. Примените тот же метод для второго блока, но с этим цветом # 4f9aca. Переместите выделение на  2 пикселя вниз и нажмите клавишу Del. Останется лишь тоненькая голубая каёмочка.

 

 

Создание макета сайта для приложений под iPhone

 

 

Создайте новую группу и назовите ее «бокс1». Далее создайте прямоугольник со скругленными углами размером в 150x80 пикселей с тем же синим цветом, используемым ранее.

 

 

Создание макета сайта для приложений под iPhone

 

 

Добавьте в него фотографию.

 

 

Создание макета сайта для приложений под iPhone

 

 

Дублируйте эту группу ещё 5 раз и разместите полученные блоки в два ряда с расстоянием в 20 пикселей            между каждым из них. Чтобы имитировать эффект при наведении, измените цвет прямоугольника одного из блоков на оранжевый: # ff7f2a. Затем создайте новый слой, сделайте выделение фотографии. Залейте его черным цветом и измените Непрозрачность до 40%.

 

 

Создание макета сайта для приложений под iPhone

 

 

Чтобы закончить этот шаг откройте файл zoom.psd со значком увеличения  и поместите его над активным блоком.

 

 

Создание макета сайта для приложений под iPhone

 

 

С помощью инструмента Горизонтальный текст (Text Tool (T)) добавьте название справа от 6-ти скриншотов.

 

 

Создание макета сайта для приложений под iPhone

 

 

Добавьте ещё два блока с текстом. Слева от текста поместите иконки с сайта: http://www.iconfinder.com/search/?q=iconset% 3Afatcow

 

 

Создание макета сайта для приложений под iPhone

 

 

Шаг 7: Второй блок ссылок

 

Создайте новую группу для второго блока ссылок. Сделайте то же самое, что сделали для первого блока, отличаться он будет лишь размещением голубой каймы внизу (а не на верху, как у первого блока). С помощью инструмента Горизонтальный текст  (Text Tool (T)) добавьте гиперссылки (шрифт Helvetica, размер 12 пикселей). Создайте синий прямоугольник под активную ссылку.

 

 

Создание макета сайта для приложений под iPhone

 

 

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

 

 

Создание макета сайта для приложений под iPhone

 

 

Еще раз возьмите инструмент Горизонтальный текст (Text Tool (T)) и добавьте название, главы и оранжевую ссылку.

 

 

Создание макета сайта для приложений под iPhone

 

 

Шаг 8: Импорт пейзажа

Для создания ландшафта не может быть ничего проще, чем использовать векторный пейзаж! Откройте файл с пейзажем программой Adobe Illustrator, а затем скопируйте его и вставьте в ваш холст (из Illustrator в Photoshop). Наслаждайтесь, делая свой собственный пейзаж, импортируя цветы, деревья, облака и т.д.

 

 

Создание макета сайта для приложений под iPhone

 

 

Создайте новый слой и поместите его под слой с именем «пейзаж». Установите основной цвет на бледно-голубой # d1f3ff, выберите инструмент  Градиент (Gradient Tool (G)) и создайте градиент от основания до вершины. Следует выбрать линейный градиент, цвет от бледно-голубого до прозрачного.

 

 

Создание макета сайта для приложений под iPhone

 

 

Теперь добавьте на макет кнопку «AppStore». Чтобы создать эту кнопку воспользуйтесь  бесплатным файлом по адресу: http://corrupteddevelopment.com/customizable-app-store-download-buttons/, только измените немного градиент и контуры цветов.

 

 

Создание макета сайта для приложений под iPhone

 

 

Создайте новый слой и поместите его над  всеми слоями определяющими нижнюю часть макета. Возьмите инструмент Прямоугольная область (Rectangular Marquee Tool (M)) и создайте активное выделение с размером 1000x45 пикселей в нижней части макета. Заполните выделение зеленым цветом # 137109 и перейдите в меню Слои> Стили слоя> Внутренняя тень (Layer> Layer Style> Inner shadow), добавьте стиль.  Далее, используя инструмент Горизонтальный текст (Text Tool (T)), добавьте копирайты.

 

 

Создание макета сайта для приложений под iPhone

 

 

 

Создание макета сайта для приложений под iPhone

 

 

Теперь перейдите на сайт iconfinder.com и скачайте подходящие иконки социальных сетей и импортируйте их в ваш документ. Поместите эти иконки на правой нижней стороне и наложите цвет на каждый значок (меню Стили> Стиль слоя> Наложение цвета ( Layer> Layer Style> Colour overlay)).

 

 

Создание макета сайта для приложений под iPhone

 

 

 

Создание макета сайта для приложений под iPhone

 

 

Вот конечный результат вашего макета:

 

 

Создание макета сайта для приложений под iPhone

 

 

И без направляющих:

 

 

Создание макета сайта для приложений под iPhone

 

 

На этом урок закончен. Очень надеюсь, что он вам понравился. 

 

 


Автор урока: команда сайта Графпедиа


Переводчик урока: Ирина Шипилова 

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

 



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


  • 18.02.2012
  •   Просмотров: 7387
Комментарии Вконтакте:
Комментарии Facebook:
Комментарии:
Карина (21.11.2013 | 18:52)

Могу порекомендовать проверенный сервис http://appmaker.ru/. Ребята работают качественно и на официальной основе. Мой директор у них заказывал приложение для iPhone и был доволен результатом. Цены весьма приемлимые, результат не заставит ждать.

Оставить комментарий:
Включите эту картинку для отображения кода безопасности
обновить, если не виден код
Сложите два числа
(ответ введите цифрой).
Если символов не видно, нажмите на картику для её обновления.
Полный курс по After Effects на русском!

Все о МАСКАХ

Полный курс по Cinema 4D на русском!

Создание профессиональных видеоуроков!

Помощь сайту
Если вам нравится у нас на сайте, и мы вам помогли, вы можете внесите свой вклад в его развитие, пожертвовав любую сумму на один из кошельков:

WebMoney
Z280416942189
R894500715826

Яндекс Деньги:
410012466071950

Все деньги пойдут на развитие сайта (оплату хостинга, оплату авторам уроков т.д.)

В примечании к платежу укажите Ваш e-mail или логин на нашем сайте.

С уважением администрация сайта.
http://of-law.ru/iskovye-zayavleniya/ - Of-law.ru-судебные решения, исковые заявления, образцы жалоб, судебная практика, юридическая консультация бесплатно,нет ничего проще
Популярное на сайте
Следите за нами

Кроссовки дешево!
http://mykrosovkii.ru/catalog/nike.html - Уцененные кроссовки со всего мира,кроссовки Nike, Adidas, Converse кеды, Reebok Classic,New Balance
Партнерские ссылки