Как использовать эффекты для фотографий «ВКонтакте»?

Продолжая срывать покровы Фотошопа, в этом уроке мы создадим сайт Вконтакте. Конечно, не весь Вконтаке а лишь макет одной из его страниц. Впрочем, все они похожи друг на друга. Долгое время я пропагандировал векторные инструменты Фотошопа, в частности в своей статье Зачем Фотошопу нужен вектор. Пришла пора применить его на практике. Для наших экспериментов я выбрал, что неудивительно, страничку нашей группы вконтаете. По окончанию урока мы воссоздадим все её элементы и получим готовый файл, который каждый из вас сможет скачать. По понятным причинам я не смогу расписывать каждый свой шаг на 5 абзацев, но очень постараюсь охватить все аспекты создания сайта в Фотошопе. Мы будем пользоваться шрифтами, масками, вектором, стилями. Расписывать азбуку каждого инструмента невозможно, но я постараюсь.

Как в фотошопе сделать сайт?

Как в фотошопе сделать любой сайт? Я выбрал Вконтакте из-за популярности и достаточной простоты. Прежде всего, вы открываете Photoshop и рисуете макет сайта. В сложных и дорогих проектах макет создают специально нанятые люди с системным мышлением. Они создают пустой фреим или каркас, где размещают кнопки, меню и контент сайта. Далее фреим передается дизайнеру, и дизайнер «одевает» каркас, рисуя дизайн и его элементы поверх каркаса. Почему именно так? Не все дизайнеры способны соединить в себе логику, здравомыслие и чувство прекрасного. Особенно страдают данным недугом дизайнеры с обостренным чувством прекрасного. Они, дизайнеры, не в состояние понять, что их навороченной красотой, банально неудобно пользоваться. Что в этой красоте, невозможно найти ни нужный раздел, ни нужное меню, ни нужные материалы. Поэтому внешний вид и эргономика сайта (понятность и простота) — разное.

Нарисованный макет передается верстальщику, который режет картинки на куски и воссоздает макет при помощи языков верстки HTML + CSS. Верстальщик передает верстку страниц программисту, и программист прописывает функционал, либо натягивает сайт на готовые движки. Мы же остановимся на этапе дизайна и макета. Так как макет у нас есть (впрочем как и дизайн), в этом уроке я просто воссоздам дизайн Вконтакте, и, надеюсь, этот урок ответит хотя бы частично на вопрос — как в фотошопе сделать сайт.

Как исправить искажение на фото

Создаем рабочую область

Прежде всего создаем правильную рабочую область. Сайт Вконтакте выровнен по центру, тянущиеся задние фона отсутствует. Ширина Вконтакте 790px Длина — бесконечна. Ширина не случайна. Вконтакте рассчитан на просмотр с самых древних мониторов с самым древним разрешением 800 на 600px. 10 дополнительных пикселей — запас для полосы прокрутки браузера. В отдельных случаях Вконтакте расширяется в разделе Приложений. Расширяется он за счет пространства между логотипом и меню, но нам это не важно. В диалоговом окне File > New создаем рабочую область на 800 х 600 пикселей.

Версия для компьютера

Все прекрасно, ссылка Отметить человека присутствует под фото, жмем на нее и предложено выделить область, на которой вы хотите отметить друга. А дальше самое интересное — это сделать не получается. Да, после нажатия на фото появляется диалоговое окно с полем поиска и списком друзей, кого можно отметить. Но одновременно с этим появляется клавиатура, так как курсор находится в поле поиска. И все пропадает. Выбрать возможности нет. Другими словами данный функционал не доработан для мобильного телефона и отметить человека никак нельзя. Можно попробовать отключить клавиатуру, но в телефоне нет настройки отключить / включить, поэтому это делать я не стал. И возможно проблема не в этом.

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

• 30 ноября 2018
• 4 675

Статьи

Размечаем рабочую область

