Text Tool DemoYouTube↗  IA↗(long shot)
Science & Technology  26.1K views 94 likes 2 dislikes   30 Sep 2013
Google Web Designer 76.8K subscribers United States YouTube↗


Please select the problem
You must specify your email and describe the problem in detail
Describe your problem in detail if it's not obvious

Click to Play Video Click to Play Video
こんにちは エリック・グスマンです
Здравствуйте! Меня зовут Эрик Гузман.
こんにちは エリック・グスマンです
Я являюсь одним из разработчиков Google Web Designer.
Google Web Designerチームの デベロッパーです
Сегодня я в двух словах расскажу вам
Web Designerの テキスト編集機能をご紹介します
о возможностях редактирования текста в этом веб-приложении.
Web Designerの テキスト編集機能をご紹介します
В этом видео я покажу вам, как с помощью инструмента "Текст"
このデモでは テキストツールを使った
создавать текстовые блоки, форматировать текст,
テキストコンテナの作成 テキストの書式設定
добавлять в документ шрифты Google,
ドキュメントへのGoogleフォントの追加 テキスト操作の高度なワークフローをご紹介します
а также выполнять более сложные действия.
ドキュメントへのGoogleフォントの追加 テキスト操作の高度なワークフローをご紹介します
Процесс работы с текстом в Google Web Designer мало отличается
Web Designerのテキスト編集機能は ワープロソフト経験者にはおなじみですが
от работы в обычных текстовых редакторах. При этом
Web Designerのテキスト編集機能は ワープロソフト経験者にはおなじみですが
наше веб-приложение предоставляет уникальные возможности,
市場に敏感なデザイナー向けの 独自の機能もあります
которые пригодятся дизайнерам, идущим в ногу с запросами рынка.
市場に敏感なデザイナー向けの 独自の機能もあります
Давайте посмотрим, как добавить текстовый блок
ドキュメントにテキストコンテナを 追加してみましょう
в документ.
ドキュメントにテキストコンテナを 追加してみましょう
В первую очередь
テキストコンテナを追加するには まず テキストツールを有効にします
выберем инструмент "Текст".
テキストコンテナを追加するには まず テキストツールを有効にします
Для этого на панели слева найдите значок "Текст"
ツールバーのテキストツールアイコンを クリックして テキストツールを有効にします
и нажмите на него.
ツールバーのテキストツールアイコンを クリックして テキストツールを有効にします
Текстовый блок – это просто элемент HTML,
テキストコンテナは テキストを挿入できるHTML要素です
в который можно добавить текст.
テキストコンテナは テキストを挿入できるHTML要素です
Чтобы создать текстовый блок,
テキストコンテナを作成するには ステージ上をクリックしてドラッグします
нажмите на рабочей области и растяните границы элемента.
テキストコンテナを作成するには ステージ上をクリックしてドラッグします
Это элемент с фиксированными размерами.
これは固定サイズのコンテナです
Можно просто нажать в любом месте рабочей области.
ステージのどこかをクリックすると サイズ自動調整のテキストコンテナが作成されます
В этом случае размер блока
ステージのどこかをクリックすると サイズ自動調整のテキストコンテナが作成されます
будут определяться автоматически.
ステージのどこかをクリックすると サイズ自動調整のテキストコンテナが作成されます
Поле является редактируемым, так что вы можете
自動的に編集可能になるので そのまま入力を開始できます
сразу же начать вводить текст.
自動的に編集可能になるので そのまま入力を開始できます
А сейчас давайте очистим рабочую область,
これらの要素を選択して消去し ステージ上をきれいにしましょう
удалив эти элементы.
これらの要素を選択して消去し ステージ上をきれいにしましょう
Теперь давайте поговорим
テキストの書式設定についてご説明します
о форматировании текста в Google Web Designer.
テキストの書式設定についてご説明します
Чтобы изменить внешний вид текста,
テキストの視覚的なプロパティを変更するには ツールバーの書式設定オプションを使用します
воспользуемся панелью инструментов "Текст".
テキストの視覚的なプロパティを変更するには ツールバーの書式設定オプションを使用します
Она появляется над рабочей областью
ツールバーは テキストツールを選択すると ステージの上部に表示されます
сразу после того, как вы выберете инструмент "Текст".
ツールバーは テキストツールを選択すると ステージの上部に表示されます
В Google Web Designer есть разные возможности форматирования,
さまざまな書式設定オプションがあります
которые можно применять как к части текста, так и ко всему блоку.
テキストコンテナの一部や全体に適用できます
После того как вы активировали поле для редактирования,
欄をアクティブにして編集できるようにすると
выделите текст, который необходимо отформатировать.
テキストの一部を選択して書式設定できます
Например, здесь я хочу сделать первую строку
たとえば 最初の行を選択して 見出しにしましょう
заголовком.
たとえば 最初の行を選択して 見出しにしましょう
Для этого я выберу H1 в раскрывающемся списке тегов.
[タグ]プルダウンで[H1]を選択します
Основную часть мне нужно сделать абзацем.
この中間部分はパラグラフにしましょう
Для этого я выделю ее и выберу в меню
選択して Pタグを使って パラグラフとして設定します
тег P.
選択して Pタグを使って パラグラフとして設定します
Последние три слова
この最後のテキストは ハイパーリンクにしましょう
будут гиперссылкой.
この最後のテキストは ハイパーリンクにしましょう
Нажимаем кнопку "Создать гиперссылку"
[ハイパーリンクを作成]ボタンを使って URLを入力します
и вводим URL.
[ハイパーリンクを作成]ボタンを使って URLを入力します
Чтобы изменить стиль всего текста в блоке, нажмите
テキストコンテナ全体を設定するには 編集欄の外側をクリックします
за пределами редактируемого поля.
テキストコンテナ全体を設定するには 編集欄の外側をクリックします
Этот элемент будет выделен
要素の周りに青いハイライトが 表示されていますね
голубым цветом.
要素の周りに青いハイライトが 表示されていますね
Теперь изменения форматирования будут применены
書式設定オプションを変更すると コンテナの内容に反映されます
ко всему тексту в блоке.
書式設定オプションを変更すると コンテナの内容に反映されます
Давайте увеличим размер шрифта.
この場合はフォントサイズを大きくします
Мы также можем изменить и сам шрифт.
別のフォントも選択できます
Теперь Google Web Designer работает вместе с Google Fonts,
Web Designerでは Google Font Serviceにより
где вы можете найти сотни шрифтов
多数のオープンソースフォントを デザイン作成に使用できます
и свободно использовать их при создании дизайна страниц.
多数のオープンソースフォントを デザイン作成に使用できます
Чтобы добавить шрифты Google в документ, нажмите
ドキュメントにGoogle Fontsを追加するには
кнопку F+.
フォント追加ボタンをクリックします
В диалоговом окне
ダイアログが開いて 追加するウェブフォントを選択できます
мы выберем шрифты.
ダイアログが開いて 追加するウェブフォントを選択できます
Пусть это будут Open Sans и один из моих любимых – Lobster.
Open SansとLobsterを選択しましょう
Нажимаем "ОК".
[OK]をクリックします
Эти шрифты появились
[フォント]プルダウンのフォントの一覧に これらのフォントが追加されました
в списке доступных в раскрывающемся меню.
[フォント]プルダウンのフォントの一覧に これらのフォントが追加されました
Выберем один из них.
これらのフォントが使用可能になったので [フォント]を使ってテキストに適用します
Теперь этот шрифт используется для всего текста.
これらのフォントが使用可能になったので [フォント]を使ってテキストに適用します
Если вы посмотрите код страницы, то увидите, что таким образом просто
コードビューで確認してみると Google Font Serviceのリンクが追加されています
добавляется ссылка
コードビューで確認してみると Google Font Serviceのリンクが追加されています
на нужные шрифты в Google Fonts.
使用可能なフォントの一覧があります
Разработчики Google Web Designer очень любят трехмерные веб-службы.
Web Designerには 3Dのウェブ機能もあります
Поэтому текст в Google Web Designer
テキストを3Dで操作してみましょう
правильно отображается в 3D.
テキストを3Dで操作してみましょう
Возможно, вы работаете над созданием нового 3D-макета
ステージ回転ツールを使って
или просто хотите добавить изюминку в свой дизайн.
新しい3Dレイアウトを試したり デザインの見せ方を変えたりできます
В этом вам поможет инструмент "Вращение рабочей области в 3D".
新しい3Dレイアウトを試したり デザインの見せ方を変えたりできます
Наш инструмент работы с текстом позволяет редактировать текст
テキストツールを使用すると 3Dの編集も可能です
в современном 3D-мире.
テキストツールを使用すると 3Dの編集も可能です
На этом я заканчиваю презентацию.
これでテキストツールのデモは終了です
Напомню, меня зовут Эрик Гузман.
エリック・グスマンでした
Спасибо за внимание!
ご覧いただきありがとうございました
Similar videos:



