Масштабирование логотипа как правильно сделать
Добавил пользователь Morpheus Обновлено: 04.10.2024
При разработке логотипа существует ли минимальный размер холста, который следует использовать для сохранения качества при его увеличении или уменьшении?
Очевидно, что размеры холста зависят от формы логотипа, но есть ли предложенный размер?
Обычно логотип разрабатывается в векторной программе, такой как Illustrator, поэтому его можно масштабировать в соответствии с различными потребностями, требуемыми заказчиком. Например, логотип обычно заканчивается на:
- Визитки
- Фирменные бланки / конверты
- Футболки
- Веб-заголовки / веб-страницы
Поскольку теоретически вы собираетесь проектировать в формате, который можно масштабировать без потерь (вектор), размер, с которым вы работаете, должен быть тем, с чем вам удобно (помните, что если вы добавите слишком много деталей в свой логотип, он будет потерян когда это уменьшено, чтобы соответствовать на визитной карточке).
Если вектор не работает для вас (например, у вас нет Illustrator / вы не хотите изучать другие программы / строго запрещены вашей религией), вам следует попытаться выяснить, где будет использоваться логотип. Если бы это было только на веб-сайте, я бы попытался выяснить самую большую итерацию логотипа и поработать в таком размере. Если он будет напечатан, вы должны выяснить, где он будет напечатан (визитка, футболка, мятная банка, наклейка и т. Д.), И снова работать с самым большим физическим размером (то есть, x дюймов на y дюймов) в минимум 300 точек на дюйм.
отпечатки на афишах установлены на уровне 50 ppi, а не 300 ppi. отпечатки ручного формата - 300ppi, небольшие 11x14, а плакаты 24x36 - около 250-300ppi, а более крупные постеры размером около 36x48 - 100-200ppi. это не имеет ничего общего с размером файла, но расстояние просмотра. Вам просто не нужно печатать фотографии высокого качества для рекламы. Музейные или художественные гравюры - это другой предмет.
Можно добавить, что, учитывая интенсивное и растущее использование мобильных устройств, вам нужно рассмотреть подходящую векторную версию вашего логотипа, иначе она может выглядеть очень плохо в мелком масштабе на чем-то вроде iPhone / iPad с Retina. Большинство клиентов захотят веб-версию логотипа, и jpg / png больше не будет ее сокращать. Я работаю графическим дизайнером более 25 лет, и нас тогда учили векторизации - все мои логотипы задуманы с учетом этого, работают в черно-белом (а также цветном) формате, и я предоставляю файл SVG для веб-использования.
Несмотря на то, что вы должны создавать векторные изображения, которые можно масштабировать до любых размеров, имеет смысл создавать логотип размером порядка нескольких дюймов / см.
Это просто так, что когда вы изначально импортируете его в масштабе 100% в пустое поле на макете страницы в масштабе 100%, оно не настолько велико, что вы видите только пустое пространство в верхнем левом углу логотипа. Обычно вам нужно увеличивать или уменьшать масштаб, или просто автоматически масштабировать, чтобы соответствовать размеру коробки, но это просто позволяет избежать путаницы в секунду или две.
Вариантные логотипы иногда создаются для очень больших или очень маленьких приложений, но это довольно редко.
Как уже упоминали другие, логотипы всегда должны быть разработаны в векторном формате для масштабирования, вышивания, экранов . вы никогда не знаете, что клиент сделает с ним позже. Но я всегда использую стандартный горизонтальный размер письма для отображения логотипа или вариантов для клиента. Я нахожу это хорошим размером, когда они звонят и хотят послать pdf. Он хорошо умещается на экране, и если они его распечатывают, в принтере обычно есть листы формата Letter, так что им будет проще. Клиенты не так дружелюбны к компьютерам, как вы иногда думаете, поэтому, давая им что-то, о чем им не нужно думать, вы делаете вещи более плавными. Все предпочтения, хотя.
Всегда рекомендуется создавать логотип в векторной программе, но у вас определенно должен быть больший размер холста, например, 90% размера экрана, КОГДА 100% НЕ УВЕЛИЧИВАЕТ, какое приложение вы используете. Конечно, вы можете увеличить размер логотипа, если используете векторную программу, такую как ILLUSTRATOR. Но когда вы начинаете создавать логотип, большую часть времени вы работаете над формированием объекта, таким как настройка опорных точек, линий или кривых, и в этом процессе вы также используете ваши клавиши со стрелками для перемещения опорных точек вверх и вниз. Поэтому, если вы используете очень маленький или очень большой размер холста, тогда вы столкнетесь с некоторой проблемой при настройке этих опорных точек логотипа.
Поэтому я НАСТОЯТЕЛЬНО рекомендую вам использовать размер холста вашего логотипа в соответствии с вашим рабочим экраном (но не менее 512 пикселей по ширине или высоте)
Я думаю, вы говорите, что чем больше вы делаете свой логотип в программном обеспечении, тем более точный контроль вы бы имели с опорными точками по отношению к общему масштабу. Это правда . хотя не обязательно прямая зависимость от размера холста.
Но очевидно, что если у вас размер холста 1024x1024px, вы не будете рисовать свой ЛОГОТИП только в области 100x100px или на небольшой площади
Я бы не сказал, что это очевидно. Это имеет смысл, но не всегда верно. Я часто использую огромные полотна, но на самом деле делаю небольшие иллюстрации . возможно, в качестве доски для эскизов, или управляю несколькими активами в одном файле.
хорошо вопрос был о размере холста логотипа, поэтому я просто ответил на основе этого логотипа. В противном случае индустрия проектирования очень велика, и у каждого из нас есть свой собственный способ работы
Я пытаюсь создать типичный экран главного меню для игры. Он получил логотип, расположенный вверху, и некоторые кнопки меню. Он всегда будет отображаться в ландшафтном макете, и он должен поддерживать разные разрешения.
Мои вопросы таковы:
1) Можно ли центрировать и масштабировать логотип, используя только DIV? Или можно "прибегнуть" к использованию тегов img и центральных тегов? Каковы преимущества (D) DIV? Логотип DIV делает масштаб, когда я пытался добавить высоту в пикселях, например
но это должно быть обновлено через javascript в событии изменения размера. Я полагал, что это должно быть возможно, используя только css, или я ошибаюсь.?
2) Как вертикально центрировать меню div, кнопки должны быть посередине экрана и могут не выпадать в нижней части экрана. Следующие не работали
Тег img в порядке. center тег является устаревшим, поскольку около 1867. Но вы можете легко использовать text-align: center как стиль на родительском элементе логотипа.
Итак, с куском HTML, как это:
и кусок CSS вроде этого:
Вы должны иметь центрированный логотип шириной около половины ширины страницы.
Нет никакого стыда в использовании тега img , и на самом деле, если вы хотите масштабировать, то это очень удобно для этого. Изображение будет автоматически масштабировать свою высоту относительно своей ширины. Нет простого способа получить тот же эффект, используя только фоновое изображение.
Кроме того, вы можете сделать логотип фоном. Но тогда вам нужно будет указать высоту контейнера, потому что у него вообще нет контента и в противном случае он рухнет:
Для центрирования логотипа с помощью div:
Честно говоря, для того, чтобы центрировать пункты меню вертикально, я сомневаюсь, что это было бы разумно. Если высота логотипа не превышает 50% экрана, он будет охватывать часть из них. Вы могли бы создать для этого решение, но я бы подумал, что это было бы необычно.
Я думаю, что это достигает того, к чему вы должны стремиться - все прекрасно реагирует. Возможно, некоторое исследование тегов media-query для гибкого дизайна в CSS было бы хорошим началом для достижения более желательной по отношению к кнопкам. Я бы предложил увеличить или уменьшить их размер; мобильное устройство должно отвечать, например, меньшими кнопками, чем рабочий стол.
Кроме того, попробуйте обратиться в Google, прежде чем ответить на вопрос. Я буду плакать, если увижу еще один вопрос со словами "CSS" и "div centering" вместе.
Создание логотипа часто рассматривается как быстрая и простая работа: ты создаешь небольшую картинку, прикрепляешь к ней немного текста, и все, готово! В действительности есть много нюансов, которые превращают этот процесс в непростую задачу. Взглянем на некоторые правила создания логотипов, посмотрим, какие из них мы можем использовать в работе, для того, чтобы сделать качественный логотип и рассмотрим применение этих правил на примерах.
Написать правила дизайна достаточно просто, но чтобы сделать этот рассказ более полезным я решил продемонстрировать, как я применяю эти правила создавая логотип для заказчика. Пусть заказчиком будет вымышленная компания Media Stack, которая предлагает услуги веб-хостинга. Я не собираюсь давать пошаговую инструкцию “как придумать логотип”, вместо этого я попытаюсь показать то, что обычно остается за сценой: идеи, ход мысли и то, как учитывается каждое правило или указание в конечном дизайне логотипа.
Чтобы мозговым штурмом создать классный концепт вам нужно задавать много вопросов
Первым этапом станет сбор всей информации о компании клиента. Например, узнайте, что они делают, кто является целевой аудиторией, какие у них задачи и как они воспринимаются аудиторией в рамках своего бренда. Многие дизайнеры ищут ответы на эти вопросы посредством интернета, в то время как другие предпочитают воспользоваться телефоном или электронной почте. Вне зависимости от того, какой метод используется, постарайтесь получить максимально возможное количество информации. Чем больше информации вы получите, тем проще будет создать дизайн под специфические нужды вашего клиента, а главное ― тем точнее удастся представить компанию в логотипе.
Будучи вымышленным проектом, вся информация для Media Stack была создана ради этой статьи, но я стремился сделать его типичным проектом малого и среднего бизнеса, которые формируют мировую сцену. Краткая выборка из простого опросника на дизайн рассказывает о том, кто такие Media Stack, что они делают и как они хотят себя видеть в глазах пользователей. Вся эта информация может быть использована в дальнейшем для создания уникального логотипа, который представляет компанию.
Я пытаюсь создать типичный экран главного меню для игры. Он получил логотип, расположенный вверху, и некоторые кнопки меню. Он всегда будет отображаться в ландшафтном макете, и он должен поддерживать разные разрешения.
Мои вопросы таковы:
1) Можно ли центрировать и масштабировать логотип, используя только DIV? Или можно "прибегнуть" к использованию тегов img и центральных тегов? Каковы преимущества (D) DIV? Логотип DIV делает масштаб, когда я пытался добавить высоту в пикселях, например
но это должно быть обновлено через javascript в событии изменения размера. Я полагал, что это должно быть возможно, используя только css, или я ошибаюсь.?
2) Как вертикально центрировать меню div, кнопки должны быть посередине экрана и могут не выпадать в нижней части экрана. Следующие не работали
Тег img в порядке. center тег является устаревшим, поскольку около 1867. Но вы можете легко использовать text-align: center как стиль на родительском элементе логотипа.
Итак, с куском HTML, как это:
и кусок CSS вроде этого:
Вы должны иметь центрированный логотип шириной около половины ширины страницы.
Нет никакого стыда в использовании тега img , и на самом деле, если вы хотите масштабировать, то это очень удобно для этого. Изображение будет автоматически масштабировать свою высоту относительно своей ширины. Нет простого способа получить тот же эффект, используя только фоновое изображение.
Кроме того, вы можете сделать логотип фоном. Но тогда вам нужно будет указать высоту контейнера, потому что у него вообще нет контента и в противном случае он рухнет:
Для центрирования логотипа с помощью div:
Честно говоря, для того, чтобы центрировать пункты меню вертикально, я сомневаюсь, что это было бы разумно. Если высота логотипа не превышает 50% экрана, он будет охватывать часть из них. Вы могли бы создать для этого решение, но я бы подумал, что это было бы необычно.
Я думаю, что это достигает того, к чему вы должны стремиться - все прекрасно реагирует. Возможно, некоторое исследование тегов media-query для гибкого дизайна в CSS было бы хорошим началом для достижения более желательной по отношению к кнопкам. Я бы предложил увеличить или уменьшить их размер; мобильное устройство должно отвечать, например, меньшими кнопками, чем рабочий стол.
Кроме того, попробуйте обратиться в Google, прежде чем ответить на вопрос. Я буду плакать, если увижу еще один вопрос со словами "CSS" и "div centering" вместе.
Читайте также: