Логотип......Что это такое....Прежде всего это фирменный знак сайта. Сайты бывают разные по своей тематике, поэтому выбирая себе логотип, подбирайте такой, который бы более соответствовал теме Вашего сайта. Те кто хорошо пользуется фотошопом, может самостоятельно изготовить себе логотип, ну а кто не может, то можно воспользоваться поиском в интернете и Вы обязательно найдёте логотип к своему сайту. А кто очень капризный, то можете воспользоваться чьей-то услугой.
Перед тем как начать, то Вы должны уточнить установлен ли в Вашем шаблоне логотип. Он может выглядеть как картинка с названием Вашего сайта. Если есть такой логотип, то поменять его будет очень просто. Надо будет название файла нового логотипа заменить на название старого, а потом удалить старый файл из папки imedes, где располагаются картинки шаблона сайта и загрузить туда новый файл со старым названием. Таким образом новый логотип встанет на место старого
Ну а если нет логотипа???
Теперь приступим к делу. Логотип у Вас готов и его надо установить в шапку сайта. Сразу предупреждаю, что этот способ подойдёт не для всех шаблонов WordPress, в этом я убедился.
В первую очередь картинку логотипа необходимо загрузить в паку images темы (шаблона) Вашего сайта. Файл ло готипа можете назвать как угодно, а я для примера назову его logo.png . Для вставки логотипа необходимо знать полный адрес доступа к файлу этой картинки. Он будет выглядеть следующим образом:
Теперь из этого адреса сделаем код вставки логотипа в шапку сайта. Для этого необходимо добавить некоторые атрибуты. Сначала составлю код так как он будет выглядеть, а потом опишу для чего и какие атрибуты в коде:
http://Ваш сайт/wp-content/themes/ название темы/images/logo.svg?1 " style="position:absolute; top: 18px; left: 20px ;">
Разберём красную часть кода с атрибутами:
position:absolute; - это значит, что логотип будет иметь абсолютное позиционирование.
top: 18px;
- изменяя цифру в этом атрибуте, будете добиваться необходимого расположения логотипа от верхнего края шапки.
left: 20px
;
- изменяя цифру в этом атрибуте, будете добиваться расположения логотипа относительно левого края шапки
Следующий шаг это вставить составленный код в файл header.php, для чего надо зайти в админку сайта и пройти по пути Дизайн==>Редактор
и в редакторе открыть файл header.php.
А вот куда вставлять код, конкретных советов дать не могу, т.к. файлы header.php у почти всех шаблонов отличаются. Придётся действовать "методом тыка", но это не сложно. В файле надо смотреть код после тега
и искать там участок кода такого вида Должно всё получиться. В сильно навороченных шапках могут возникнуть небольшие проблемы. Не бойтесь, пробуйте ниже Будут проблемы, и я помогу!!!
Вставить логотип в шапку
обновлено: Июнь 3, 2018
автором: admin
Читатели блога «Мир Вебмастера» уже знают как создавать логотипы для веб-ресурсов – мы об этом говорили ранее в статье « », и наверняка опробовали сервисы, представленные в материале « ». Пришло время украсить свой блог красивым и запоминающимся логотипом! В сегодняшнем уроке я подробно расскажу как вставить/поменять логотип на сайт WordPress – подопытным «кроликом» выступит один из моих ресурсов. Но сначала узнаем: а есть ли там логотип в виде изображения? Для этого кликнем на названии сайта правой кнопкой мышки: Если же у вас логотипом стоит картинка, следует его удалить. Проходим в раздел «Внешний вид»
или «Дизайн»
. Есть пункт с названием шаблона – хорошо, удаляем там логотип. Нет – идем в Редактор
и в header.php
ищем код изображения, который следует удалить. Итак, логотипа на вашем сайте нет. Создадим же его! Для этого запускаем клиент FTP (у меня, к примеру, FileZilla
) и сохраняем изображение в папке /public_html/wp-admin/images
.
Путь может быть и другим —
wp
—
content
/
themes
/название_темы/
images
, например. Надеюсь, картинка у вас небольшая, поскольку стоит понимать, что все должно быть в меру и подходить по дизайну. Итак, логотип загрузили. Кстати, можно картинку отправить в любое другое хранилище, но это будет лишней ссылкой на чужой сайт, оно вам надо? Если нет доступа к FTP
, то сохраняйте картинку в любом сообщении блога – и забирайте адрес логотипа. В итоге код должен выглядеть примерно так:
. Теперь нужно определиться, куда его вставить. Для этого идем по пути Консоль – Дизайн – Редактор
. И выбираем шаблон «Заголовок»
(header.php
). Куда вставить код логотипа на сайте WordPress
, зависит от шаблона. Ищите такие теги, как на картинке (напомню, быстрый поиск по тексту можно осуществить с помощью сочетания клавиш Ctri+F): Я ничего подобного не нашел и пошел еще одним путем — вставил код после тега Теперь посмотрим что у меня получилось, идем на главную страницу моего сайта: Уже что-то похожее на логотип, но выглядит все это неаккуратно и некрасиво. Можно убрать название в настройках, я так и сделаю и сдвину логотип на край
. Для этого добавлю небольшие
изменения в код
:
Здесь отсчет идет от верхнего и левого края страницы. Путем манипуляций и подбора отступов у меня получилось следующее: Если вам необходимо вставить логотип как ссылку
, нужно еще немного изменить код, прописав адрес к нужной странице: У меня получилось так: Как видите, картинка стала ссылкой: есть адрес на ссылающуюся страницу и на урл картинки. Все, на примере одного из своих сайтов я рассказал как вставить логотип на сайт Вордпресс. Платформа эта очень разнообразная, где-то может у вас что-то не получится – но я рекомендую не отчаиваться, а раз за разом внимательно читать эту статью и установить все-таки логотип на свой блог. Возможные ошибки:
Что делать:
Инструкция Если шапка сайта выполнена в формате изображения, логотип можно поместить поверх существующей картинки с использованием любого графического редактора. Это самый простой вариант, не требующий редактирования страниц. Чтобы им воспользоваться, отыщите файл с изображением шапки на сервере сайта и загрузите его в компьютер. Затем откройте его с помощью графического редактора - для предстоящей операции вполне достаточно возможностей стандартного Paint ОС Windows. Поместите поверх открытой картинки изображение логотипа - в Paint для этого предназначен пункт «Вставить из» в выпадающем списке «Вставить». Мышкой перетащите логотип в нужное место фонового изображения, измените нужным образом его размеры и сохраните результат комбинацией клавиш Ctrl + S. Загрузите файл шапки с логотипом на сервер, заменив им исходный файл, и операция будет завершена. Для вставки логотипа в HTML-код страницы удобнее всего использовать графический режим (режим WYSIWYG) редактора страниц, который есть в большинстве систем управления сайтами. Открыв нужную страницу в таком редакторе, кликните место, в которое следует поместить логотип, и нажмите кнопку вставки изображения в меню. На экране должен появиться диалог, в котором вам надо указать место хранения файла с логотипом в компьютере. В зависимости от редактора, в этом же диалоге могут быть и поля для ввода дополнительных параметров - размеров картинки, отступов от соседних элементов страницы и т.д. Все заполнив, нажмите кнопку OK, а затем сохраните отредактированную страницу. При отсутствии возможности использовать редактор страниц вносить теги в исходный код придется «вручную». Для этого отыщите на сервере файл нужной страницы, загрузите его в компьютер и откройте в любом текстовом редакторе - например, в «Блокноте». Эта операция требует некоторого знания языка верстки гипертекста - вам надо найти в HTML-коде правильное место для размещения тега логотипа. Сам этот тег в простейшем варианте можно записать, например, так: Добавив строку в исходный код, сохраните страницу и замените отредактированным файлом хранящийся на сервере оригинал. Затем загрузите туда же файл с изображением - для примера из предыдущего шага этот файл должен называться logo.png и храниться в той же папке сервера, куда помещена отредактированная страница. Видео по теме Логотип придает сайту индивидуальность, наделяет его характером, делает узнаваемым. Именно поэтому разработке фирменной картинки уделяется особое внимание, что влечет за собой вполне обоснованные траты. Инструкция Выберите место, которое должен украсить разработанный логотип. Небольшие иконки обычно крепятся к открывающимся закладкам, а полноценную версию лучше сделать гордым украшением . Чтобы поставить значок на закладку, подкорректируйте html-код, добавьте между Приведите изображение в нужный формат. Любой логотип – это картинка, которая вставляется при помощи тега с добавлением необходимых атрибутов. Поэтому она должна идти в расширением jpeg, gif, png, если оно не соответствует – переведите в нужный. Сделать это можно с помощью графического редактора, наиболее востребованной является программа Adobe Photoshop. Для этого откройте изображение, нажмите «Сохранить как» и из предложенного количества форматов выберите один из требуемых. Внесите изменения в код, необходимые для вставки изображения: . Дополнительно можно включить разнообразные атрибуты, например, длину, ширину, выравнивание, размеры рамки, параметры всплывающего текста. Если сайт оснащен панелью управления, то для вставки изображений используйте файл-менеджером. В принципе, логотип можно опубликовать через внесение изменений в html-код. Функция становится доступной при нажатии кнопок «Источник» или «Отобразить в html». Видео по теме Источники: Одним из способов указания обладателя авторских прав на изображение, размещенное в интернете, является вставка логотипа в фотографию. В случае если логотип нужно вставить в большое количество снимков, эту несложную операцию можно автоматизировать. Вам понадобится Инструкция Загрузите снимок, в который нужно вставить логотип, в программу Photoshop, применив для этого опцию Open из меню File. Использовав опцию Place из того же меню, вставьте логотип в фотографию
. После этого действия файл со снимком будет состоять из двух слоев, доступных для независимого редактирования. При необходимости измените размер логотипа
. Для этого передвиньте один из узлов, находящихся по углам рамки, окружающей логотип. Если вставленное изображение превышает размер фотографии, измените масштаб картинки через палитру Navigator таким образом, чтобы в окне открытого документа были видны границы рамки трансформации. Как правило, логотипы сохраняются в файлы psd, png, eps или tiff с прозрачным фоном. Если в вашем распоряжении оказался логотип на цветном фоне, уберите его, выделив инструментом Magic Wand Tool. Сохраните файл с логотипом на прозрачном фоне для дальнейшей работы. В случае если логотип выглядит ярче изображения на фотографии, уменьшите непрозрачность слоя с логотипом, изменив в палитре слоев величину параметра Opacity. Примените опцию Save for Web из меню File для сохранения фотографий с логотипом. Если вам требуется добавить логотип к трем или пяти фотографиям, каждый снимок можно обработать вручную. Однако логотипа
в несколько десятков снимков лучше автоматизировать процесс. Соберите все фотографии в одну папку и создайте новую папку, в которую будут сохранены снимки с логотипа
ми. Создайте экшен с последовательностью команд, необходимых для вставки логотипа
в снимок. Для этого используйте кнопку Create new action из палитры экшенов. Если этой палитры не видно в окне программы, откройте ее опцией Actions из меню Window. Укажите название нового экшена. Начните запись экшена нажатием на кнопку Begin recording. Выполните все необходимые для вставки логотипа
действия, начиная с открытия файла со снимком в графическом редакторе. После сохранения результата обработки остановите запись, кликнув по кнопке Stop recording. Опцией Batch группы Automate из меню File откройте окно настроек пакетной обработки. Укажите название экшена, который будет использоваться при обработке снимков, папку с исходными файлами и папку для сохранения отредактированных изображений. После нажатия на кнопку ОК начнется обработка снимков. Источники: Создание простейшего сайта
доступно даже новичку. Знание порядка действий и применяемых при создании страниц программ позволит начинающему веб-мастеру быстро справиться со стоящими перед ним задачами. Инструкция Прежде всего, вам понадобится HTML-редактор. Например, Cute Html - это простой и удобный редактор с подсветкой синтаксиса, для создания первых страниц используйте именно его. Создавая код
в редакторе, вы сможете проверять его работоспособность в браузере, такой подход позволит вам овладеть азами HTML. После того, как вы разберетесь с основными правилами верстки, можно перейти к визуальному конструктору сайтов Dreamweaver, позволяющему создавать проекты любой сложности. После создания код
необходимо разместить в сети. Для его размещения вам потребуется хостинг. Новичку целесообразно воспользоваться бесплатным хостингом – например, http://narod.yandex.ru/. Данный сервис работает уже очень давно и прекрасно себя зарекомендовал. Чтобы получить место для сайта
, вам достаточно зарегистрировать на Яндексе почтовый ящик. Имя почтового ящика будет соответствовать доменному имени сайта
. Например, имя вашего ящика site2012. В этом случае адрес вашего сайта
будет таким: http://site2012.narod.ru/index.html. Обратите внимание, что главная страница имеет название index.html – это традиционное название главной страницы сайта
. Сохраните страницу, которую вы создали, под этим именем. Затем зайдите в панель управления вашим аккаунтом, откройте «Управление файлами». Найдите опцию добавления файлов, нажмите кнопку. После этого вы сможете выбрать на компьютере файл главной страницы и загрузить его. Обратите внимание на то, что файл должен быть загружен в корневую папку. Если у вас на странице есть изображения, их тоже необходимо загрузить на хостинг. При этом в код
е главной страницы к этим файлам должен быть прописан правильный путь, в противном случае вместо рисунков на странице будут открываться красные крестики. Целесообразно для рисунков и других файлов создать на хостинге отдельную папку – например, files. После загрузки главной страницы она тут же начнет открываться по своему адресу. Если ваш сайт состоит из нескольких страниц, загрузите и их. Обратите внимание Перед загрузкой страниц еще раз проверьте правильность путей для элементов меню и кнопок навигации. После загрузки обязательно протестируйте работоспособность всех элементов сайта. Для вставки с логотипом вашего сайта существует два способа. Один из них подразумевает создание файла иконки в корневом каталоге, а другой – вставку кода при помощи специального редактора. Вам понадобится Инструкция Откройте корневой каталог вашего сайта
. Создайте в нем файл с названием favicon.ico. Данный файл будет поддерживать отображение значка вашего сайта
перед адресной строкой в браузере. В случае, если иконка вашего сайта
не готова, создайте ее при помощи программы Adobe Photoshop, предварительно скачав соответствующий плагин, или другого графического редактора, который поддерживает работу с таким типом файлов, например, Microangelo, QTam Bitmap to Icon, Axialis IconWorkshop. Предварительно проверьте работу в разных браузерах, не только касательно отображения иконки сайта
в адресной строке, но и в каталоге «Избранное». Photoshop предназначен для работы с растровыми файлами, но имеет возможность выполнения операций и с векторными форматами.
В этом уроке по работе с фотошопом
мы продолжим знакомиться с работой в фотошопе с файлами, имеющий векторный формат и рассмотрим вопрос как в фотошопе вставить логотип
. Логотипы практически всегда имеют векторный формат, в нашем случае расширение фала логотипа ".EPS
".
Откроем исходное изображение.
Вставим логотип в векторном формате в наше изображение. Для чего перейдём в "Файл - Поместить
".
Откроется окно "Поместить
", в котором находим на нашем компьютере логотип и нажимаем "Поместить
".
Логотип помещается на фото вместе с вот такой рамкой.
Выводим курсор мыши за любой угол, он принимает вид двунаправленной стрелки. Разворачиваем логотип так, что верхняя горизонтальная рамка была параллельна линии на дне бассейна.
Правой кнопкой мыши щёлкаем внутри рамки и в раскрывшемся списке выбираем пункт "Наклон
".
Берёмся за любой угловой маркер и горизонтальные стороны рамки стараемся расположить параллельно вертикальным линиям на дне бассейна.
Помещаем логотип на изображение - Enter
.
Переходим в "Фильтр - Искажение - Рябь
".
Подбираем необходимые параметры. Вносимые изменения видны в окне предварительного просмотра фильтра.
Вот что получилось на данном этапе.
Чтобы логотип более органично вписался в фотографию бассейна, меняем режим наложения на "Яркий свет
" и уменьшаем непрозрачность верхнего слоя до необходимой величины, которую определяем визуально. Для Вашей фотографии может подойти другой режим наложения, поэтому просто переберите их.
Получаем вот такой результат.
Чтобы ещё более сделать эффект реальным мне надо применить деформацию к логотипу. Но этот пункт свободного трансформирования для векторных объектов недоступен. Поэтому я правой клавишей мыши щёлкаю по верхнему слою и в раскрывшемся списке выбираю пункт "Растрировать слой
".
Вызываем свободное трансформирование - Ctrl+T
. Правой кнопкой мыши щёлкаем внутри рамки трансформации и в раскрывшемся списке выбираем пункт "Деформация
".
Совершенно произвольно исказим сетку и соответственно сам логотип для того, чтобы он выглядел более реалистично в нашем коллаже. Применяем трансформирование - Enter
.
Логотип и favicon— это несомненно очень важный момент в создании сайта и блога. Ведь логотип выполняет функцию привлечение внимания покупателей, а яркий оригинальный дизайн логотипа выгодно выделит вас на фоне других организаций. Также логотип является гарантом профессионализма и качества сотрудников организации, он вселит уверенность в посетителя сайта и потребителя товара, не заставляя сомневаться в выгодности вашего сотрудничества. Вам необходимо сделать логотип для сайта? Тогда читайте дальше. Создание логотипа при помощи профессионалов обходится организациям порой в солидную сумму. Конечно, ведь только так можно рассчитывать на непревзойденное качество и оригинальность, а ваша задача заключается только в описание некоторых критериев для работы. Но далеко не у всех есть возможность, а порой, желание платить за такой вид услуг, ведь сами могут с воображением подойти к делу. А неумение пользоваться соответствующим программным обеспечением не является непреодолимой преградой для создателя своего логотипа, ведь несомненный плюс такого подхода в том, что только вы сами знаете, что хотите получить в конце. Создать логотип самому при помощи графических редакторов и программ Вы можете начать процесс с создания вашего логотипа при помощи графических редакторов, таких как: Adobe Photoshop, Это бренды графического дизайна, в их редакторах вы найдете все необходимые инструменты для работы, сможете действовать без шаблонов, начать с чистого листа, самим подобрать шрифт для надписей (если такие имеются), вставить картинку или фото, сделать нужные размеры. Помимо всего этого в них вы найдете возможность создавать и корректировать самим визуальные эффекты, количеством которых можно не ограничиваться, что является самым важным в работе дизайнера. Но, как и везде, здесь есть некоторые неудобства для владельца, ведь вам необходимо будет тратить время на их осваивание, проявив порой недюжинное терпение. Поэтому есть несколько программ которые специализированы на логотипах, и их освоение занимает меньше времени: Но в современном мире, живущем в очень быстром ритме развития, время очень дорого, и если у вас вообще нет желания тратить на освоение программ, то вы можете найти другие способы. Современные онлайн-сервисы по созданию логотипов
При помощи современных бесплатных онлайн-сервисов вы сможете создать собственный логотип, не расходуя значительных сумм и массу времени. Максимально упрощенная схема действий и использование шаблонов, которые вы можете изменять на ваш вкус, помогут вам создать его за считанные минуты. Само собой, ваш логотип не будет претендовать на абсолютно авторскую работу, но наличие такого инструмента в интернете как бесплатные онлайн-сервисы — это своеобразная палочка-выручалочка для владельцев сайтов и фирм. Пошаговая инструкция, масса шаблонов, наличие инструментов для редактирования, наличие эффектов делает процесс создания логотипа не только удобным, но и очень занимательным. Вам, несомненно, доставит масса удовольствия самому корректировать свой логотип и видеть все соответствующие изменения, возможно, вы сами захотите создавать логотипы для других фирм. Вот список некоторых, которые помогут вам в этом: В этом нам помогут генераторы иконок Как вставить favicon или логотип в сайт, способ который работает для всех конструкторов, так что можно ознакомить вас с этой методикой на WordPress. Для начала выбираем логотип, причем разрешение используемое в нем должно быть в среднем 40х40 пикслей, даем ему имя латинскими буквами и закидываем на хостинг вашего сайта — в админ-панели вашего сайта или любом используемом вами файловом менеджере, например TotalCommander и FileZilla, идем в Public_html/папка с доменным именем сайта, и закидываем туда логотип. Дальше В админ-панели WordPress находим «Заголовок» (header.php) перед нами открывается текстовый редактор, в нем находим место () и вставляем туда код (favicon — это название вашего логотипа, ico — его формат) Закрываем код тегом . Если логотип в другой папке укажите путь к ней в href, а если она не в формате.ico то замените название формата на type поменяв x-icon. Остается только обновить и радоваться. Самый простой способ установки логотипа на сайт — это плагины для конструкторов. Они помогут вам установить логотип на сайт не прибегая к изменению в кодах HTML и PHP, не потратив при этом значительных усилий. Но единственный минус в том что у каждого конструктора логотипов свои плагины. Например, для WordPress это Logo Slider на http://wordpress.org/plugins/logo-slider/. Остается только разобраться с вашим плагином, и собственноручно поменять логотип — при помощи плагинов это делается очень легко и быстро.
Содержимое сайта
Урок сделан в версии фотошопа CS3
, но может быть выполнен в любой версии фотошопа.