Как на сайт вставить логотип


Как установить логотип сайта

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

Пример логотипа, установленного на сайт.

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

Если у Вас есть навыки работы в программе Photoshop, то Вы без труда сможете нарисовать собственный уникальный логотип. Если таких навыков нет, то можно воспользоваться специальными онлайн-сервисами создания логотипов. Их поиск в Интернете не составит никаких проблем.

После создания логотипа сохраняем его изображение у себя на компьютере. Теперь нужно залить эту картинку на хостинг. Для этого нужно зайти на тот хостинг, которым Вы пользуетесь, перейти в файловый менеджер и найти папку /wp-content/themes/название вашей темы/images. В нее и загружаем созданное изображение логотипа.

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

Однако не во всех темах есть поддержка логотипа. В таких случаях необходимо указать его наличие прямо в коде. Заходим в консоль, выбираем раздел «дизайн» и пункт «редактор». Здесь нужно выбрать пункт «Заголовок (header.php)».

Чтобы узнать, куда именно вставить логотип, нужно посмотреть имеющийся код. Ищите в нем следующие теги: div id=”logo”, div class=”header-title”, div id=”site-logo”, и другие, в которых название в кавычках можно примерно перевести как «логотип».

Сразу после этого тега, т.е. после символа > и необходимо ввести путь к изображению. Делается это с помощью тега <img src=””>. В кавычках и указывается полный путь к месту расположения файла логотипа на хостинге.

Вот так просто можно добавить свой оригинальный логотип для сайта и сделать его еще привлекательнее.

Развивайте и продвигайте свой сайт по нашей программе, став студентом нашего Тренинг-Центра.

Делитесь информацией с друзьями

favicon - Как вставить логотип в заголовок HTML-страницы?

Переполнение стека
  1. Около
  2. Товары
  3. Для команд
  1. Переполнение стека Общественные вопросы и ответы
  2. Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
  3. Вакансии Программирование и связанные с ним технические возможности карьерного роста
  4. Талант Нанимайте технических специалистов и создавайте свой бренд работодателя
.

Как добавить изображения и логотип сайта на свой веб-сайт с помощью Dreamweaver CS5 (thesitewizard.com)

Глава 2: Вставка изображений, графики и фотографий на ваши веб-страницы


Кристофер Хенг, thesitewizard.com

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

Если вы только что дошли до этой главы и в остальном еще не знакомы с веб-редактором Dreamweaver, вы можете начните с первой главы этого Dreamweaver Учебная серия. Я предполагаю, что вы уже выполнили все шаги, описанные в главе 1, а именно создали веб-сайт из 2 столбцов, добавили контент в столбец основного контента и опубликовали предварительную версию вашей домашней страницы в Интернете.

(На самом деле, если вы читаете эту статью только для того, чтобы понять, что такое создание веб-сайта, вы можете найти статья Как Чтобы начать / создать свой собственный веб-сайт: Руководство для начинающих от А до Я, чтобы быть более полезной и информативной отправной точкой.)

Цель этой главы

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

Как получить изображения для вашего веб-сайта

Вам понадобятся следующие изображения для вашего сайта.

  1. Логотип веб-сайта

    Если вы просмотрите большинство веб-сайтов в Интернете, вы заметите, что все они имеют какой-то логотип на своих страницах. Например, логотип thesitewizard.com можно найти в верхнем левом углу его страниц. Поскольку вы будете добавлять логотип для вашего веб-сайта в этой главе, вам понадобится уникальное изображение, которое будет служить этим логотипом, если вы собираетесь завершить эта глава.

    Те, кто создает веб-сайт для компании, у которой уже есть логотип, могут просто использовать цифровую копию этого логотипа для сайт. Цифровая копия должна быть в графическом формате GIF, JPG или PNG. Если ваш логотип находится в другом формате файла, получите редактор изображений, чтобы преобразовать изображение в один из этих трех форматов. Вы можете найти множество бесплатных редакторов изображений, перечисленных на Страница бесплатных редакторов изображений и фотографий. Если у вас нет цифровой копии, но есть печатная версия, отсканируйте или сделайте цифровую фотографию этого логотипа и используйте это изображение.Опять же, отсканированное изображение или цифровая фотография должны быть в формате JPG, PNG или GIF. Обычно это не должно быть проблемой, поскольку большинство современных камер и сканеров могут выводить файлы JPG.

    Если у вас еще нет логотипа, вам следует создать его для использования на своем веб-сайте. Я не рекомендую вам использовать бесплатных изображений, которые можно найти в Интернете, даже если владелец авторских прав на это изображение говорит, что вы можете использовать его на своем сайте бесплатно. Логотипы похожи на символ бренда для вашего сайта, поэтому вам захочется чтобы они были уникальными для вашего сайта.Чтобы создать свой собственный логотип, либо создайте его прямо на своем компьютере, либо нарисуйте. на листе бумаги и отсканируйте его. Для тех, кто раньше не создавал логотип и не знает, как это сделать, взгляните на статью Как быстро и легко создать логотип для вашего сайта. https://www.thesitewizard.com/webdesign/make-site-logo-banner.shtml

    Независимо от того, как вы получите свой логотип, нарисовав его самостоятельно или отсканировав логотип с вашего фирменного бланка, вы, вероятно, захотите изменить размер своего логотипа, чтобы он соответствовал вашей веб-странице.Поскольку шаблон веб-страницы, который вы используете, из Глава 1 дает вам всю ширину страницы для логотипа, ваш логотип может быть довольно широким. То есть вам не нужно сделать его таким же маленьким, как логотип thesitewizard.com, который я создал так, чтобы он мог втиснуться в угол.

    Какова же тогда ширина логотипа? Нет жестких правил. Мы будем (необязательно) центрировать ("центрировать" в Американский английский) ваш логотип на странице, поэтому не беспокойтесь о том, чтобы он идеально поместился между левым и правым краями.Здесь нет пути в любом случае, так как ширина вашей страницы будет варьироваться в зависимости от размера монитора вашего посетителя. Центрирование логотипа означает, что даже если ваше изображение не очень широкое, оно все равно может хорошо выглядеть на странице. Например, Логотип Google по умолчанию на самом деле довольно узкий, не существенно шире, чем у thesitewizard.com, но все равно выглядит хорошо на их странице, потому что они поместили его в центр. Если вы полностью потерялись, просто выберите случайный размер (например, 450 пикселей в ширину и 100 пикселей в высоту) и работать оттуда.Если это не очень хорошо, вы всегда можете вернуться позже измените размер изображения в редакторе изображений и повторно вставьте его на свою веб-страницу.

  2. Фотографии продуктов и другие типы изображений (необязательно)

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

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

    Например, если вы продаете компьютерное программное обеспечение, вы можете нарисовать изображение коробки с программным обеспечением для отображения на вашем компьютере. веб-сайт либо с помощью программы для рисования как те, которые я упомянул выше, или с помощью специализированного программного обеспечения для рисования 3D-блоков.Бесплатные версии такого ПО можно найти на Коробка бесплатного программного обеспечения для 3D Страница создателей изображений.

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

    Примечание: изображение моего Как создать Руководство по веб-сайту здесь - всего лишь иллюстрация этой концепции. Такой книги на бумажном носителе не существует, поэтому не пишите мне, чтобы спросить где его можно купить. Если вы хотите его прочитать, полное руководство доступно онлайн (и вы можете прочитать это бесплатно, ничего покупать не нужно) на https: // www.thesitewizard.com/gettingstarted/startwebsite.shtml