0 views 0 likes 0 dislikes 05 Jun 2026100% match

Create an Expandable Ad Demo Part 2/3
Google Web Designer
13K views 23 likes 1 dislikes 30 Sep 2013100% match

Timeline Adv Mode Demo Part 1/2
Google Web Designer
32.6K views 60 likes 4 dislikes 30 Sep 2013100% match

Tag Tool Demo
Google Web Designer
17.6K views 57 likes 3 dislikes 30 Sep 2013100% match


UI Overview Demo
Google Web Designer
69.2K views 215 likes 9 dislikes 30 Sep 2013100% match

Create an Expandable Ad Demo Part 1/3
Google Web Designer
22.6K views 40 likes 2 dislikes 30 Sep 2013100% match

Text Overview - Google Web Designer
Google Web Designer
7.1K views 18 likes 3 dislikes 03 Jan 201830% match


A tour of Google Forms
Google Help
298.4K views 1.1K likes 102 dislikes 30 Jan 201327% match


29 Assignment 3.0
Moodle
3.8K views 1 likes 0 dislikes 17 Jan 201626% match

Cómo saber los Componentes de mi PC | ver tu Hardware y su características | Speccy
AirXander
40K views 717 likes 27 dislikes 08 Dec 201826% match








30 Assignment 3.1
Moodle
3.4K views 6 likes 0 dislikes 07 Aug 201626% match