Воспользуемся Направляющими Guides. Включите линейку Windows > Rulers или Ctrl+R, кликните по линейке мышкой, и не отпуская кнопки перетяните направляющую в начало рабочей области. Вторую направляющую поставим точечно, View > New Guides. В появившемся окне выберите Вертикальную направляющую и 790 px, такой же ширины сайт Вконтакте. Между этими направляющими мы будем рисовать наш сайт Вконтакте в Фотошопе.

История посещений или кэш браузера — это шанс!

Если ты недавно смотрел это фото в полном размере, то оно могло остаться в истории посещений или в кэше (временных файлах) браузера — той программы, с помощью которой ты смотришь сайты. Это один из реальных шансов. А если ты открывал фото с помощью кнопки «Открыть оригинал»,

то может быть, даже сможешь найти ссылку на сайт ВК, где это фото до сих пор хранится.

Как найти удаленное фото в истории браузера

Обычно историю посещений в браузере можно посмотреть комбинацией клавиш Ctrl-H

или вызвать через меню. Особенно полезно поискать там, если ты недавно открывал фото по ссылке
«Открыть оригинал».

Как найти удаленное фото во временных файлах

Потребуется программа для просмотра кэша. Для разных браузеров существуют разные программы, скачай и запусти ту, которая предназначена именно для твоего (Chrome, Mozilla Firefox, Opera, Internet Explorer). Если ты не очень хорошо разбираешься в компьютере, самое время перестать что-либо трогать и позвать мальчика, который хорошо в этом шарит, чтобы он продолжил с этого места.

Страница с программами для просмотра кэша различных браузеров: Web Browser Tools . Скачай программу для того браузера, который используется на данном компьютере. Запусти ее и поищи в кэше файлы изображений (.jpg) достаточно большого размера — среди них может быть то самое удаленное фото.

Выравниваем рабочую область

С размерами порядок, но сайт придавлен к одной стороне, а с другой сторону у него 10px зазора. Давайте выравним рабочую область прибавив немного пикселей с обоих сторон. Откройте Image > Canvas Size. В области Anchor направьте расширение в левую сторону. Поставьте галочку Relative. Тогда изменение размера области будет происходить относительно тех размеров, которые уже есть. В области ширины Width добавьте 10px и нажмите OK.

Теперь проделайте все тоже самое, но на этот раз стрелки в Anchor оставьте по центру, чтобы расширение происходило в обе стороны. И расширьте рабочую область ещё на 40px что бы сайту визуально не было тесно.

Как настроить оттенки цветов на фото

Создаем элементы сайта

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

Нам понадобится панель слоев Layers, которую можно открыть в Windows > Layers. Нам понадобится умело перемещать элементы. Для этого пригодится инструмент Move Tool, о котором подробнее можно прочесть в моей статье Работа с Move Tool. И я бы сказал что Move Tool вам понадобится особенно, так как большее время вы будете распихивать элементы макета по нужным местам, да выравнивать между ними расстояние. Итак, выберем первый инструмент Rounded Rectangle Tool и нарисуем шапку сайта. В настройках инструмента поставим не более 5px округлости и не забудьте про Snap to Pixels, с этой галочкой вектор будет привязан к размерам пикселей, что очень важно при создании графики для Web.

Шапка вконтакте округлая лишь с одной стороны и вот как я срежу края. Я выберу инструмент Rectangle Tool, в настройках инструмента выберите Subtract from Shape area (-) C этой настройкой инструмент будет отсекать части нарисованного вектора, а не создавать новые. Подробнее читайте в моих статьях о настройках Add, Subtract и Intersect. С включенной опцией Subtract выделите векторную маску в слоях и просто отсеките ненужную часть прямоугольника. Почему это выгодно? во первых у вас остается контроль за маской, так как вы создаете сложную фигуру. Если вам понадобятся округленные края с обратной стороны фигуры, вы всегда сможете их достать, удалив второй прямоугольник.

Классная аватарка без редактирования

Сложнее всего сделать идеальную фотографию без ее обработки в специальных программах. Но если вы не владеете навыками Фотошопа или хотите сделать естественную, но при этом крутую аватарку, то вам понадобится следующее:

1. Фотокамера
2. Вентилятор
3. Лампа
4. Хорошее настроение.

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