Как добавить логотип на веб-сайт Dreamweaver CS5

  1. Создайте папку для изображений в папке локального веб-сайта

    Запустите Dreamweaver CS5, если он еще не запущен.

    Теперь вам нужно создать папку для хранения изображений, которые вы хотите использовать на своем веб-сайте. Да я тебя уже знаю ваши изображения хранятся в какой-то другой папке на вашем компьютере. Однако, чтобы использовать эти изображения на своем веб-сайте, вам нужно будет скопировать эти изображения в иерархию папок, содержащую остальные файлы вашего веб-сайта, или Dreamweaver не узнает их и не разместит на вашем сайте.Например, если папка вашего локального веб-сайта, которую вы создали в глава 1, это называется "c: \ Users \ chris \ mywebsite", тогда вам нужно будет скопировать эти изображения либо в эту папку, либо во вложенную папку например "c: \ Users \ chris \ mywebsite \ images". Для целей этого урока мы создадим подпапку «images». (Примечание: это верно независимо от того, используете ли вы Windows или Mac OS X.)

    Посмотрите на панели в крайнем правом столбце Dreamweaver. Вы должны увидеть вкладку «ФАЙЛЫ» в середине окна.(Это должен быть рядом с вкладкой с надписью «АКТИВЫ».) На вкладке ФАЙЛЫ вы должны увидеть окно со списком с двумя перечисленными файлами: index.html и twoColLiqLtHdr.css. Вы создали эти файлы в глава 1.

    Наведите указатель мыши на пустое место под двумя файлами, но все еще на панели ФАЙЛЫ. Щелкните правой кнопкой мыши: то есть щелкните правой кнопкой мыши. Должно появиться меню. Щелкните в этом меню пункт «Новая папка». Dreamweaver создаст новая папка, временно названная "без названия", под двумя вашими файлами."Без названия" в настоящее время должен быть выделен, что позволит вам изменить его название. Заменить существующее имя на «изображения», без кавычек и полностью прописными (строчными буквами), и нажмите клавишу ENTER (или клавишу RETURN, если вы используете Mac). Имя папки теперь должно быть изменено на «изображения».

  2. Скопируйте свои изображения в папку изображений вашего локального веб-сайта

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

    Например, если вы используете Windows, попробуйте это. Щелкните правой кнопкой мыши папку с изображениями в Dreamweaver. Меню будет появляться. В этом меню выберите пункт «Исследовать ...». Откроется окно, в котором будет показано содержимое этого папка. Пока он пуст, так как вы еще ничего не скопировали. Теперь щелкните меню «Пуск» Windows и пункт «Компьютер» (для Windows Vista и Windows 7; в Windows XP он называется «Мой компьютер») в появившемся меню. Новое окно откроется, предоставляя вам, среди прочего, обзор всех накопителей на вашем компьютере.В этом втором окне перейдите к месту, где вы храните свои изображения. Выберите все изображения, которые вы хотите использовать на вашем сайте. Щелкните правой кнопкой мыши этот выбор и выберите «Копировать» в появившемся меню. Перейти в другое окно (тот, который вы открыли из Dreamweaver). Щелкните правой кнопкой мыши пустое место в этом окне и выберите в меню «Вставить». что появляется. Ранее выбранные изображения будут скопированы в папку изображений на вашем локальном веб-сайте. Теперь вы можете закрыть оба эти окна.Не закрывайте сам Dreamweaver. Он вам все еще нужен.

  3. Откройте свою веб-страницу

    Если вы закрыли Dreamweaver (то есть вышли из программы) после завершения главы 1, вероятно, у вас нет index.html, открытый в Dreamweaver при его перезапуске в этой главе. Чтобы повторно открыть созданный ранее файл, дважды щелкните элемент index.html на этой вкладке ФАЙЛЫ. Dreamweaver загрузит вашу домашнюю страницу и отобразит ее, как и раньше.

  4. Удалить существующий заполнитель логотипа

    Щелкните правой кнопкой мыши прямоугольное поле «Insert_logo (20% x 90)».Появится меню. Нажмите «Удалить

.

Как добавить логотип сайта и другие изображения на ваш сайт в Dreamweaver CS5.5 (thesitewizard.com)

Глава 2: Как вставлять изображения, фотографии и логотипы


Кристофер Хенг, thesitewizard.com

Если вы похожи на большинство веб-мастеров, скорее всего, вы захотите разместить несколько изображений на своих веб-страницах, будь то фотографии или нарисованные от руки изображения. По крайней мере, вам, вероятно, понравится какой-нибудь логотип, то, что идентифицирует ваш сайт и отличает его от других сайтов.Эта глава содержит пошаговые инструкции по добавлению таких изображений на страницы вашего сайта с помощью Dreamweaver CS5.5.

Обратите внимание, что это вторая глава Dreamweaver CS5.5 Руководство. Если вы прибыли сюда не с сайта, возможно, вам будет легче следить за что я скажу, если вы начнете с глава 1. Фактически, если вы новичок в создании веб-сайтов, вам действительно следует начать с самого начала, прочитав Как создать вебсайт. В этой статье описаны все этапы создания сайта, в том числе те, которые я освещаю в этих руководствах по Dreamweaver.

Цель этой главы

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

