app/template/default/Guide/cutting_ai.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="26" height="25" viewBox="0 0 26 25" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.86068 0.240234H20.7576C23.1698 0.240234 25.1183 2.18871 25.1183 4.60091V19.8836C25.1183 22.2958 23.1698 24.2443 20.7576 24.2443H4.86068C2.44847 24.2443 0.5 22.2958 0.5 19.8836V4.60091C0.5 2.18871 2.44847 0.240234 4.86068 0.240234Z" fill="#330000"/><path d="M12.4267 14.6403H8.61109L7.83008 17.0525C7.80974 17.146 7.72838 17.2071 7.63482 17.1949H5.70669C5.59279 17.1949 5.56432 17.1338 5.59279 17.0118L8.89584 7.50536C8.92838 7.40367 8.95686 7.28977 8.99753 7.16774C9.03821 6.95214 9.05855 6.72841 9.05855 6.50062C9.04635 6.44774 9.09109 6.39892 9.13991 6.38672H11.7962C11.8775 6.38672 11.9182 6.41926 11.9304 6.46807L15.6728 17.0321C15.7053 17.146 15.6728 17.1949 15.5711 17.1949H13.4274C13.3541 17.2071 13.285 17.1542 13.2647 17.081L12.4226 14.6403H12.4267ZM9.20499 12.5576H11.8084C11.7474 12.342 11.666 12.0857 11.5725 11.8172C11.4789 11.5406 11.3894 11.2437 11.2958 10.9345C11.1941 10.6172 11.1006 10.3081 10.9989 9.99079C10.8972 9.6735 10.8036 9.37655 10.7223 9.0796C10.6409 8.79079 10.5677 8.52638 10.4986 8.27824H10.4782C10.3847 8.71757 10.2748 9.16096 10.1284 9.60028C9.97381 10.0925 9.81923 10.605 9.65652 11.1176C9.51415 11.6423 9.35957 12.1223 9.20499 12.5535V12.5576Z" fill="#FF9700"/><path d="M17.9141 8.13628C17.5765 8.14848 17.247 8.01424 17.0029 7.77831C16.767 7.52204 16.645 7.18441 16.6531 6.83458C16.6409 6.48475 16.7751 6.15933 17.0233 5.9234C17.2714 5.68746 17.5968 5.56543 17.9345 5.56543C18.3331 5.56543 18.6423 5.68746 18.866 5.9234C19.0897 6.17153 19.2158 6.49695 19.2036 6.83458C19.2158 7.18441 19.0897 7.52204 18.8457 7.77831C18.6097 8.02645 18.2599 8.15662 17.9141 8.13628ZM16.767 17.0407V9.14509C16.767 9.0434 16.8077 9.00272 16.9012 9.00272H18.9311C19.0246 9.00272 19.0653 9.0556 19.0653 9.14509V17.0407C19.0653 17.1546 19.0246 17.2034 18.9311 17.2034H16.9216C16.8199 17.2034 16.767 17.1424 16.767 17.0407Z" fill="#FF9700"/></svg> 
  21.             {{ 'Adobe Illustratorでデータご用意 - カッティングステッカー'|trans }}</h1>
  22.         </div>
  23.         <div class="ec-pageBody">
  24.             <div class="ec-section">
  25.                 <h2 class="ec-section--title2 mt-5 mb-4">
  26.                     <img src="{{ asset('assets/img/guide/img_cutting_ai-1.png') }}">
  27.                     Adobe Illustratorデータでご入稿の場合はそのまま出力してステッカー製作します。CC対応です。
  28.                 </h2>
  29.                 <p class="ec-section--point mb-4"><span class="label-pill label-point">Point</span>原寸大・1色塗りのみ・全てアウトライン（パス）データ</p>
  30.                 <div class="attention ec-section--download mb-4">
  31.                     <svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.5 16.2441L7.5 11.2441L8.9 9.79414L11.5 12.3941V4.24414H13.5V12.3941L16.1 9.79414L17.5 11.2441L12.5 16.2441ZM6.5 20.2441C5.95 20.2441 5.47933 20.0485 5.088 19.6571C4.69667 19.2658 4.50067 18.7948 4.5 18.2441V15.2441H6.5V18.2441H18.5V15.2441H20.5V18.2441C20.5 18.7941 20.3043 19.2651 19.913 19.6571C19.5217 20.0491 19.0507 20.2448 18.5 20.2441H6.5Z" fill="#FB2A4F"/></svg>
  32.                     <a href="{{ asset('assets/img/guide/cuttingsticker_template.ai') }}" class="ec-section--download-link">テンプレートダウンロード -  [カッティングステッカー用Aiファイル]</a>
  33.                 </div>
  34.                 <div class="st-Role">
  35.                     <div class="st-Grid">
  36.                         <div class="st-Grid__item border">
  37.                             <div class="st-Grid__item-img"><img src="{{ asset('assets/img/guide/img_cutting_ai-card-1.png') }}"></div>
  38.                             <dl class="st-Grid__item-text text-left">
  39.                                 <dt>色とレイヤー構成</dt>
  40.                                 <dd>
  41.                                     <ul>
  42.                                         <li>カラーモード「CMYK」</li>
  43.                                         <li>K100%のみ</li>
  44.                                         <li>1つのデザインレイヤー</li>
  45.                                     </ul>
  46.                                     <p>で作成してください。</p>
  47.                                     <br>
  48.                                     <p class="attention"><small>カッティングステッカーに使用するシートの色は別途ご指定いただけます。</small></p>
  49.                                 </dd>
  50.                             </dl>
  51.                         </div>
  52.                         <div class="st-Grid__item border">
  53.                             <div class="st-Grid__item-img"><img src="{{ asset('assets/img/guide/img_cutting_ai-card-2.png') }}"></div>
  54.                             <dl class="st-Grid__item-text text-left">
  55.                                 <dt>サイズとデータ</dt>
  56.                                 <dd>
  57.                                     <p>製作されたいサイズを原寸大にて、デザインのみ作成してください。<br>
  58.                                     全てアウトライン（ベクトル）データである必要があります。</p>
  59.                                     <br>
  60.                                     <p class="attention"><small>もし台紙サイズ枠を指定されたい場合はこのページにある「台紙サイズの指定」をご覧ください。</small></p>
  61.                                 </dd>
  62.                             </dl>
  63.                         </div>
  64.                         <div class="st-Grid__item border">
  65.                             <div class="st-Grid__item-img"><img src="{{ asset('assets/img/guide/img_cutting_ai-card-3.png') }}"></div>
  66.                             <dl class="st-Grid__item-text text-left">
  67.                                 <dt>フォントのアウトライン化</dt>
  68.                                 <dd>
  69.                                     <p>フォントを使用している場合は文字のアウトラインを必ずお取り下さい。</p>
  70.                                     <br>
  71.                                     <p class="attention"><small>【アウトライン化の手順】<br>
  72.                                     選択ツールでオブジェクトを選択<br>
  73.                                     メニューの「オブジェクト」→「パス」→「パスのアウトライン」</small></p>
  74.                                 </dd>
  75.                             </dl>
  76.                         </div>
  77.                         <div class="st-Grid__item border">
  78.                             <div class="st-Grid__item-img"><img src="{{ asset('assets/img/guide/img_cutting_ai-card-4.png') }}"></div>
  79.                             <dl class="st-Grid__item-text text-left">
  80.                                 <dt>線のアウトライン化</dt>
  81.                                 <dd>
  82.                                     <p>線幅が設定されている場合はアウトラインをお取り下さい。</p>
  83.                                     <br>
  84.                                     <p class="attention"><small>【アウトライン化の手順】<br>
  85.                                     選択ツールでオブジェクトを選択<br>
  86.                                     メニューの「オブジェクト」→「パス」→「パスのアウトライン」</small></p>
  87.                                 </dd>
  88.                             </dl>
  89.                         </div>
  90.                         <div class="st-Grid__item border">
  91.                             <div class="st-Grid__item-img"><img src="{{ asset('assets/img/guide/img_cutting_ai-card-5.png') }}"></div>
  92.                             <dl class="st-Grid__item-text text-left">
  93.                                 <dt>交差しているデータの合体</dt>
  94.                                 <dd>
  95.                                     <p>オブジェクトが重なっている場合は合体して一つのオブジェクトにしてください。</p>
  96.                                     <br>
  97.                                     <p class="attention"><small>【合体の手順】<br>
  98.                                     選択ツールで2つ以上のオブジェクトを選択<br>
  99.                                     メニューの「ウィンドウ」→「パスファインダー」でパレット表示<br>
  100.                                     形状モードの合体をクリック<br>
  101.                                     <br>
  102.                                     この操作をしてご希望のデザインに相違が出てしまう場合は上記を再度ご確認ください。</small></p>
  103.                                 </dd>
  104.                             </dl>
  105.                         </div>
  106.                         <div class="st-Grid__item border">
  107.                             <div class="st-Grid__item-img"><img src="{{ asset('assets/img/guide/img_cutting_ai-card-6.png') }}"></div>
  108.                             <dl class="st-Grid__item-text text-left">
  109.                                 <dt>アピアランスの分割</dt>
  110.                                 <dd>
  111.                                     <p>アピアランスがある場合はアピアランスの分割を行ってください。<br>
  112.                                     <br>
  113.                                     効果メニューを使用すると適用前の形状が残ったまま変形がプレビューされます。<br>
  114.                                     プレビュー表示とアウトライン表示で比べた時にオブジェクトの輪郭に差異がないようにアピアランスの分割を行ってください。</p>
  115.                                     <br>
  116.                                     <p class="attention"><small>【アピアランス分割の手順】<br>
  117.                                     選択ツールでオブジェクトを選択<br>
  118.                                     メニューの「オブジェクト」→「アピアランスを分割」</small></p>
  119.                                 </dd>
  120.                             </dl>
  121.                         </div>
  122.                     </div>
  123.                 </div>
  124.                 <div class="st-Role mt-5">
  125.                     <div class="st-Grid st-Grid2">
  126.                         <div class="st-Grid__item">
  127.                             <a href="{{ url('guide_cutting_notice') }}">
  128.                                 <div class="st-Grid__item-img"><img class="img" src="{{ asset('assets/img/guide/icon_data_notes.png') }}"></div>
  129.                                 <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>
  130.                             </a>
  131.                         </div>
  132.                     </div>
  133.                 </div>
  134.                 <div class="st-Role mt-5">
  135.                     <h2 class="ec-section--title3">台紙サイズの指定（ご希望ある場合のみ）</h2>
  136.                     <div class="st-body">
  137.                         <div class="bg-light-gray p-3">
  138.                             <div class="d-flex align-items-center gap-4">
  139.                                 <img src="{{ asset('assets/img/guide/img_cutting_ai-2.png') }}" style="width:150px;">
  140.                                 <p>台紙サイズの指定をご希望の場合は「台紙サイズ指定」レイヤーを作成し、線のみの四角形で台紙サイズ枠を設けてください。<br>
  141.                                 デザインオブジェクトから最低3ミリ以上の余白を取ってください。<br>
  142.                                 台紙カット（断裁）は主に手作業で行うため、誤差が生じる場合があります。予めご了承ください。</p>
  143.                             </div>
  144.                         </div>
  145.                         <div class="bg-light-gray p-3 p-md-4 p-lg-5">
  146.                             <div class="attention has-icon">
  147.                                 <svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0.16748C3.5816 0.16748 0 3.74908 0 8.16748C0 12.5859 3.5816 16.1675 8 16.1675C12.4184 16.1675 16 12.5859 16 8.16748C16 3.74908 12.4184 0.16748 8 0.16748ZM8.8 12.1675H7.2V10.5675H8.8V12.1675ZM8.8 8.96748H7.2L6.8 4.16748H9.2L8.8 8.96748Z" fill="#FB2A4F"/></svg>
  148.                                 <p>貼り付け後は破棄・不要になるステッカー台座部分です。この指定がある場合は台紙サイズ枠の計測値で単価算出をさせて頂く場合があります。当店おまかせの場合は、デザインから4ミリ〜20ミリ程度の余白が目安です。</p>
  149.                             </div>
  150.                         </div>
  151.                     </div>
  152.                 </div>
  153.                 <div class="st-Role mt-5">
  154.                     <div class="d-flex gap-2">
  155.                         <svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 16.5977C12.4183 16.5977 16 13.0159 16 8.59766C16 4.17938 12.4183 0.597656 8 0.597656C3.58172 0.597656 0 4.17938 0 8.59766C0 13.0159 3.58172 16.5977 8 16.5977Z" fill="#4CAF50"/><path d="M12.0387 5.01758L6.85771 10.1985L4.72438 8.0652L3.65771 9.13186L6.85771 12.3319L13.1053 6.08424L12.0387 5.01758Z" fill="#CCFF90"/></svg>
  156.                         <dl>
  157.                             <dt>データ補助いたします。</dt>
  158.                             <dd>
  159.                                 <ul>
  160.                                     <li>塗りと線でデザインを作成しているが、そこから塗りだけへのデータ修正が大変</li>
  161.                                     <li>重なり具合が複雑で合体するとデザインが崩れる</li>
  162.                                     <li>クリッピングマスクで見た目を整えている。ここからどうすれば・・・</li>
  163.                                 </ul>
  164.                                 <p>アウトラインデータではあるけれど、ちょっと完全データは難しいという場合は一度そのままデータをお送りください。<br>
  165.                                 ※下記のみ外してください。<br>
  166.                                 透明・パターン・グラデーション・グラデーションメッシュ・グラフ・画像</p>
  167.                             </dd>
  168.                         </dl>
  169.                     </div>
  170.                 </div>
  171.             </div>
  172.         </div>
  173.     </div>
  174. {% endblock %}