Второе правило: не берите в качестве фотографа неопытного друга или человека в состоянии алкогольного опьянения (даже легкого). Из такой затеи ничего хорошего не выйдет, лучше купите штатив и на него установите фотокамеру. Это позволит стараться над созданием аватарки неограниченное количество времени, не слушая недовольство подруги.

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

А теперь о позах

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

Создаем стиль

Что такое стиль? Стиль это графическая одежда, которая надевается на любой элемент графики, будь то векторный объект, растровый объект или шрифт. Стили в фотошопе включают в себя рад эффектов, которые не видоизменяются начиная с царя Соломона. Это тени, градиенты, заливки, 3D выдавливание, текстуры, окантовки, свечения и эффекты смешивания слоев. В целом этого набора хватает чтобы создать практически любую графику для сайта, и не только для неё. Я предлагаю работать со стилями очень бережно. Для этого урока мы создадим и сохраним несколько стилей, которые просто будем доставать в нужный момент из сундучка и применять по необходимости. Начнем с шапки.

Вызовите Менеджер настроек Edit > Preset Manager и выберите в выпадающем меню стили Styles. Выделите все при помощи SHIFT и удалите. Подробнее о Preset Manager можно почитать в моей статье Все о Preset Manager. Мы вычищаем все лишние стили, чтобы они нас не путали и создаем пространство для новых стилей. Удаленные же стили являются шаблонными, и их можно вызвать назад в любой момент. Если у вас там сохранены свои стили, не удаляйте их. Этот шаг я выполняю для простоты демонстрации, не более.

В панели слоев Layers выберите слой с шапкой. Теперь вызовите окно Стилей слоев. Layers > Layer Style > Gradient Overlay. Начнем с главного. Создадим правильный градиент.

Кликните по полоске градиента. Появится редактор градиентов. В редакторе кликните по ползункам градиента и выберите правильные цвета — #6185ad и #406287.

При ближайшем рассмотрении можно заметить что у шапки есть небольшая двойная окантовка из 1px темной линии и 1px светлой линии. Не выходя из Стилей слоев переключитесь на Stroke. Stroke создает окантовку вокруг объекта. В размерах поставьте 1 px в Position поставьте Inside, то есть внутрь. В типе заливки выберите градиент, с цветами #416184 и #4a6a91. Проявляйте внимание к деталям, если выбрать не градиент а сплошной цвет, то он будет теряться к вершине шапки, так как там цвет темнее. Если выбрать темнее цвет, чтобы он не терялся к вершине, то у основания он будет чрезмерно выразителен.

Наконец полосочка второго уровня, Выберите Inner Shadow, он создает внутреннюю тень, цвет тени #7e9fc8. Угол -90. Все ползунки на 0 и только Distanse — 2px.

С правой стороны мы видим изображение стиля. Это и есть «графическая чешуя», надеваемая на любой объект к которой будет применяться стиль. Нажмите на кнопку New Style и назовите стиль VK Style 1. Если вы переключитесь из левого меню в графу стилей Style, то увидите, что наша коллекция пополнилась первым стилем.

Фоторедактор Вконтакте — обработка фото в режиме онлайн

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

Итак, для начала необходимо выбрать фотографию, которую вы хотите отредактировать. Под фотографией будет вкладка «еще», нажав на которую вы можете зайти в раздел «фоторедактор».

В редакторе фотографий вам будет доступны два меню.

1. Первое меню: «фильтры». Здесь возможны 16 видов стандартных тем, которые вы можете использовать для своей фотографии. Например, фильтр, который называется «Nox», сделает вашу фотографию черно-белой. Другие фильтры позволят насытить фото определенными оттенками и цветами.

1. Вторая вкладка – «параметры». Здесь вы можете настроить яркость, контрастность, насыщенность, и другие свойства фото. После того как вы настроите все параметры, нажмите на вкладку «сохранить».

