Здравствуйте, уважаемые читатели блога сайт! Как я уже неоднократно отмечал, в продвижении блога или сайта, в том числе созданного на CMS WordPress, мелочей быть не может. Важно все: SEO (внутренняя и внешняя оптимизация), SMO и SMM (раскрутка в социальных сетях).
А последние веяния таковы, что наблюдается стремительный рост значения соцсетей для развития проекта, поскольку поисковики уделяют повышенное внимание социальным сигналам. Полученные таким образом данные все активнее учитываются при ранжировании.
Не отстает в этом смысле и Twitter ( о регистрации, настройке аккаунта и использовании Твиттера). Поэтому очень важно уделить немного времени оформлению фона, шапки, правильно подобрать фотографию или аватарку. В общем поработать над дизайном, чтобы привлечь внимание потенциальных подписчиков. Думаю, и для простых пользователей ниже следующая информация не будет лишней.
Кстати, из других статей вы сможете узнать, как , а также как создать и загрузить картинки для аватарки ВК () и как использовать многочисленные возможности по прослушиванию музыки, просмотру видео, рисованию граффити в Контакте (), использованию программ и приложений этой крупнейшей соц.сети в рунете.
После того, как кто-то из пользователей Твитера открывает ваш профиль, первым делом бросается в глаза дизайн страницы учетной записи. Если оформление стандартное, установленное по умолчанию, это не будет служить отталкивающим моментом, ведь человек зачем-то пришел к вам на эту страничку, скорее всего его зацепил какой-то твит или сообщение.
В этом случае в первую очередь он будет знакомиться с вашей новостной лентой, количеством подписчиков и другой полезной информацией. Но представьте, что вы, скажем, web-дизайнер, а шапка для Твитера, фон или тема вашего профиля ничего выдающегося не представляют. В этом случае человека, планировавшего сделать заказ, это обстоятельство может отпугнуть.
Конечно, не факт, что каждый потенциальный клиент не раздумывая покинет эту страницу Twitter, но, согласитесь, в таких случаях важен каждый пользователь. А вот если фон в Твитере, то же фото или красиво оформленная шапка поражают воображение своей уникальностью, это может оказаться решающим фактором обратиться к такому мастеру. Надеюсь, вы понимаете, зачем я тут распинаюсь. Ну а теперь сначала разберем, как добавить фото в Твиттер или сменить его.
Итак, чтобы быстро отредактировать фото и написать краткую информацию о себе, жмите на кнопку «Изменить профиль», находящуюся сразу под шапкой справа, после чего тут же активируется механизм редактирования и вы сможете совершить нужные действия (загрузить в Твиттер фото либо удалить его, вписать лаконичную информацию о себе и о своем сайте, а также указать при желании ваше местоположение:
Также можно поменять цвет темы (ссылки, фон значков, иконок). После того, как нажмете шапки для Твиттера. После нажатия на «Изменить профиль» кроме редактирования описанных выше данных появится возможность изменить изображения шапки. С этой целью можете загрузить подходящую картинку со своего компьютера:
Следует иметь ввиду рекомендацию о желательном соблюдении разрешения изображения (1500х500). В случае игнорирования этого ограничения изображение в шапке может выглядеть не так, как того бы хотелось. Кстати, картинку для шапки можно с успехом сделать, воспользовавшись онлайн редактором , который является по сути упрощенным вариантом Фотошопа.
В материале, на страницу с которым попадете по предоставленной ссылке, описаны все возможности этой программы. Если же нет желания напрягаться, можно скачать изображение из интернета, а затем, подвергнув его обработке, в том числе подогнав размеры в графическом редакторе (сам я пользуюсь часто в таких случаях программой ), загрузить его затем в Твиттер.
Как и в случае с шапкой, фон или темы для Твитера можно сотворить несколькими способами, в том числе применив уже готовую картинку, имеющуюся у вас на компьютере. Ниже мы рассмотрим, как без лишней головной боли поменять, имея уже готовые темы, в том числе посредством имеющегося для этих целей приложения.
А теперь для начала поработаем немного над дизайном страницы и посмотрим, как установить картинки для Твитера на фон силами имеющихся непосредственно в опциях учетной записи образцов тем и придадим ей уникальность, это тоже имеет немалое значение. В верхнем меню жмете на аватарку с вашей фотографией, затем из контекстного меню выбираете пункт «Настройки»:
В левой части окна аккаунта появится список опций, в котором находим раздел «Дизайн», в который и переходим:
Можно отобрать изображение из предложенных. В этом случае поменять фон для Твитера очень быстро и несложно - нужно просто щелкнуть по понравившейся картинке левой кнопкой мыши. Тут же выбранный фон будет применен. Перебирая таким образом картинки, затем, после выбора окончательного варианта, не забудьте сохранить изменения с помощью находящейся в самом низу кнопки. Ниже находится блок, с помощью которого есть возможность загрузить свою собственную картинку:
Можно загрузить небольшое изображение, а затем отметить галочкой опцию «Замостить». Это позволит получить фон с многократным повторением загруженной картинки, что иногда смотрится весьма эффектно. Также здесь существует настройка положения фона (слева, в центре, справа), его цвета и цвета ссылок. Для выбора оттенка кликните левой кнопкой мышки прямо по окрашенному прямоугольнику, появится цетовая палитра, которой и можно воспользоваться. Вот как изменить фон в Твиттере, как видите, ничего сложного.
Если успели заметить, в Твитере предлагаются различные приложения, которые находятся в одноименном разделе слева, в том числе предназначенные для упрощения и ускорения редактирования различных элементов. Если внимательно посмотрите на пред-предыдущий скриншот, то увидите в самом низу блока тем ссылку на опцию Themeleon для Twitter от приложения Colourlovers. .
Попав на страницу этого сервиса, вы можете упростить действия с предложенным там разнообразием тем и фонов. Для этого нужно синхронизировать Твиттер аккаунт с Colourlovers.com. Нажимаем на «Login to Twitter», в результате чего вылезет предупреждающая табличка с информацией о том, что сможет, а что не сможет делать приложение при доступе к части данных:
Жмите на «Авторизовать», после чего будете перенаправлены вновь на страницу Themeleon Colourlovers, но уже с находящимся на ней вашем профилем. Это в разы ускорит редактирование и упростит подбор имеющихся фонов и тем. К сожалению, приложение на английском языке, поэтому мне придется дать некоторые пояснения к возможным опциям. Итак, идем по порядку:
В самом верху дана коллекция тем (themes). Для выбора просто нажимаете на нее левой кнопкой мыши, в результате чего изображение будет тут же применено в виде фоновой картинки. Та же картинка появится в блоке Background, расположенном чуть ниже слева. Здесь же, кстати, можно выбрать вместо предложенной темы использовать различные узоры, собрание которых находится во вкладке «Patterns».
Отмечу, что применение темы для Твиттера влечет за собой не только установку выбранного изображения, но и автоматическое редактирование других элементов, например, цвета ссылок. Кроме этого, можете загрузить свое изображение, выбрав файл и нажав «Upload». Не хотите использовать картинку? Нет проблем, нажимаете с этой целью на соответствующую область. Тогда можно просто использовать цветовую палитру во вкладке «Layout» (внешний вид) для получения фона без картинок:
Выбираете из выпадающего меню нужную коллекцию палитры для создания своей темы, нажимаете на желаемый вариант и тут же увидите произошедшие изменения. Кстати, поочередно кликая по нижним пяти квадратикам, можно также изменить оттенки всех других элементов дизайна (фон, ссылки и т.д).
Вот, пожалуй, и все. В заключение объясню значение кнопочек, находящихся между блоками «Background» и «Layout»:
Для примера приведу свою
Недавно в Твиттере появилась интересная функция – можно добавить к своему аккаунту «шапку» с интересным дизайном. Особенно оригинально будет смотреться, если она будет гармонировать с фотографией в профиле. За счет такого объединения у вас может быть абсолютно уникальная страничка, которая будет не только красивой, но еще и непохожей ни на какие другие.
Первоначально вам следует выбрать интересную картинку, после чего создать в каком-либо графическом редакторе (для этих целей подойдёт даже стандартный Paint) новый документ и выставить основные направляющие. Следующий шаг – сделать и сохранить отдельно картинки для аватара и шапки, после чего загрузить каждый отдельный элемент в Твиттер и создать уникальный дизайн собственного профиля. Стандартный размер шапки для Твитера должен составлять не менее 1252х626. Если же изображение больше, то соотношение сторон должно быть примерно таким же. Так как именно этот размер шапки в Твиттере позволяет получить информативную и в то же время полноценную картинку.
Первоначально ищем в интернете или на своём компьютере подходящее изображение шапки для Твиттера, после чего открываем его, например, в Paint. Желательно сразу найти такую картинку, которая будет равна тому стандарту, который предполагают размеры шапки для Twitter, или же иметь такое же соотношение. Чтобы реализовать уникальный вариант картинки, желательно сделать так, чтобы какая-то отдельная небольшая часть будущей «шапки» могла послужить вам аватаром для профиля. Открыв выбранное изображение в Paint, нажимаем кнопку «Выделить» и обводим тот участок, который будет нам служить аватаром, после чего нажимаем правой кнопкой мыши и выбираем «Обрезать».
Теперь у вас есть две картинки – одна побольше и прямоугольная, другая поменьше и квадратная. Заходим на наш профиль в Твиттере, нажимаем на изображение яйца в правом верхнем углу и нажимаем «Показать мой профиль». Далее нажимаем «Изменить профиль» и в появившемся окне нажимаем на «Добавьте шапку».
После того, как все будет добавлено, нажимаем «Сохранить изменения». Все, готово! Таким образом, вы можете создавать самые разнообразные красивые шапки для Твиттера.
Это только первый шаг к созданию оригинального дизайна блога в Твиттере. Дальше мы расскажем вам еще о множестве других действий, которые можно сделать, чтобы улучшить свой аккаунт.
Твиттер продолжает набирать обороты как в качестве рекламной площадки так и в качестве инструмента продвижения сайта для вебмастеров. Не так давно появилась возможность оформить свой твиттер аккаунт новой шапкой. Можно шапку скачать или изготовить самому с помощью фотошопа.
Раньше в твиттере можно было сменить только фон , сейчас же при появлении возможности вставить свою оригинальную шапку открывается возможность сделать свой сайт или услуги заметнее для пользователей Twitter Шапка это своего рода фон на котором размещается ваше фото, название и статус аккаунта. Шапку в твиттере лучше сделать оригинальной и запоминающейся, способной зацепить пользователя.
Если это корпоративный аккаунт постарайтесь, что бы шапка отображала ваш товар или услугу, отображала логотип компании и имела в себе контактные телефоны. Размер изображения шапки для твитера рекомендуется 1252×626 px а размер файла не более 5мб Для изменения изображения шапки необходимо пройти в раздел Настройки-Профиль-Изменить изображение шапки. Загружаете изображения (образцы шапок представлены ниже) и жмете сохранить.
Более оригинальные шапки для твиттера позволяют максимально совмещать аватар и фон шапки, здесь уже необходимо загружать изображение аватара и фон шапки, что бы получить полную совместимость аватара и фона. Такие обои выглядят примерно так:
Вы можете изменить внешний вид своей страницы в социальных сетях с помощью многочисленных фонов, доступных на сайте Envato Market .
В этом уроке я покажу вам как создать интересный геометрический дизайн с вашими фотографиями, который можно использовать в шапке твиттер-аккаунта.
Twitter использует плавающий фон, который подстраивается под разные разрешения экрана. Из-за этого достаточно сложно рассчитать, какую именно область шапки будет видеть пользователь на том или ином устройстве. К счастью, есть определенные рекомендации, которые позволят нам избавиться от лишней работы. В Twitter рекомендуется использовать для шапки изображение размером 1500 х 500 пикселей. Однако, картинка все равно будет уменьшена системой до размера 1263 х 421 пикселей, но я считаю, что разумнее придерживаться официальных рекомендаций.
Открываем Photoshop и переходим File - New (Файл - Новый) (Ctrl+N). Называем новый документ «Шапка твиттера» и устанавливаем Width (Ширина) на 1500 пикселей, а Height (Высота) - 500 пикселей. Resolution (Разрешение) - 72 пикселя/дюйм, фон оставляем белый.
Переходим View - New Guide (Вид - Новая направляющая) и создаем направляющие линии. Сначала устанавливаем вертикальную и вводим значение 317 пикселей. Затем создаем еще одну вертикальную направляющую со значением 1188 пикселей. Таким образом, мы разделили рабочее полотно на три колонки. Центральная область будет отображаться на мобильных устройствах. Поэтому важно учитывать эти направляющие при разработке дизайна шапки.
Картинки гораздо интереснее смотрятся при использовании геометрического дизайна, чем при размещении их в линию. Однако, многие художники не хотят возиться с попиксельным выстраиванием линий и углов. Но я покажу вам несколько трюков как добиться нужного угла наклона линий, при этом не потратив время на математические расчёты и сохранив красивый и аккуратный дизайн.
Берем Rectangle Tool (U) (Прямоугольник) и выбираем любой яркий цвет, который будет выделяться на белом фоне (позже мы его изменим). Кликаем по рабочему полотну, чтобы вызвать окно Create Rectangle (Создать прямоугольник). В поле Width (Ширина) вводим 10 пикселей, а в Height (Высота) - 900 пикселей. Затем кликаем ОК и перемещаем созданный прямоугольник к правой направляющей.
Используем Path Selection Tool (A) (Выделение контура), чтобы выделить прямоугольник (убедитесь, что на верхней панели параметров инструмента Path Operations (Операции с контуром) установлен на Add to Shape (Добавить к фигуре)). Переходим Edit - Copy (Редактирование - Копировать) (Ctrl+C), чтобы скопировать фигуру. Затем переходим Edit - Paste (Редактирование - Вставить) (Ctrl+V), чтобы вставить скопированный прямоугольник выше оригинала.
Далее Edit - Free Transform (Редактирование - Свободная трансформация) (Ctrl+T), поворачиваем копию так, чтобы нижний конец касался правого нижнего угла рабочего полотна и пересекал вертикальный прямоугольник точно по центру. Левый конец копии должен касаться верхней части рабочего полотна.
Убедитесь, что предыдущий прямоугольник все еще выделен, переходим Edit - Copy (Редактирование - Копировать) (Ctrl+C) и Edit - Paste (Редактирование - Вставить) (Ctrl+V), чтобы скопировать фигуру. Затем Edit - Free Transform (Редактирование - Свободная трансформация) (Ctrl+T) и отражаем копию по горизонтали.
Снова активируем Path Selection Tool (A) (Выделение контура), чтобы выделить две диагональные линии. Затем копируем и вставляем их. Активируем свободную трансформацию и перемещаем копии так, чтобы их левые концы касались левой направляющей линии.
Скопированные прямоугольники все еще находятся в буфере обмена, поэтому еще раз жмем Ctrl+V, чтобы вставить новую копию. Перемещаем их левее на самый край рабочего полотна, чтобы из линий образовался треугольник. Убедитесь, что прямоугольники соединяются верхним и нижним концами с соседними линиями справа.
Нам осталось добавить в левой части вертикальный прямоугольник. Копируем и вставляем вертикальную линию и переносим копию на левую направляющую.
Сетка, которую мы создали, будет служить в качестве границы между фотографиями, которые будут находится под ней. Благодаря правильно построенной сетке, все фото будут находится на одинаковом расстоянии. Кроме того, нам не нужно беспокоиться о том, чтобы фотографии имели аккуратные края, потому что сетка будет находится поверх картинок и скроет все недостатки.
Называем слой с сеткой Border Lines (Сетка) и жмем на кнопку Lock All (Закрепить все) на панели слоев, чтобы случайно не изменить этот слой во время работы с фотографиями.
Кликаем на фоновый слой, чтобы снять выделение со слоя Border Lines (Сетка). Затем берем Pen Tool (P) (Перо) в режиме Shape (Фигура) и устанавливаем цвет заливки, который будет выделятся на белом фоне и сетке. В левом верхнем углу рисуем треугольник. Убедитесь, что он находится под сеткой.
Важно, чтобы Path Operations (Операции с контуром) на панели параметров инструмента был установлен на New Layer (Новый слой). Благодаря этому, каждый новый треугольник будет создан на отдельном слое. Рисуем второй треугольник, чтобы проверить, что все работает так, как надо.
Продолжаем рисовать треугольники, пока не заполним всю сетку. У вас должно получиться 12 треугольников.
Снимаем блокировку со слоя Border Lines (Сетка) и меняем цвет контура на белый.
Закончив с треугольниками, начинаем встраивать в композицию фотографии. Сложнее всего определить какой снимок в каком месте добавлять, чтобы все смотрелось красиво и гармонично. К счастью, данная техника позволяет нам свободно экспериментировать с размером и расположением фотографий.
Сначала выбираем фигуру, поверх которой будем добавлять фото. Потом переходим File - Place Embedded (Файл - Поместить встроенные) и выбираем наш снимок. Размещаем его так, чтобы он полностью покрывал треугольник.
Переходим Layer - Create Clipping Mask (Слой - Создать обтравочную маску) (Alt+Ctrl+G), чтобы трансформировать слой с фото в обтравочную маску для треугольника. При этом фото остается полностью независимым и доступно для редактирования. Благодаря этому мы можем разместить его так, как нам хочется, не беспокоясь о лишних деталях.
Продолжаем процесс добавления фото и преобразования его в обтравочную маску до тех пор, пока не будут заполнены все 12 фигур.
Из-за большого разнообразия фото такой дизайн может смотреться хаотично и несвязно. А отсутствие согласованности в композиции может смущать зрителя. Поэтому мы добавим несколько дополнительных эффектов, которые помогут нам создать целостный дизайн.
Активируем самый верхний слой с фото на панели слоев. Он должен находиться сразу под слоем Border Lines (Сетка). Затем переходим Select - Color Range (Выделение - Цветовой диапазон). В выпадающем меню Select (Выбрать) выбираем Reds (Красные) и активируем опцию Invert (Инвертировать). Таким образом мы выделим все оттенки, кроме красных.
Добавляем корректирующий слой Layer - New Adjustment Layer - Gradient Map (Слой - Новый корректирующий слой - Карта градиента). Photoshop автоматически применит выделение из предыдущего шага к маске корректирующего слоя. Это значит, что эффект градиента будет применен ко всему изображению, кроме красных участков.
На панели Window - Properties (Окно - Свойства) открываем выпадающий список с выбором градиентов, там кликаем на значок шестеренки и выбираем градиент Photographic Toning. В появившемся диалоговом окне нажимаем кнопку Append (Добавить), чтобы добавить новые градиенты к текущему списку.
Прокручиваем в самый низ списка градиентов и выбираем Sepia-Blue 2.
Устанавливаем непрозрачность корректирующего слоя на 60%, чтобы уменьшить действие эффекта.
Зажимаем клавишу Alt и переходим Layer - Merge Visible (Слой - Объединить видимые) (Shift+Ctrl+E), чтобы создать один объединенный слой. Обесцвечиваем его Image - Adjustments - Desaturate (Изображение - Коррекция - Обесцветить) (Shift+Ctrl+U).
Устанавливаем режим смешивания слоя на Screen (Осветление) и уменьшаем непрозрачность до 30%. Затем переходим Filter - Blur - Gaussian Blur (Фильтр - Размытие - Размытие по Гауссу) и устанавливаем Radius (Радиус) на 5 пикселей. Это придаст всей композиции эффект мягкого фокуса.
Переходим File - Export As (Файл - Экспортировать как) и выбираем формат JPG. Устанавливаем максимально низкое качество, при котором на картинке не появляются слишком заметные искажения. Чем меньше вес файла, тем быстрее он будет загружаться на странице вашего профиля. После сохранения переходим в Twitter и обновляем шапку страницы.
Для того, чтобы создать подобную шапку для профиля в Twitter, важно использовать такую же тонировку и эффект мягкого фокуса. Примените корректирующий слой Карта градиента с похожими настройками и создайте объединенный слой с легким размытием.
Это достаточно универсальный дизайн, который можно использовать с любыми фотографиями любой тематики.
Красивый геометрический дизайн — это отличный способ выделить ваш профиль в Twitter. В этом уроке вы узнали, как с помощью нескольких трюков создать идеальные углы без каких-либо математических расчётов. После этого мы добавили коллекцию фотографий и применили несколько дополнительных эффектов в виде тонировки и мягкого фокуса, чтобы композиция выглядела целостной.
Рассмотрим различные варианты оформления самых популярных соцсетей.
Размер аватара для Facebook: 160px × 160px, – однако Facebook требует исходник минимум 180×180.
Размер обложки страницы: 851px × 315px, – но можно загружать и более высокое разрешение (например, 1702×628). Стоит учитывать, что на мобильниках шапка обрезается справа, то есть всю важную информацию лучше помещать по левому краю.
Создание шапки для Twittera оказалось задачей нетривиальной. Рекомендуемые размеры, найденные в Сети, были 1500px × 500px, а также 1252px × 626px, но социальная сеть имеет резиновый дизайн, то есть растягивается по ширине экрана, и на больших экранах такая маленькая шапка растянутой будет выглядеть некачественной. Опытным путем был найден максимальный размер шапки – 1900px × 500px, – а дальше самое интересное: при загрузке такой шапки, она все равно обрезается! Выход был найден: к картинке 1900×500 добавляются белые поля сверху и снизу до размера 1900px × 633px, тогда все встает, как надо.
Размер шапки: 1080px × 680px, максимальный размер – 2120px × 1192px, минимальный – 480px × 270px.
Размер аватара: от 250px × 250px, можно загружать большие разрешения. Необходимо также учитывать, что аватар круглый (то есть не нужно делать текст близко к краям – обрежется).
Итоговый размер изображения шапки подо все носители – 2560px × 1440px, размер «безопасной» зоны, где можно располагать логотипы и т.д., – 1546px x 423px.
Размер аватара справа – ширина 200px, высота до 500px.
Размер области с графическим меню: ширина для одного изображения без рамки (не в таблице) – 388px; максимальная ширина одного ряда двух и более изображений, помещаемый на главное меню не в таблицу (с вкл. опцией nopadding), – 376px; максимальная ширина для одного изображения, помещаемого без рамки в таблице, составляет 376px; максимальная ширина для двух и более изображений, помещаемый на главное меню в таблицу в один ряд (с вкл. опцией nopadding), – 370px (в том случае, если в таблице не присутствует «расширяющая» картинка 376×1px).