Как получить изображения для вашего сайта

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

  1. Логотип сайта

    Многие (если не большинство) веб-сайтов в Интернете имеют на своих страницах какой-то логотип.Например, Логотип thesitewizard.com можно найти в верхнем левом углу его страниц. (Если вы не уверены о чем я говорю, просто прокрутите вверх, чтобы посмотреть.) Поскольку вы будете вставлять логотип на свой веб-сайт, вам понадобится какое-то изображение, которое может работать как логотип.

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

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

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

    Какой бы метод вы ни использовали для получения логотипа для своего сайта, убедитесь, что файл изображения для логотипа находится в формат PNG, JPG или GIF. Неважно, какой из этих трех форматов вы используете, но вы не должны использовать какой-либо другой формат, иначе ваш логотип не будет отображаться должным образом у многих ваших посетителей браузеры.

    Хотя ваш логотип, вероятно, не должен быть настолько большим, чтобы заполнять монитор компьютера, на самом деле нет фиксированного правила для размера логотипа. Взгляните на мою статью Как Создайте логотип для своего сайта. Быстрый и простой способ обсудить размеры логотипа, если вы не знаете когда начать. И не волнуйтесь; ваш логотип не обязательно должен быть таким уж маленьким, как у thesitewizard.com. У меня есть такого размера, потому что я хотел, чтобы он умещался в небольшом углу моей страницы. У вас есть пространство всей вершины горизонтальная полоса вашей веб-страницы, с которой можно поиграть.И нет, заливать всю горизонталь верхней полосы тоже нет. Я научу вас, как можно центрировать («центрировать») логотип позже в этой главе для тех, кто из вас, кому нужно.

  2. Изображения или фотографии ваших товаров, вас самих и т. Д. (Необязательно)

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

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

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

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

    Обратите внимание, что изображение здесь моего How Руководство по созданию веб-сайта является лишь иллюстрацией этой концепции.Такой книги на бумажном носителе нет, поэтому, пожалуйста, не пишите Я спрашиваю, где это можно купить. Руководство доступно онлайн полностью, и вы можете бесплатно прочитать его по адресу https://www.thesitewizard.com/gettingstarted/startwebsite.shtml

Использование изображений под контролем менеджера сайта Dreamweaver

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

