app/template/default/Guide/cutting_inkscape.twig line 1

Open in your IDE?
  1. {#
  2. This file is part of EC-CUBE
  4. Copyright(c) EC-CUBE CO.,LTD. All Rights Reserved.
  6. http://www.ec-cube.co.jp/
  8. For the full copyright and license information, please view the LICENSE
  9. file that was distributed with this source code.
  10. #}
  11. {% extends 'default_frame.twig' %}
  13. {% block stylesheet %}
  14.     <link rel="stylesheet" href="{{ asset('assets/css/guide.css') }}">
  15. {% endblock %}
  17. {% block main %}
  18.     <div class="ec-role">
  19.         <div class="ec-pageHeader">
  20.             <h1><svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.5399 1.95311L2.27286 10.4128C-0.52037 13.8719 4.17378 13.4694 6.18609 14.4657C6.90794 15.2036 3.41932 15.7482 4.14117 16.4867C4.86301 17.2245 8.50609 17.9082 9.22917 18.646C9.95102 19.3839 7.75163 20.1667 8.47348 20.9045C9.19532 21.6423 10.8649 20.9433 11.1775 22.6467C11.4002 23.8639 14.1861 23.1697 15.5486 22.1728C16.2704 21.4343 14.1676 21.5039 14.8895 20.766C16.6846 18.9303 18.3559 20.099 18.9701 18.2596C19.2735 17.3507 16.3276 16.8583 17.0507 16.1205C19.1276 14.9076 26.3061 14.118 22.8999 10.7119L14.3307 1.95311C13.2827 0.946957 11.5338 0.93588 10.5399 1.95311ZM20.0359 18.2596C20.0359 18.6793 23.1282 18.9543 23.1282 18.1605C22.6876 16.8854 20.4015 16.9716 20.0359 18.2596ZM6.10609 20.4897C6.8384 21.123 7.96948 20.3322 8.30855 19.4485C7.59901 18.5057 4.94301 19.4823 6.10609 20.4897ZM19.6482 19.1217C18.7042 19.9685 19.7541 20.8276 20.6846 20.2805C20.8919 20.07 20.679 19.3322 19.6482 19.1217Z" fill="black"/><path d="M8.56166 14.9238C8.78258 15.0611 12.1241 15.7398 12.9407 15.8752C13.2238 15.9349 13.0232 16.2266 12.633 16.4235C11.753 16.6574 7.48473 14.9238 8.56166 14.9238Z" fill="white"/><path d="M13.8312 2.54597L17.102 5.86782C17.4121 6.18474 17.4078 6.7989 17.2343 6.97551L15.6103 5.67644L15.2909 7.60013L13.934 6.88382L11.7611 8.25674L11.0417 5.36259L9.87429 7.38228H8.08968C7.36229 7.38228 7.27675 6.45921 7.93768 5.79828C9.09214 4.55213 10.4171 3.28197 11.1371 2.54597C11.8608 1.80628 13.1217 1.82721 13.8312 2.54597Z" fill="white"/></svg> 
  21.             {{ 'フリーソフトを使ってカッティングステッカー用のデータを準備（PC用のみ）'|trans }}</h1>
  22.         </div>
  23.         <div class="ec-pageBody">
  24.             <div class="ec-section">
  25.                 <h2 class="ec-section--title2 mb-4">
  26.                     <img src="{{ asset('assets/img/guide/img_cutting_inkscape-1.png') }}">
  27.                     <span>人気フリーソフト「Inkscape」を使ってカッティングステッカー製作用データを用意する手順をご紹介します。</span>
  28.                 </h2>
  29.                 <p class="ec-section--point mb-4"><span class="label-pill label-point">Point</span>単色ブラックのみ・テキストフォントはパス化・プレーンSVGで保存</p>
  30.                 <div class="attention p-4 pb-2 mb-4">
  31.                     <dl>
  32.                         <dt>フリーソフトについて</dt>
  33.                         <dd>
  34.                             <a class="link-inkscape" href="https://forest.watch.impress.co.jp/library/software/inkscape/" target="_blank">Inkscape Windows用 <svg width="14" height="13" viewBox="0 0 14 13" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M3.34855 0.958008C2.84427 0.958008 2.43582 1.36645 2.43582 1.87073V3.39269H0.912721C0.408443 3.39269 0 3.80113 0 4.30655V11.6106C0 12.1149 0.408443 12.5233 0.912721 12.5233H10.6526C11.1569 12.5233 11.5653 12.1149 11.5653 11.6106V10.0886H13.0873C13.5916 10.0886 14 9.6802 14 9.17592V1.87073C14 1.36645 13.5916 0.958008 13.0873 0.958008H3.34855ZM2.43582 4.91465V9.17592C2.43582 9.6802 2.84427 10.0886 3.34855 10.0886H10.0445V10.6443C10.0445 10.8416 9.88477 11.0014 9.68739 11.0014H1.87906C1.68169 11.0014 1.52196 10.8416 1.52196 10.6443V5.27176C1.52196 5.07438 1.68169 4.91465 1.87906 4.91465H2.43468H2.43582ZM3.95779 2.83707C3.95779 2.6397 4.11751 2.47997 4.31489 2.47997H12.1209C12.3183 2.47997 12.478 2.6397 12.478 2.83707V8.20958C12.478 8.40695 12.3183 8.56668 12.1209 8.56668H4.31489C4.11751 8.56668 3.95779 8.40695 3.95779 8.20958V2.83707Z" fill="#05B4BE"/></svg></a>
  35.                             <p>リンク先：窓の杜様<br>
  36.                             （外部サイトが開きます。このソフトウェアのインストールにおいて弊社はいかなる責任も負いかねますので、あらかじめご理解・ご了承の上、ご利用くださいますようお願い申し上げます。）</p>
  37.                         </dd>
  38.                     </dl>
  39.                 </div>
  40.                 <div class="st-Role">
  41.                     <div class="ec-off3Grid">
  42.                         <div class="ec-off3Grid__cell st-Role__inkscape">
  43.                             <dl class="mb-4">
  44.                                 <dt>【初期画面】</dt>
  45.                                 <dd>
  46.                                     <p class="p-2">インストール後、新規ドキュメントを作成します。<br>
  47.                                     色の設定は下の方にあるパレットで簡易的に付けられます。<br>
  48.                                     または何かを選択した状態で右クリックメニュー「フィル/ストローク」で設定画面が表示されます。<br>
  49.                                     フィルは中身、ストロークは線の色です。</p>
  50.                                     <img src="{{ asset('assets/img/guide/img_cutting_inkscape-2.png') }}">
  51.                                 </dd>
  52.                             </dl>
  53.                             <dl class="mb-4">
  54.                                 <dt>【文字入力】</dt>
  55.                                 <dd>
  56.                                     <p class="p-2">まずは文字を打ってみます。左側Aのアイコン「テキストツール」をクリック。<br>
  57.                                     カーソルにAのマークが付きますので、好きな場所でクリックして文字を入力します。<br>
  58.                                     書体についての設定画面が表示されていない場合は「選択ツール」で文字全体を選択した状態で右クリックメニュー「テキストとフォント」で設定画面が表示されます。</p>
  59.                                     <img src="{{ asset('assets/img/guide/img_cutting_inkscape-3.png') }}">
  60.                                 </dd>
  61.                             </dl>
  62.                             <dl class="mb-4">
  63.                                 <dt>【傾斜加工】</dt>
  64.                                 <dd>
  65.                                     <p class="p-2">傾斜させてみます。「選択ツール」で文字全体を選択した状態でもう一回クリックすると周りにある黒矢印の方向が変わります。その矢印をドラッグすることで様々な角度をつけることが出来ます。</p>
  66.                                     <img src="{{ asset('assets/img/guide/img_cutting_inkscape-4.png') }}">
  67.                                 </dd>
  68.                             </dl>
  69.                             <dl class="mb-4">
  70.                                 <dt>【テキストフォントのパス化】</dt>
  71.                                 <dd>
  72.                                     <p class="p-2">まだテキストを編集することが可能な状態です。<br>
  73.                                     このままですとカッティングステッカーの製作に使用することが出来ないためパス化してあげます。「選択ツール」で選択した状態で上メニュー「パス」→「オブジェクトをパスへ」を実行。これを行うことでカッティングステッカー製作に使用できるようになります。（テキスト編集を行うことが出来なくなります。）<br>
  74.                                     画像はパス化後、「ノードツール」を選択して”S”の文字を選択してみた状態です。周りにグレーの小さな四角が出てきていればパスに変換されています。</p>
  75.                                     <img src="{{ asset('assets/img/guide/img_cutting_inkscape-5.png') }}">
  76.                                 </dd>
  77.                             </dl>
  78.                             <dl class="mb-4">
  79.                                 <dt>【図形加工】</dt>
  80.                                 <dd>
  81.                                     <p class="p-2">「短形ツール」を使ってアンダーラインを引いてみたいと思います。ドラッグで長方形を描き、先ほどの「選択ツール」を選択、作った長方形を2回クリックで角度を付けるモードにして文字と同じように傾斜させます。<br>
  82.                                     この他に「星形ツール」や「円弧を作成」などで簡単に図形が作れるようになっています。<br>
  83.                                     自由形状を作りたい場合は「ペンツール」を使います。ペンツールはちょっと慣れが必要ですが、修正は何回でも出来るのでチャレンジしてみてください。</p>
  84.                                     <img src="{{ asset('assets/img/guide/img_cutting_inkscape-6.png') }}">
  85.                                 </dd>
  86.                             </dl>
  87.                             <dl class="mb-4">
  88.                                 <dt>【保存】</dt>
  89.                                 <dd>
  90.                                     <p class="p-2">デザインが出来たらファイル保存します。数種類ありますが「プレーン SVG」形式を選択して保存してください。</p>
  91.                                     <img src="{{ asset('assets/img/guide/img_cutting_inkscape-7.png') }}">
  92.                                 </dd>
  93.                             </dl>
  94.                         </div>
  95.                     </div>
  96.                 </div>
  97.                 <div class="st-Role mt-5">
  98.                     <div class="st-Grid st-Grid2">
  99.                         <div class="st-Grid__item">
  100.                             <a href="{{ url('guide_cutting_notice') }}">
  101.                                 <div class="st-Grid__item-img"><img class="img" src="{{ asset('assets/img/guide/icon_data_notes.png') }}"></div>
  102.                                 <div class="st-Grid__item-title"><p><svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0.740234C3.5816 0.740234 0 4.32183 0 8.74023C0 13.1586 3.5816 16.7402 8 16.7402C12.4184 16.7402 16 13.1586 16 8.74023C16 4.32183 12.4184 0.740234 8 0.740234ZM8.8 12.7402H7.2V11.1402H8.8V12.7402ZM8.8 9.54023H7.2L6.8 4.74023H9.2L8.8 9.54023Z" fill="#FB2A4F"/></svg> データを作る上のご注意点</p></div>
  103.                             </a>
  104.                         </div>
  105.                     </div>
  106.                 </div>                
  107.             </div>
  108.         </div>
  109.     </div>
  110. {% endblock %}