1. Вы можете добавить текст в фотографию.
2. Втора функция размытие. Вы можете выбрать область, коорая не будет размываться, например, дальний фон, а область, где непостредственно на фотографии изображены вы, будет обычной. Этот эффект довольно часто применяется в профессиональной съемке.
3. И еще одна функция – автокорекция. Это позволит редактору автоматически улучшить цветовую гамму фотографии.

vksos.com

Создаем логотип

Точнее копируем логотип, ведь Вконтакт уже любезно предоставил его каждому желающему на своей спец странице. Скачайте версию в PDF и откройте её в Фотошопе. Первое что вам бросится в глаза — логотип несоразмерно большой. Конечно сейчас мы его уменьшим, однако, если вы уже собрались уменьшить его при помощи Edit > Free Transform, будьте готовы к тому, что его стили, рассчитанные именно на такие размеры, останутся неизменными. Конечный результат получится неприглядным.

Теперь выберите слои с логотипом и перенесите их на рабочую область сайта, и вот как это сделать быстрее всего. Выделите слои в панели слоев, инструментом Move Tool кликните по рабочей области и как бы, перетяните слои на вкладку с сайтом.

Скачать статью в формате pdf

На моем сайте отключено копирование текста, поэтому если вам нужна полностью статья, то вы можете купить запись МК в *pdf формате и наслаждаться его изучением на своем компьютере.

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

Любой труд должен быть оплачен. Спасибо за понимание!

Для оплаты воспользуйтесь формой ниже. Ссылка для скачивания придет к вам на электронный адрес, который вы укажете.

Создаем меню шапки

Пришла очередь меню. Для создания меню нам понадобится инструмент Type Tool, панель настроек шрифтов Character которую можно найти в Windows > Characte, а для создания других текстов в перспективе нам понадобится панель Paragraph, которую тоже можно найти в меню Windows > Paragraph. Выберите инструмент Type Tool и напишите текст. Эмпирическим путем я установил что Вконтакт использует шрифт Verdana. Возможно установил ошибочно, но визуально они один в один. Напишите первый пункт меню маленькими буквами — «Поиск». Размер шрифта 11pt стиль шрифта Bold. Вконтакт и более тесное расположение букв при помощи CSS. Учтем и этот нюанс, измените расстояние между буквами (tracking) до -55.

Когда вы закончите с одной надписью, продублируйте слой и напишите вторую Layers > Dublicate Layers Затем третью, четвертую. Затем выделите все созданные слои и рассортируйте их при помощи функций инструмента Mover Tool, котором мы уже говорили в этой статье. Но есть более простой способ создания меню. Чем создавать по 5 слоев, перегружая панель слоев, а затем возиться, расставляя их ровно инструментом Move Tool, создайте все на одной строчке. Напишите «Поиск» поставьте 4-5 пробела, напишите «Пригласить», опять 4-5 пробела и так далее. В итоге, все меню на одном слое, стили тоже надеваем на один слой, а не на 5 слоев. Удобно.

Создав меню, создаем правильные стили. Совет: либо задавайте шрифтам заранее правильный цвет, либо не думайте о цвете вообще, раскрашивая все после создания макета через стили. Откройте стили слоя, конечно, не забыв выделить шрифт меню Layer > Layer Style > Color Overlay Этот стиль просто и непринужденно натягивает на объект цвет. Вот и натяните белый цвет, #FFFFFF. У меню Меню Вконтакте имеется нехитрая тень, создаваемая силами CSS, мы же, рисуя макет в фотошопе создаем её через стили, и только потом верстальщик отобразит её языком верстки. Зайдите в Drop Shadow, в настройках тени выберите цвет #2f5076, невидимость 100% Угол падения любой приемлемый на ваш взгляд. Главное, везде отключайте опцию Use Global Light. Эта галочка соединяет в себе угол падения света всех стилей. Что это значит? Это значит, что если вам взбредет в голову поменять угол наклона тени в одном из объектов на следующий день, этот угол сменится у всех объектов, к которым применялся стиль с этой галочкой. Удобно, когда нужно регулировать общий угол падения тени для всех стилей из одного места, не удобно, когда этого не нужно делать.

Закончив со стилем, сразу сохраняйте её известным методом в этом же окне New Style. Стиль назовите VK Type Style 1.