Pinnacle Studio Tutorial - Object Masking with Motion Tracking
PinnacleStudioLife
44.4K views 90 likes 14 dislikes 24 Oct 201626% match

How to use Mask function on CapCut | Text Behind | Twins Effect
LC Editing
4.7K views 159 likes 1 dislikes 04 Oct 202026% match





Google Web Designer - AdWords Dynamic Overview
Google Web Designer
55K views 64 likes 21 dislikes 31 Aug 201526% match


[SUB] How to Add a Custom Font to PageFly page? - Shopify Page Builder
PageFly Shopify Page Builder App
1.2K views 13 likes 0 dislikes 01 Jun 202026% match

Components Overview
Google Web Designer
27.5K views 85 likes 8 dislikes 04 Aug 201425% match


Timeline Enhancements - Google Web Designer
Google Web Designer
13.2K views 68 likes 3 dislikes 21 Jun 201725% match


Survey123 for ArcGIS: Creating Smart Forms with Survey123 Web Designer
ArcGIS
8.3K views 10 likes 1 dislikes 02 May 201725% match






04 Course Layout 3.1
Moodle
6.1K views 4 likes 0 dislikes 07 Aug 201625% match

FLYSKY FS-X14S - Firmware Upgrade (RSSI MOD)
Mirko FPV
1.3K views 72 likes 0 dislikes 16 Jul 202025% match
0 views 0 likes 0 dislikes 05 Jun 202625% match


Enchanced Dynamic - Multi schema support
Google Web Designer
3.8K views 8 likes 1 dislikes 31 Aug 201525% match


04 Course layout 3.0
Moodle
12.4K views 16 likes 1 dislikes 17 Jan 201625% match

Excel: Charts
LearnFree
368.6K views 606 likes 58 dislikes 08 Feb 201625% match

Prezi Tutorial: Simple Steps to a Great Prezi
Prezi
64.7K views 73 likes 8 dislikes 27 Feb 201425% match

Omnibus F4 V3 - CAM, VTX, OSD & SmartAudio
Mirko FPV
7.1K views 137 likes 5 dislikes 01 Jul 201825% match

Gradient Editing Tool
Google Web Designer
17.8K views 38 likes 7 dislikes 15 Jan 201420% match



Settings Privacy About Contact Donate