Вот как это сделать.

  1. Создайте подкаталог для изображений в папке локального веб-сайта

    Запустите Dreamweaver CS5.5, если вы еще этого не сделали.

    Посмотрите на правую часть окна Dreamweaver. Примерно посередине правого столбца вы должны см. панель с двумя вкладками, одна с «ФАЙЛАМИ» и затемненная вкладка со словом «АКТИВЫ». (Если вместо вкладки АКТИВЫ вкладка ФАЙЛЫ затемнена, щелкните ее, чтобы активировать.)

    На панели ФАЙЛЫ должен отображаться список файлов, связанных в настоящее время с вашим сайтом. В настоящее время там В основной части этой панели должно быть два файла, а именно «index.html» и «twoColLiqLtHdr.css». Вы создал index.html в главе 1, а Dreamweaver создал для вас файл twoColLiqLtHdr.css когда вы решили создать веб-сайт из двух столбцов.

    Наведите указатель мыши на пустое место под этими двумя именами файлов на панели. Щелкните правой кнопкой мыши кнопка. («Щелчок правой кнопкой мыши» означает щелчок правой кнопкой двухкнопочной мыши.Пользователи Mac, которые только имитировать щелчок правой кнопкой мыши, удерживая нажатой клавишу Ctrl на клавиатуре. при нажатии кнопки мыши.) Должно появиться меню. Щелкните строку «Новая папка» в этом меню.

    Если вы используете Mac и обнаружите, что пункт «Новая папка» во всплывающем меню отключен, нажмите клавишу ESC. чтобы избавиться от всплывающего меню. Затем на панели ФАЙЛЫ щелкните один раз в строке, начинается со слова «Сайт», чтобы выделить его. (Это самая верхняя строка над двумя именами файлов на панели).Затем переместите указатель мыши на пустое место под двумя именами файлов на панели и щелкните правой кнопкой мыши мышь. (Как и раньше, если вы не используете двухкнопочную мышь, а по умолчанию используете только одну кнопку, выполните Ctrl + щелчок для имитации щелчка правой кнопкой.) Появится всплывающее меню, на этот раз с интерактивным элементом меню «Новая папка».

    Dreamweaver создаст новый подкаталог (папку), который будет отображаться на панели ФАЙЛЫ как «без названия». Слово "без названия" в настоящее время должно быть выделено синим цветом с контуром прямоугольной рамки вокруг него. позволяя вам изменить имя.Замените «без названия» на «изображения» (без кавычек) и нажмите ENTER. клавиша (или клавиша RETURN, если вы используете Mac). Используйте маленькие (строчные) буквы для слов «изображения». и не вставляйте пробелы и не делайте ничего необычного с именем.

    Теперь папку нужно переименовать.

  2. Скопируйте изображения в папку изображений

    Поскольку ваша папка "images" находится в каталоге вашего локального веб-сайта вместе с остальной частью вашего файлы веб-сайта (например, index.html и twoColLiqLtHdr.css ") Dreamweaver рассматривает все, что папка images как принадлежащая вашему сайту. Это важно, потому что тогда вы сможете вставить изображения, расположенные в этой папке, на вашу веб-страницу, и он будет автоматически контролировать эту папку когда вы используете более продвинутые функции Dreamweaver в главе 7 этого руководства.

    Однако в настоящее время ваша папка изображений пуста. Сейчас мы это исправим.

    Щелкните правой кнопкой мыши папку «images» на панели FILES. В появившемся меню щелкните строку с надписью «Исследовать... " если вы используете Windows, или строку с надписью «Показать в Finder», если вы используете Mac OS X. (Это где-то внизу меню.)

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

    Откройте новое окно и перейдите в то место, где в настоящее время сохранены ваши изображения. Как вы это делаете, зависит от система в систему. Например, если вы используете Windows Vista или Windows 7, щелкните меню Пуск (круглая кнопка с логотипом Windows в нижнем левом углу дисплея компьютера), за которым следует строка «Компьютер» в появившееся меню.Должно появиться окно с обзором дисков и папок на вашем компьютерная система. Перейдите в папку, в которой вы сохранили логотип вашего сайта и другие изображения для твой сайт.

    Выделите все изображения в папке, которые вы хотите использовать на своем сайте. Щелкните правой кнопкой мыши этот выбор, и в появившемся меню нажмите «Копировать». Вернитесь в папку "images", которую вы открыли ранее. с помощью Dreamweaver «Исследовать» (или «Открыть в Finder», если y

.

Как легко сделать логотип с помощью Microsoft Word

Профессиональные графические дизайнеры будут издеваться.

Эксперт по Photoshop и Adobe Illustrator разобьет его.

Даже GIMP задается вопросом - а почему не я? Я свободен.Но когда вы не принадлежите к творческому сообществу, вы берете все необходимые инструменты, чтобы создать логотип в экстренной ситуации. Microsoft Word - не лучший выбор для рисования привлекательных логотипов. У него нет полномочий, чтобы занять место в линейке программного обеспечения для дизайна логотипов. Но может ли он сломаться? Давайте рискнем.

Почему стоит выбрать Microsoft Word для разработки логотипа?

Microsoft Office - это пакет программ для повышения производительности, а не набор инструментов для творчества.Microsoft PowerPoint был бы моим лучшим инструментом, если бы кто-нибудь приставил пистолет к моей голове. Но прежде чем мы полностью откажемся от Microsoft Word, рассмотрим следующие пять факторов в его пользу:

  • Это обычное дело, и его легче освоить.
  • Имеет многогранные инструменты, которые работают как с текстом, так и с изображениями.
  • Позволяет использовать страницу документа в качестве холста для перетаскивания фигур, SmartArt и значков.
  • Может объединять текст и изображения и объединять все в одно изображение.
  • В документах можно повторно использовать логотип непосредственно на странице или фирменном бланке.

Основные возможности Microsoft Word 2016 для разработки логотипов

Я не буду вдаваться в подробности всех возможностей графического рисования, которые Microsoft Word 2016 предлагает в таблице.Но краткие описания и связанные страницы справки должны помочь вам, если вы запутаетесь. Также на ленте есть полезный помощник Office под названием « Скажи мне, что ты хочешь сделать, », который работает как средство поиска пути.

Соблюдайте основные правила графического дизайна и расширяйте возможности Microsoft Word до его пределов.

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

Распознавание форм, которое преобразует рукописный рисунок в идеальную форму (только на сенсорном устройстве с Office 365).

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

Нарисуем простой логотип

Это простой логотип, к которому мы стремимся. Я позаимствовал этот простой рисунок у Shutterstock.Большинство объектов на векторной графике ниже можно продублировать в Microsoft Word. Может быть, не совсем… но достаточно близко, чтобы продемонстрировать Слово, можно достаточно сильно постараться!

Откройте новый документ.Перейдите на вкладку View и установите флажок Gridlines . С помощью сеток вы можете выравнивать фигуры и другие объекты в документах Word. Сетки можно просматривать только в режиме печати. Но будьте уверены - их нельзя распечатать.

Включите опцию Object Snapping .Щелкните изображение или объект. На вкладке Graphic Tools нажмите Align> Grid Settings . Включите оба выделенных параметра ниже для лучшего выравнивания графики в логотипе.

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

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

Вы можете нажать клавишу ALT , чтобы временно отменить предыдущие настройки при перетаскивании фигуры или объекта.

Приведенные выше настройки подготавливают наш документ для первой фигуры или объекта, который мы собираемся вставить.Мы собираемся использовать шрифты и базовые формы. Мы собираемся использовать некоторые из тех же приемов, которые использовались при создании блок-схемы в Microsoft Word 2013 путем выравнивания и форматирования различных фигур. Логотип будет выглядеть более художественным, чем бизнес-схема.

1. Вставьте фигуру для использования в качестве фона вашего логотипа.

Перейдите к Insert> Shapes и выберите фигуру Rectangle. Удерживайте SHIFT , чтобы нарисовать идеальный квадрат на документе Word, который теперь является вашим холстом.

Измените цвет холста.Дважды щелкните фигуру, чтобы отобразить группу Инструменты рисования> Стили формы на ленте. Здесь я использовал Shape Fill с выбором цвета и установил для Shape Outline значение «No Outline».

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

Вы также можете оставить фон для последней части дизайна.Это поможет вам использовать сетку вместо того, чтобы затемнять ее цветной заливкой фона.

2. Используйте более одной формы для создания составной формы.

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

Давайте попробуем с доступными формами Треугольника и Прямоугольника.

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

Сделайте копию первого треугольника и перетащите ее на противоположную сторону. Прикрепите каждый объект к другому. Подправьте каждую форму с помощью ручек, чтобы получить желаемую форму.

Установите контур фигуры с на Без контура для всех трех форм.

Выберите три разных объекта и выберите Group из контекстного меню. Затем установите для Shape Fill белый цвет.Вы также можете выбрать «Группа» в инструментах рисования. Он крайний справа.

Следующий шаг немного сложен.В отличие от PowerPoint, Microsoft Word не имеет возможности объединять и комбинировать фигуры. Мы должны творчески полагаться на использование другой формы меньшего размера (и другого цвета), чтобы создать полый шестиугольник с толстым контуром. Конечно, вы всегда можете создать многосторонний блок с формой линии и придать ему определенную толщину.

Создайте копию исходного шестиугольника и установите для заливки формы цвет фона.Поместите его поверх исходного шестиугольника. Вместо перетаскивания маркеров мне проще использовать более точные поля Размер на панели инструментов Рисование.

Поле «Размер» помогает вносить мелкие изменения в любой объект и всегда является лучшим вариантом для перетаскивания угловых маркеров.

Используйте другие формы для другой графики

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

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

Попробуйте карту персонажа

Карта символов Windows также является богатым источником символов, которые вы можете использовать в своих логотипах.Шрифты Webdings и Wingdings устанавливаются по умолчанию, и они могут предоставить вам некоторые творческие пути выхода на случай, если вы не получите правильную форму для использования.

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

Итак, установите шрифт вашего документа на Webdings. Откройте карту символов - введите карта в поле поиска на панели задач и выберите в результате карту символов .Скопируйте символ птицы из набора символов. Установите шрифт документа на Webdings. Вставьте текстовое поле в нужное место и пропустите птичку в текстовом поле. Как и любому другому шрифту, вы можете задать ему цвет - в данном случае белый.

Вторая птица справа - зеркальное отображение первого символа.См. Эту статью поддержки Microsoft Word, чтобы узнать, как перевернуть текстовое поле и создать его зеркальное отображение.

Теперь большая часть логотипа обрела форму.

3.Добавьте текст и текстовые эффекты.

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

Сопряжение шрифтов - это искусство. Я не смогу здесь подробно останавливаться, но есть такие сайты, как Font Pair, I Font You и Typ.io, который может вам помочь. Вам также не нужно чувствовать себя вынужденным шрифтами, которые есть на вашем компьютере. Есть море бесплатных шрифтов, которые можно скачать одним щелчком мыши.

4. Сгруппируйте текст и изображение вместе.

Выберите каждый отдельный объект в логотипе (при выборе нажмите клавишу SHIFT ).Соедините их вместе с помощью команды Group в контекстном меню или на ленте.

5. Сохраните ваш логотип как картинку

Вы должны сохранить логотип в виде файла изображения, прежде чем вы сможете его использовать.В Microsoft Word нет прямого способа сохранить это как файл JPEG или PNG. Но у него есть инструмент, которым вы можете воспользоваться.

Возьмите Screen Clipping .Вы можете использовать любой инструмент для создания снимков экрана, который сделает эту работу за вас. Но для легкого использования откройте новый документ Word. Перейдите в Вставка> Снимок экрана . Выберите Screen Clipping и выберите логотип в документе Word. Логотип вставляется как снимок экрана во второй только что открытый документ Word.

Все еще не уверены? На этой странице поддержки Microsoft более подробно описаны шаги по вырезанию экрана.

Используйте Windows Snipping Tool. Этот менее известный инструмент в панели инструментов Windows 10 можно запустить из панели поиска. Наберите Clipping Tool, чтобы он появился.Он работает как простая утилита для захвата экрана.

Чтобы сделать снимок экрана, выберите Новый . Выберите часть экрана, которую вы хотите захватить.Выберите Rectangular , потянув вниз стрелку на кнопке New.

Другие ресурсы Microsoft Word, которые можно использовать для логотипа

Иконы. Если у вас есть обновленная версия Microsoft Word по подписке на Office 365, вы можете найти новую библиотеку значков в меню «Вставка». Выбирайте из таких категорий, как люди, технологии или бизнес. Щелкните значок, который, по вашему мнению, можно творчески использовать в логотипе.

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

Я бы попытался избежать WordArt и упростить задачу, используя творческое сочетание художественных шрифтов.А затем усиление тонкими текстовыми эффектами.

Microsoft Word не для графического дизайна. Но…

С вашим первым логотипом в Microsoft Word вы поймете, что это программное обеспечение не предназначено для графического редактора.Его даже не рекомендуется использовать в качестве программы для верстки страниц. Microsoft Word хорош для набора слов и создания красивых профессиональных документов. Тогда какова цель этого урока?

  1. Вы можете быстро изучить свои творческие способности.
  2. Проведите мозговой штурм и сделайте быстрый макет.
  3. Используйте процесс разработки логотипа, чтобы понять ограничения Word (и особенности дизайна).

Я нарисовал в Word несколько логотипов для своего личного блога просто для развлечения или практики. Это было упражнение в использовании ограничений. Хороший дизайн логотипа - это всегда простота (принцип KISS). Использование правильной пары шрифтов само по себе может расширить ваше воображение. А в кратчайшие сроки вы можете сделать привлекательный логотип с помощью бесплатных сайтов-генераторов логотипов.Кроме того, с помощью подходящих приложений вы можете быстро создавать все типы графики.

Изображение предоставлено Rawpixel.com через Shutterstock.com

Первоначально написано Марком О'Нилом 12 августа 2009 г.

onenote-features 12 малоизвестных функций Microsoft OneNote, которые вам обязательно понравятся

Microsoft OneNote бесплатен и содержит множество функций.Вот несколько небольших функций, которые помогут вам повысить продуктивность ведения заметок!

Об авторе

Сайкат Басу - заместитель редактора по Интернету, Windows и производительности. После того, как он избавился от грязи MBA и десятилетней маркетинговой карьеры, он теперь увлечен тем, что помогает другим улучшить свои навыки рассказывания историй.Он ищет пропавшую оксфордскую запятую и ненавидит плохие скриншоты. Но идеи фотографии, фотошопа и производительности успокаивают его душу.

Подробнее о Сайкат Басу
Подпишитесь на нашу рассылку новостей

Подпишитесь на нашу рассылку, чтобы получать технические советы, обзоры, бесплатные электронные книги и эксклюзивные предложения!

Еще один шаг…!

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

.

Смотрите также

Поделиться в соц. сетях

Опубликовать в Facebook
Опубликовать в Одноклассники
Вы можете оставить комментарий, или ссылку на Ваш сайт.

Оставить комментарий