Как осветлить тени на фото

Создаем общий макет для сайта

Я подробно разобрал шапку, меню, логотип, различные нюансы того и другого. Теперь пойдем быстрее, задерживаться на каждой надписи невозможно. Вконтакт очень простой сайт с точки зрения дизайна, простой и приятный глазу. Основное его достоинство в том, что Вконтакт использует шаблонные повторяющиеся блоки, с различной информацией. Блок для Участников, блок для стены, блок для ссылок, блок для заметок. Дизайн всех блоков одинаков, но блоки не мельтешат, не налезают друг на друга, не диссонируют, очень легко различимы и не теряются в общей массе. При первом взгляде на сайт очень легко понять где и что. Вот общее меню сверху, вот личное меню сбоку. Вот аватарка и моя информация, вот стена, а вот всякие фичи. В этой части статьи мы разметим макет.

Вы наверняка заметили, что Вконтакт разделяет области 1px полосками графики. Они едва заметны, но все же различимы. Для их рисования мы не будем использовать векторный вариант Line Tools и вот почему. Векторные инструменты работают вне пиксельной сетки. Векторная линия может сесть ровно на пиксель, левее пикселя, правее, Фотошопу придется графически как то отобразить это. Мы помним, Фотошоп программа растровая и всю графику фотошоп отображает Растром. Это не плохо, потому что браузеры тоже отображают сайты растром. Проблема инструмента Line Tool проста, у него нет привязки к пикселям Snap to Pixels. Поэтому нарисовать ровную полоску, которая не будет заступать ни за один пиксель можно только случайно либо в режиме Fill Pixels при отключенной настройке Anti-Alias, подробнее о которых можно прочитать в моей статье Все о режимах Shape Layers, Path и Fill Pixels.

Никаких проблем, рисуйте полосочки в растре, заранее создав пустой слой. Но вот, почему я все же выбираю Вектор в Фотошопе. Векторные объекты на основе заливки в разы проще перекрашивать. В растровых надо пользоваться выделениями и Edit > Fill либо постоянно залезать в стили Color Overlay. Векторные объекты гибче и заметнее в панели слоев, их легко модифицировать и растягивать. Растровые же постоянно расплываются, либо их нужно перерисовывать. Выбор за вами, но я предпочитаю максимальный контроль за макетом.

Я выберу инструмент Rectangle Tool и нарисую все объекты макета, места для аватарок, разделительные полоски, разделительные блоки. Получится пустой сайт с объектами на которые я натяну стили. Конечно, не забудем о известной опции Snap to Pixels

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

Подведём итоги

Нам удалось прийти от топорных модификаций цвета к мощному и гибкому инструменту для продвинутой коррекции изображений. Мы сумели сделать так, чтобы это работало, и работало быстро. Snapster стал полем для эксперимента, и это успешный эксперимент — мы создали крутой редактор, которым можно гордиться. Этот опыт помог нам и в официальном приложении ВКонтакте. Не исключено, что мы перенесём туда ещё какую-то часть функциональности Snapster.
Если Вы знаете и любите Android, приходите к нам, чтобы работать над приложением, которым каждым день пользуются миллионы людей.

Стилизация объектов сайта в Фотошопе

Воссоздав макет, переходим к дизайну. Вы уже видели процесс создания шапки, меню, стилей. Я не принесу в этой части урока ничего нового, мы опять будем раскрашивать векторные полоски и создавать новые стили. Прежде всего раскрасьте полоски в светло голубой цвет — #d9e0e7 Для этого кликните по иконке заливки, и выберите нужный цвет в появившейся форме.

Выберите первый блок Фотографий, и кликните дважды по слою с прямоугольником. Появится диалоговое меню Стилей, которое так же можно вызвать в основном меню — Layer > Layer Style. В Стилях слоя выберите Color Overlay, залейте объект светло голубым цветом #e1e7ed. Теперь разберемся с верхней и нижней полосками. Верхнюю полоску создадим через Drop Shadow. Цвет — #d3dae0 Угол наклона -90, то есть тень направится сверху вниз. И конечно нам нужна не тень, в полном смысле, а лишь 1px полосочка, поэтому убейте все параметры, отвечающие за величину и растушевку тени Spread и Size. Оставим лишь 1 для Distanse, то есть тень выступает на 1 пиксель.

Аналогично для нижней полоски, её мы создадим с помощью внутренней тени Inner Shadow. Цвет тени #d3dae0, угол наклона -90, галочку Global Lights, как я писал выше убирать везде. С остальными настройками тоже самое. И конечно сохраняем стиль через New Style.

Создадим свой стиль и для формы поиска. Она находится в разделе Стены Вконтакта и представляет из себя белое поле с 1px окантовкой. Выбираем этот элемент, заходим в Стили слоев эффект Stroke. Перво наперво создаем цвет окантовки — #c0cad5. В настройках позиционирования Position выбираем Inside. Это важно, полоска внутрь создает острые края, полоска наружу округлые. Так устроен Фотошоп. Размер окантовки 1 px. Cнова сохраняем стиль.

Теперь у нас следующая ситуация. В макете остались не задизайненные объекты, но не повторять же для каждого квадратика уже созданный стиль? В фотошопе есть 100500 возможностей копировать стили с одного объекта на другой, в том числе не сохраненные стили. Тема эта скорее для статьи о работе со стилями. Я лишь расскажу об одном из них для которого мы специально и сохраняли все стили. Откройте панель Стилей через Windos > Style. Если вы делали все правильно, вы увидите пустое поле и сохраненные для сайта Вконтакте стили. Выделите нужный слой из панели слоев и щелкните по нужному стилю. Чтобы анулировать стиль, щелкните по белой иконке с красной линией.

Как редактировать фотографию ВКонтакте?

Все очень просто и понятно. Откройте любую фотографию, (не важно, это будет фото из альбома, или ваша ава) и нажмите “Редактировать” в правом нижнем блоке.

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

После внесения изменений, не забудьте сохранить результат редактирования нажатием на кнопку “Сохранить”.

Кстати еще по теме, думаю будет интересно почитать статью, о том как скрыть фотографии Вконтакте. Ну что можно сказать, о новой функции. Хорошо, конечно возможностей пока мало, но скорее всего со временем редактор будет обновляться и появляться новые возможности. Что-то мне подсказывает, что сейчас ВКонтакте начнется эра черное-белых и размытых фотографий :). Удачи друзья, а я пошел редактировать фото :).

Новая фишка от ВКонтакте. Редактор фотографий. обновлено: Октябрь 11, 2012 автором:

Используемые источники:

• https://vksos.com/foto-i-izobrazheniya/fotoredaktor/
• https://howvk.ru/foto/redaktor/
• https://kontaktlife.ru/red-foto
• https://pod-kopirku.ru/vkontakte/146-fotoredaktor-vk-kak-otkryt.html
• https://f1comp.ru/vkontakte/novaya-fishka-ot-vkontakte-redaktor-fotografij/

ПОДЕЛИТЬСЯ Facebook

• tweet

Предыдущая статьяУрок 155 Как расшифровывается смс

Следующая статьяКак русифицировать смартфон из китая. Как установить русский язык на Android

Шрифты для сайта Вконтакте в Фотошопе

Разобравшись с дизайном объектов перейдем к шрифтам. Оставшиеся шрифты не представляют из себя особенной сложности. Выберите инструмент Type Tool и создайте боковое меню со следующими настройками. Размер шрифта 11pt, расстояние между строками 21pt, цвет #416288, шрифт Arial обычный. Похожие настройки используются и для меню с правой стороны сайта.

Для блоков текста используйте Параграфы. Для создания параграфа кликните инструментом Type Tool по рабочей области и не отпуская мышку протяните указатель, создав область для печати. Так вам не придется переносить текст «на глаз». При этом мы сможете воспользоваться настройками из панели параграфа Paragrapg из Windows > Paragraph, где можно регулировать позиционирование, расстояние между параграфами, красные строки, отступы и многое другое.

Ту же технику я применил для создания постов Ленты.

Что дальше?

После релиза первой версии захотелось добавить больше возможностей для редактирования. Так в редакторе появился популярный у фотографов инструмент Tone Curve, всеми любимые «кривые». С помощью кривых в приложении можно воздействовать на яркость пикселей в конкретных диапазонах RGB. При этом значения пикселей меняются в соответствии с формой кривой, которую пользователь видит на экране.

Внедрение кривых помогло оптимизировать некоторые базовые операции. Теперь сами кривые, яркость, контрастность, фейд, температура и тинт (оттенок) стали применяться за один проход с помощью трёх 1D Lookup Tables.

Использование OpenGL означает довольно жёсткие ограничение на размеры выходного изображения, поскольку все текстуры должны храниться в видеопамяти. Некоторые Android-девайсы в то время едва ли могли отрендерить квадрат размером больше 1500х1500 пикселей с нашим конвейером, а нам хотелось даже большего. И если с самим редактором мы ничего поделать не могли, то для рендеринга финального результата решение нашлось. Мы продублировали всю функциональность конвейера на чистом Си. Получившийся код хранил все промежуточные текстуры в обычной оперативной памяти и по максимуму использовал возможности многоядерных процессоров. Благодаря этому пользователи даже далеко не самых мощных устройств смогли сохранять итоговые изображения в очень высоких разрешениях.

Создание других элементов для сайта Вконтакте

Других элементов откровенно говоря не много. Это загнутая стрелочка для ссылок в постах ленты, и сердечко — вариация кнопки «нравится». Оба элемента я создал из обычного стандартного набора фигур Фотошопа — инструмент Custom Shape Tool. Подробнее о его работе можно прочитать в моей статье о Custom Shape Tool, подробно посмотреть его в действии можно в моем видео уроке о работе Custom Shape Tool.

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

Способы восстановления

Несмотря на то, что удаленное фото все еще находится где-то там, на одном из серверов ВКонтакте, найти его практически невозможно. Чтобы открыть этот файл, нужно знать точную ссылку на него (много-много букв, цифр и в конце «.jpg»). Даже если бы мы знали часть этой ссылки, подбор оставшихся вариантов занял бы очень много времени (дольше, чем можно себе представить).

Поэтому нужно попробовать воспользоваться другими, более реальными шансами. Главное — не терять время.

Заполнение фотографий при помощи Clipping Mask

У нас остались пустые формы макета, означающий графику и картинки, которые будут загружать пользователи. Но ведь намного лучше продемонстрировать их в действии. Как это сделать самым простым образом? Дайте подумать, я бы открыл все фотографии, которые использую на сайте, затем нашел бы их размер, уменьшил, обрезал, доведя до одинаковых размеров. Ах да, там ведь ещё разные шаблоны макетов, есть фото для фотографий, есть иконки для раздела Участники, есть большой аватар, есть иконки в постах. Все разных размеров. Не проще ли открыть нужную графику а затем одним щелчком заставить её «сесть» в эти созданные формы? Конечно проще. Откройте необходимые фотографии и перетяните их на рабочую область. В панели слоев разместите каждую фотографию над своим прямоугольником.

Способов создать Clipping Mask много. Выделите слой с фотографией, и выберите в меню Layer > Create Clippig Mask или нажмите Alt+Ctrl+G. Более простые способы — выделите слой фотографии в панели слоев, кликните по нему правой кнопкой мышки и в меню выберите Create Clippig Mask. Более быстрый и элегантный способ — наведите указатель мышки между двумя слоями, на панели слоев и нажмите Alt. Указатель превратится в восьмерку. Кликните и это тоже создаст Clippig Mask.

Смысл Clippig Mask в том, что изображение выше, встраивается в объект ниже. Соответственно фотография может быть любого размера, но объект ниже обрезает ненужные края. Если фотография слишком большая просто уменьшите её при помощи Edit > Free Transgorm что называется на лету. Если вы не слышали про такое, читайте мою статью Free Transform в Фотошопе

Как открыть редактор фото в ВК с компьютера и телефона

Одной из отличных функций Вконтакте есть «фото редактор». Он способен не только улучшить снимок, но и добавить в него стикеры, эмодзи, текст или рисунок.

Редактор появляется везде, где используются фотографии, а именно в:

Как воспользоваться фото редактором на компьютере?

Как было сказано ранее, редактор появляется тогда, когда есть какая-нибудь связь с фотографиями. В качестве примера, кнопка фото редактора может появиться в сообщениях (при добавлении фото), фотоальбомах (при просмотре фото). Кнопка будет называться «Фоторедактор». К примеру, рассмотрим вариант при редактировании фото. Для этого нужно:

1. Перейти на любую фотографию в полной версии ВК
2. Под фото навести курсор на текст «Ещё»
3. Выбрать «Фоторедактор»

   

Как воспользоваться фото редактором в мобильной версии?

К примеру, рассмотрим вариант при загрузке фотографии в свой профиль в мобильном приложении ВК. Для этого:

1. Загрузим фото
2. До сохранения фото, появиться кнопка «Редактировать»
   Как открыть фоторедактор в мобильной версии ВК

Функции фото редактора

Теперь можем ознакомиться с функциями. В нем доступны следующие функции:

• Добавление текста
• Кадрирование
• Размытие
• Поворот фото
• Автокоррекция
• Различные фильтры
• Дополнительные параметры
• Стикеры (доступно при отправке сообщения или добавлении записи)
• Рисование (доступно при отправке сообщения или добавлении записи)

howvk.ru

Организация сайта в Фотошопе

Пожалуй последнее, на чем я хотел бы остановиться — организация слоев. Организация важна, постольку поскольку фаил будет передан верстальщику, а ему разбираться с вашими слоями. Если вы и дизайнер и верстальщик правильная организация не будет лишней, и в стократ упростит для вас поиски нужного в старом фаиле через месяц. Организуйте слои по смысловой нагрузке. Размещайте их по порядку. Выделяйте ряд слоев и нажимайте Ctr+G. Это помещает их в папку. Создавайте папку в ручную из панели слоев, давайте файлам правильные имена, что бы легко узнавать их в меню Move Tool и на панели Слоев Layers. В конце концов раскрашивайте слои и группы по смысловой нагрузке. Сделать это можно через Layer > Group Properties

B вот так вы можете сделать сайт Вконтакте. И не только Вконтакте, но и любой другой сайт. Пожалуй в следующих статьях я продолжу практику воссоздания популярных в интернете сайтов. На повестке для Twitter, Facebook или Однокласники. Если вы хотите получить готовый макет сайта Вконтакте, кликните по кнопке Like для Фэйсбука, чтобы появилась ссылка на скачку. В конце концов, это меньшее что можно сделать, чтобы получить готовый макет для в формате PSD для сайта. Я надеюсь что теперь вы знаете, как сделать сайт в Фотошопе. Хорошего вам дня.

Похожие записи:

1. Как сделать курсор для мыши?
2. Как сделать флаер [часть 2]
3. Как сделать визитку в Фотошопе?
4. Как установить экшен в Фотошоп

Автор:

Возможные проблемы

При загрузке новых изображений с галереи, возможно будут возникать проблемы с подгрузкой. Требуется проверить связь с интернетом, а также посмотреть размер картинки. В сети «ВКонтакте» есть ограничение на фотографии. Нужно прочесть правила сообщества. Установили новое изображение, и пропали лайки? Необходимо ждать пока друзья отметят фото. Другого выхода нет. После деинсталляции снимка и обновления странички он пропал? Его можно отыскать в кэше или загрузить снова.

Возникают ситуации, когда доступа к компьютеру или ноутбуку нет и нужно отметить на последних выложенных фотографиях своих друзей. Берется в руки телефон и возникает вопрос — как отметить людей Вконтакте с использованием гаджета? Спойлер — к сожалению, пока никак. Реализация данного функционала сделана таким образом, что нужно выделить область для того, чтобы отметить человека. А как это сделать с телефона, когда при выделении двумя пальцами фото только увеличивается? Обо всем по порядку.