マネしてやってみた、iOS 7のデザインをWordで再現(17)

0
    JUGEMテーマ:iPhone5

    (29)ボディの作成(最終回その2)
    ということで遂に最後の最終回です。
    テーマは前回予告した「透視投影」です。

    ■立体を画面に投影するという事
    wordで立体を描く、と言ってもwordは所詮ワープロであり、紙の上に図を描くわけですから、3次元の立体を何らかの形で2次元の紙面上に写し取ってやる必要があります。この作業を投影と言います。
    wordで扱っている投影方法には、「平行投影」と「透視投影」の2つがあります。

    平行投影のイメージ図を見てください。


    対象の立体から平行線を出して、スクリーンに写し取っています。この方法が平行投影で、wordでも基本の投映法です。これは物の形を正確に写しとれる反面、平べったく、奥行きの無い図形になるのが特徴です。

    一方で透視投影はこんな感じになります。


    先程は平行線で投影していましたが、今度はなにやら中心にキュッと寄った感じになっています。実際この投影線を伸ばしてゆくととある1点に集まります。とても奥行き感のある図になっていると思います。これが透視投影の特徴です。

    今度は上から見た絵を見てください。


    立体から伸びた投影線が1点に集中しています。ここが「焦点」です。図にありますように、この透視投影の形を決めているパラメータには、視野角θ、焦点距離D、スクリーン幅Wの3つがあります。
    視野角は、焦点からスクリーン幅を見渡す角度、焦点距離はスクリーンから焦点までの距離、スクリーン幅はあらかじめ決めた基準長さです。スクリーン幅に対して焦点距離を短くしてゆくと、どんどん中央に寄った立体感のましたゆがんだ画像になってゆきます。
    カメラなどではこのスクリーン幅がレンズの幅に相当し、この幅を通し、視野角θの範囲内に入るものしか物理的に写真に写りませんが、wordの投影の場合、たとえば紙の幅などを基準にする必要もあまりないので、単なる基準長さです。

    さてこのパラメータ、W/2D=tan(θ/2)という関係になっていますので、2つを決めれば3つ目は自動的に決まります。また、スクリーン幅Wは単なる基準なので、この値はデフォルトで決められていて、ユーザは視野角だけを決めればいいようになっています。決め方は、3-D回転のダイアログで、一番上の「標準スタイル」をクリックし、「透視投影」の中からどれか一つ選びます。するとZ軸の下の「透視投影」の欄に数字を入れられるようになりますので、ここで調節してください。前回造ったボディのもとになる板も、これで透視投影モードにしてからパラメータを設定してください。

    因みにここで出てきたスクリーン幅の値ですが、いくつかWordで立体画像を作り、視野角をいろいろ変えて調べた所、約320mm、96dpiの画素に換算するとおよそ1200画素になっていました。この値と自分で設定した視野角から、焦点距離を先程の式で計算することができます。興味のある方は自分で投影図を描いてみるといいと思います。

    それから、上の図ではスクリーンより奥側に立体を置いた絵になっていますが、wordの場合、立体はもっと前に出てきていて、デフォルトでは立体の全面(立体を作る元になった平面画像)がスクリーン上に重なった状態になっています。ですから、回転していない平面画像では視野角だけ変えても画像は変化しません。このスクリーンとの距離を決めるパラメータが一番下の欄の「オブジェクトの位置→底面からの距離」になります。これも色々変えて試してみてください。


    ■ボディの整形
    ではお待たせしました、iPhoneのボディの整形に入ります。
    前回造った平たい角丸の板を整形してゆくのですが、結論はこちらです☆

    面取りは立体の角の処理です。ここでは上下とも丸面取り6ptでやっています。
    奥行きはiPhoneの厚みです。ここでは18pt。
    輪郭は、面取りした角Rと平らな側面の間に細い1ptの線を入れることで、きりっと際立った印象のボディを作ります。
    表面は、見ただけでは何もわかりませんが、質感はメタル、光源はバランスを選んでいます。角度は20°です。
    これも色々ためしてみるといいと思います。特に面取りには溝付きの面取りなどもありますので、うまくやればよりリアリティの高いものができるかもしれません。
    出来上がりはこちらです。


    そうしたらいよいよ画面を貼ります。
    前々回造った表面のセットを一色グループ化し、3-D回転の書式で前回と同じ数字を打ちこんで同じ向きに傾けます。
    出来たらボディの表面にかさねてやります。ボディは面取りしてある分平らな部分の面積がやや狭くなっているので、表面の板がはみ出さないように少しボディを引っ張って伸ばして合わせてやってください。

    最後に、影を作ります。
    ボディの下にフリーフォームで適当な四角を描いてやります。
    こんな感じです


    そこを薄い黒のグラデーションで塗り、光彩とぼかしメニューから20pt程度のぼかしを入れてやります。

    以上で、完成で~す!


    wordでもこれだけのことができるんですね。今回はいい勉強になりました。
    最後に元ビデオのリンクを貼っておきます。

    Was iOS 7 created in Microsoft Word?

    作者のVaclav Krejciさん、ありがとうございました。
    皆様もお付き合いありがとうございました。


    マネしてやってみた、iOS 7のデザインをWordで再現(16)

    0
      JUGEMテーマ:iPhone5

      (28)ボディの作成(最終回その1)
      さて、最終回はボディの作成です。
      が、なんだ「その1」というのは??

      いえその、Wordには3Dのオブジェクトを簡単に作る機能があるのですが、私も含めいまいちみんな使いこなせていない感じがするのです。
      そこで今回は少し理論的にもこだわりながら解説してみたいと思っています。
      テーマは2つで、3D図形の「回転」と「投影」です。
      それぞれちょっとしたボリュームになりそうなので、やっぱり2回に分けようと思いました、ということです。


      ■図形を回転するということ
      いきなりですが、3次元の図形を回転して好みの姿勢にするためには、図形を何回回転すればいいでしょうか?

      答えは「やり方はいくつもある」というと殴られそうですが、わかりやすいのは3回回すやり方です。
      解説に入る前に、この「**回回す」という言葉づかいについて説明しておきます。
      **回回すとは、いわゆる回転数の事ではありません。
      一般に物体をコマのように回転させるとき、コマの軸の部分は、どれだけ回転しても位置が変化しません。このような回転の中心になる直線を「回転軸」と呼びます。物体を1回回すとは、1つの(回転)軸に対して好きな角度だけ物体を回転させることを言います。回転する角度は自由に選んでいいのですが、1回転以上しても繰り返しになるだけですから、基本は0~360°の間で選びます。そして物体を3回回すとは、1つの軸に対して1回回したら、軸を変えてもう1回回し、更に軸を変えてもう1回回すことを言います。

      地球儀を考えてみてください。地球上のすべての地点は緯度と経度で表されています。なので、(緯度、経度)=(0,0)の地点をスタートとして、南北の地軸周りに経度の角度だけ地球儀を回し、そこから南北方向に緯度の分だけ地球儀を(台座ごと)縦に回転すれば、地球上のすべての地点の上空にたどり着きます。あとは自分から地球儀への目線を軸にして、時計回りか反時計回りに好きなだけ回すと、地球儀をあらゆる姿勢に設定することができるわけです。
      Wordでもこの3回回す手法で図形を回転してゆきます。

      ではWord2010の3-D回転ダイアログを見てみましょう。


      「回転」の中にX,Y,Zの三つのパラメータがあり、それぞれ数値を入れるボックスと、その右に回転方向を示したボタンが二つずつあります。
      このX,Y,Zが回転する3つの軸を表していて、数字がその回転角度を示しています。●と■で囲まれた部分が元の状態だったのですが、そこからX軸、Y軸、Z軸周りに少しずつ回転した結果、今の状態になっています。ではこの数字を上げ下げしたときの回転の様子を確認してみましょう。


      まずX軸は、回転する前の元の正方形の縦の中心軸です。今は四角が少し左に傾いているので、その傾いた軸周りに回転します。
      次にY軸は、X軸に直角な横方向の軸で、画面に平行な軸です。中央の立方体の右側面が少し見えていますので、正面の正方形の左側のラインは、右側のラインより少し後ろに下がっておかれている状態になります。この状態で画面に平行な軸周りに回しますので、若干複雑な変形を見せながら立方体が回ってゆきます。
      最後にZ軸ですが、これは画面に垂直な軸周りに時計回りまたは反時計回りに回転しますので、比較的わかりやすいと思います。

      ところで、先程の3-D回転ダイアログにあった回転方向を示したボタンですが、これを使って立体を回転することもできます。が、一つ注意事項があります。このボタンで回転したときと数字で回転したときとでは回転の軸が違うのです。
      ボタンで回した時の回転軸は以下の通りです。
      ・X軸:画面と平行な垂直線
      ・Y軸:画面と平行な水平線
      ・Z軸:画面に垂直な線

      Z軸は数字で回した場合と同じですが、X軸とY軸はとにかく現在の画面表示基準になります。
      どちらかやりやすい方で回転してやればいいでしょう。

      さて、お題はiPhoneの筐体でした。
      前回造った表面と同じ大きさの角丸四角系を作ってください。
      そうしたらそれを数字かボタンでウニウニ回してこんな形を作ってやります。


      実際やってみると、トライアンドエラーでこの状態を作り出すのは結構大変です。どれをどの順番に回せばいいか判らなくなってきますよね。めんどくさくなった人は右の数字を直接打ち込んじゃってください。

      さて、この図、今までと違って上と下の辺が平行になっていませんよね?それは右のダイアログボックスで、Zの下にある「透視投影55°」のせいなのです。
      次回はこの透視投影について説明したいと思います。
       


      マネしてやってみた、iOS 7のデザインをWordで再現(15)

      0
        JUGEMテーマ:iPhone5

        (27)筐体の表側を作りこむ
        さて、他人の褌で相撲を取るマネしてシリーズも残すところあと2回です。
        今回は、画面を貼りこむ表側の面を作りこみます。

        まず、きれいな筐体の画像を探してきます。ググってください、こんなのが見つかりました。


        この右側の部分を使います。

        まず、この画像をWord2010に読み込んでください。
         挿入リボン→図→ファイル名指定
        です。
        すると、横幅が紙面に収まるように縮小された画像が張り付くと思います。そこで、
         図ツール/書式リボン→サイズ→トリミング
        を選ぶと、画像の上下左右の中央付近と四つの角に黒くて太い線が入ると思います。これを動かして、必要な部分だけが明るく表示されるようにしてから、何もないところをクリックしてトリミングモードを外すと、必要な部分だけが切り取られた画像が出来上がります。これを拡大してお手本に使います。大体筐体の高さが160mm位になるようにしてください。

        次に筐体の黒い地の部分を作ります。オートシェイプの角丸四角を使い、お手本の筐体背面の形に合わせて、短辺、長編、角Rを調整します。角の面取り部はあまり気にしなくてもいいです。気にしてもいいです。

        そうしたら、前回完成させたホーム画面を貼りこみます。
        作ったホーム画面の全部品を選択してコピーします(グループ化してあると楽チンです)。そして、筐体の画像の近くで、
         ホームリボン→クリップボード(一番左)→貼り付けの下の▼→形式を選択して貼り付け
        とし、図(PNG)または図(JPEG)を選んで張り付けてください。
        張り付けたら、その画像をお手本の右側の画面に合わせてサイズを縮めながら置きます。シフトキーを押しながら伸び縮みさせると縦横比を変えずに縮小できるのは基本技です。
        置くときに左端が見えませんが、そこはセンスで・・・・ではなく、センターが合うように置いてください。縦横は若干合わないかもしれませんが、気にしません。筐体の外まではみ出してなければ基本OKです。

        ここまでできたら、先程作った筐体の黒い地をスライドさせてきて、こちらも中心と右端が合うように合わせます。先に描いた地の方が画面よりも下に滑り込むので、丁度いい感じになるはずです。

        位置を合わせたら、裏のお手本が見えるように、地の塗りつぶし無し、枠線赤、にしておきます。
        次に画面の上部から右下に斜めに入っているハイライトを作ります。
        地の枠線をコピーして、ペーストし、元の枠線とぴったり重なるように置いてください。
        そうしたら、右クリック→頂点の編集→Cntrl+クリックで不要な点を消してゆきます。
        途中経過です。


        三角の形を合わせたら、あとはグラデーションと透明度でハイライトを表現してゆきます。
        私の設定はこんな感じです。
        ・グラデーション:白→白(同じ色です)
        ・透明度:15%→85%
        ・角度:40°


        それができましたら、次は上部のカメラとスピーカーです。
        これは単純に円と長丸(角の丸い四角をフルRで使う方法です)で、太目の線にグラデーションを入れ、「影」を使ってハイライトを入れ、凹んだ感じを表現します。
        線の設定はこんな感じ


        影の設定はこんな感じです。


        ポイントは、カメラとスピーカーの2つの図形を選択した状態で線と影の設定をすること。こうすることで、両者に同時に同じ設定をすることができ、統一された見た目になります。


        最後にホームボタン。これは完成図を先にお見せします。


        ポイントは、
        ・線を、白→黒→白のグラデーションで立体感を出す(上の白を少しせま目にします)
        ・地は黒→黒→グレー→白っぽいグレー、の4段グラデーションで、下半分にハイライトを入れる。
        ・最後に太目の線で角丸の四角を入れて完成。

        ここまで記事を読んで下さった皆さんなら、もうこのくらいのヒントでお茶の子サイサイのはずです。頑張ってください。

        次回は最終回、ボディの作成です。


        マネしてやってみた、iOS 7のデザインをWordで再現(14)

        0
          JUGEMテーマ:iPhone5

          (25)その他の文字・記号
          こまごました記号類を作って行きます。
          ・ページインデックス:Segoe UI Symbolの文字コード26ABの●を文字色白で並べます。フォントサイズを合わせたら、フォントの詳細設定で文字間隔を広げて合わせこみます。最後に現在ページ以外の●を透過性50%に設定します。
          ・電波強度:画面左上には、元ネタビデオでは通信会社名AT&Tと電波強度?の●●○○○があるのですが、私がお手本にした画面には飛行機マーク・・・機内モードの様です。飛行機マークは何回か出てきましたね。Webdingsの文字コード241番を回転させて、サイズを合わせて使ってください。
          ・Wi-fi電波強度:これは元ネタビデオに詳しく説明があります。グリッドを表示させ、半径2マスの円弧を描いて塗りつぶします、その外側に人マスあけて一マス分の幅広円弧を置きます。元が半円なので1/4円に縮めてください。その外側にもう1マスあけてからもう一つ、幅広円弧を描きます。これらをグループ化し、45°回転してから、実際の大きさに縮めて使ってください。
          ・時刻:テキストボックスで書くだけです。フォントはArielでOKです。
          ・Bluetoothマーク:リボンを横にしたような記号です。元ネタビデオでは6角形を使って書いていましたが、グリッドを使えば普通にフリーフォームの一筆書きで書けると思います。
          ・電池使用状況:%の数字はテキストボックスです。電池記号は、Segoe UI Symbolの文字コード1F50Bです。バッテリー残量に合わせて、後で描く背景の色に合わせた■で残量を減らします。

          (26)壁紙
          これはなんでもOKです。何となくグラデーションにしたらできてしまうので、元ネタビデオなどをみて色々試してみてください。
          最後に一番下のアイコンの行に薄い色の帯をつけたら完成です。

          以上で、ホーム画面が完成しました。完成品はこちらです。


          折角白い文字で字を書きましたが、背景を薄い色にしたので、これに合わせて文字・記号類を全部黒に変更しました。とっても見やすくなりました。

          次回はいよいよ筐体の作成に入ります。


          マネしてやってみた、iOS 7のデザインをWordで再現(13)

          0
            JUGEMテーマ:iPhone5

            (23)アイコンの作成(その21)
            さあ佳境に入ってきました。最終回のひとつ前はNewsstandです。


            細かいんですが、今まで使ったテクニックを使えば、そんなに難しいことはありません。

            まず、背景は、雑誌の下端から上に向けてグレーのグラデーションが入っていますので、白→グレー→白の3連グラデーションで言います。後ろのグレート白を近づけて雑誌の下端に合わせるのがポイントです。そこから下は、最後の白が自動的に継続になります。

            次に新聞・雑誌を作って行きます。下から順番にということで、まずは新聞。
            ・グレーの長方形で背景を描く。下端は隠れて見えないので、見える部分よりちょっと長めに作っておけばよい。
            ・記事の部分は、新聞紙より少し濃いめのグレーで線を引きます。■っぽく見える所は、線の太さを太くして対応します。
            ・新聞紙名は、髭付きのフォントを探して使います。私のWindows7にはOld English Text MTというフォントがありましたのでこれを使っています。若干形は違うけど、雰囲気は出ていると思います。

            次はART雑誌です。
            ・紙面をオートシェープの四角形でつくります。
            ・●、■、▲をそれぞれオートシェイプでつくります。隣の雑誌にかかるところは後で隠れるので、気にしないで放置してください。
            ・ARTの文字を、似たフォントを探して記入します。

            お次はTRAVEL雑誌です。
            ・紙面の四角形を作成。
            ・下半分の色の薄いところを、オートシェイプのホームベース型で作成。
            ・飛行機は、以前使ったWebdingsの文字コード241番を回転させて使います。
            ・雑誌名は雰囲気の似たフォントを探して使います。私が使ったのは、Velvenda Coolerというフォントです。

            最後にスポーツ雑誌です。
            ・紙面の四角形を作成。
            ・テニスボールを作成。黄色い●を描く。同じ●をコピーし、枠線だけの○にして、背景と同じ緑色にする。この○を2つ作って黄色の●の上下に重ねて出来上がり。
            ・テニスコートのラインは、まず内側のサイドラインとタッチラインを台形で、その中のT字のラインを直線2本でつくります。その後、この台形の横幅を広げて外側のラインを作ります。ここで、外側の台形の左側が下の雑誌に重なってしまっているので、消します。やり方は、
             - まず、台形を右クリックして頂点の編集を選択
             - 紙面の左右の端と台形の交点付近をCtrl+クリックして頂点を追加
             - 下の2つの角の一方を右クリックして、開いたパス、を選ぶとその点がこんな風にぷちっと2つに分かれます。

             - こうしたら、紙面をはみ出している下の3点をCtrl+クリックで消去して完成。
            ・雑誌名を書いて完成。フォントは雰囲気の似ているものを探してみてください。

            完成形はこちらです。



            (24)アイコンの作成(その22)
            いよいよ最終回です。今回はSettingsに取り組みます。


            まずは背景。濃さの違うグレーのグラデーションでつくってください。グレーは色味が無いので、明暗だけでぴったり色を合わせられるはずです。

            次にギアのバックグラウンドになる濃いグレーの●も作っておきます。

            そうしたらいよいよギアの歯です。Safariでは同じような目盛り線をWord2007のワードアートでつくりましたが、今回はWord2010のワードアートでつくってみます。
            ・テキストボックス→挿入→記号と特殊文字、から、Windings3の文字コード112番の大きな三角形を挿入。
            ・三角形を選択した状態で、フォントの右下の□→詳細設定→倍率、で幅を33%(ドロップダウンメニューから選べます)に縮小。
            ・半角スペースを間に挟みながら三角形を28個テキストボックスの中に並べる。
            ・全部の三角形を選択し、ワードアートのスタイル→文字の効果→変形→枠線に合わせて配置→一番左の上半分の半円を選択、としてギアの歯を半分作成。
            ・文字の輪郭を0.75ポイントとすると、丁度歯車の歯のような厚みになります。
            ・コピーして上下反転し、両端の歯を重ねるようにして一つの円にします。
            ・歯車の歯の内側に沿うように円を描いて、外側の歯車完成。

            内側の歯車もやり方は一緒です。文字の輪郭の太さを調節して、歯の大きさに合わせてください。
            あとは3本のスポークと真ん中の小さな○(1つの円の輪郭と塗りつぶしで描けます)を描いたら出来上がりです。
            余力があれば、上から下に徐々に暗くなるグラデーションを付けると、よりきれいに見えると思います。

            出来上がりはこちら。



            以上で22個のアイコンは終了です。
            次は細かい部分を作っていきます。


            マネしてやってみた、iOS 7のデザインをWordで再現(12)

            0
              JUGEMテーマ:iPhone5

              (21)アイコンの作成(その19)
              次はMaps行きます。


              ここではVideosでつかった図の流し込みのテクニックを使います。手順はこうです。
              ・道路ではない部分を、背景からはみ出した長方形で描く。縁を少し濃いめの色にする。色がなかなか決まらないときは、スクリーンショットを取ってペイントに張り付け、スポイトで吸って、色の編集ダイアログでRGBの値を調べちゃいます。ちょっとずるい気もしますが。
              ・黄色い道をオートシェープのフリーフォームで描く。一回り細目に描く。白い道を渡った向こう側まで描く。
              ・黄色い道をコピーして、先程より一回り太くし、少し色を濃くし、その上にさっきの細目の道を重ねる。
              ・黄色い道に白い道が重なっている部分を、白い長方形で塗りつぶす。
              ・一回り大きい、透明な□を重ねてグループ化。これをクリップボードにコピー。
              ・背景と同じ大きさの図を1枚準備
              ・右クリック→オブジェクトの書式設定→塗りつぶし→塗りつぶし(図またはテクスチャ)→クリップボード、で図を流し込み
              ・引き伸ばし比率の調整で位置を調整。
              これでここまで行きます。


              次は国道標識。テキストボックス→挿入→記号と特殊文字→Webdingsの文字コード100番、30ポイント、とします。
              ここでこの記号を選択して、
              ・ワードアートのスタイル→文字の輪郭→白、0.75ポイント
              ・ホーム→フォント右下の□→詳細設定→倍率130%(これで幅が1.3倍に広がります)
              ・ワードアートのスタイル→文字の塗りつぶし→6連グラデーション(赤赤白白青青)
              ・テキストボックスで番号280を書き、Arial、10ポイント、幅110%
              以上を重ねて国道マークの出来上がりです。

              最後がルート案内マークです。
              ・矢じりマークを、Segoe UI Symbolの文字コード27A4、文字の色白で書く。サイズはフォントサイズで合わせる。
              ・オートシェープの○とオートシェープのL字を使ってナビゲーションラインを描く。縁を少し濃い色にする。

              これら全部を重ねてタイトルをつけるとこんな感じです。



              (22)アイコンの作成(その20)
              次はAppStoreです。


              手順はこちら。
              ・まず背景のグラデーションを作ります。色が決まらなかったら、ペイントでスポイトです。

              ・そうしたら右側のペンから行きます。オートシェープの片側の2つの角を丸めた四角形(四角形シリーズの右から2番目にあります)で、ペンの軸を作成。短い部分も同じ図形の角の丸みを消して、長さを打ち込んで短くすれば使えます。
              ・軸をそれぞれ330°回転させて並べます。
              ・ペン先は、テキストボックス→挿入→記号と特殊文字→Segoe UI Symbolの文字コード1F330、を使います。文字の色を白くして、フォントの(幅の)倍率を60%にしたら、配置→回転、で320°位に回してください。
              ・次に左側の鉛筆に行きます。右側のペンの軸をコピーして、回転角を330°→30°に修正します。
              ・軸の部品の長さを調節して、鉛筆の軸とお尻の消しゴムにします。ペンと鉛筆の軸の太さは同じにしておいてください。
              ・オートシェイプの▲を少し伸ばして鉛筆の先を作り、30°回転させて並べます。
              ・ここで、鉛筆の部品を6個、グループ化しておいてください。

              ・次に横棒状の定規?を描きます。これは単に直線を引いて太さを合わせるだけです。
              ・そうしたら、ここがポイントです。斜めのペンと鉛筆が定規に重なっている部分の両側の陰を描きます。オートシェープのフリーフォームを使い、背景の上端からスタートして、重なりの箇所2か所を通り、一筆書きで背景の下端まで持っていきます。こんな感じです。

              ポイントは、
               - ペンと鉛筆が重なっている場所以外で、定規に線がかぶらないこと
               - 線の最初と最後は背景の縁に垂直に入り、縁にぴったり乗せること。
               - この最初と最後、それからペンと鉛筆の陰の部分は直線で描くこと。曲がってしまったら、右クリック→頂点の編集として曲がった部分の線を右クリックし、線分を伸ばす、とやればまっすぐになります。

              ・さて、これができたら線の色を、背景と同じグラデーションにします。右クリック→オブジェクトの書式設定→線の色→線(グラデーション)です。
              ・次に線の太さをペンの軸より太く設定します。上の図はここまでやった状態になっています。
              ・最後に先程グループ化したペンと鉛筆を選んで、グループの枠を右クリックして最前面に移動してください。これで、ペンと定規の間に影が入りました。

              ・最後に○を描いたら出来上がりです。

              タイトルをつけるとこんな感じです。


              さあいよいよ次回がアイコンの作成最終回です。


              マネしてやってみた、iOS 7のデザインをWordで再現(11)

              0
                JUGEMテーマ:iPhone5

                (19)アイコンの作成(その17)
                今度はGame Centerです。


                今回は新しい技を使います。

                背景はおなじみ真っ白のバージョンです。
                そして、中の泡のような丸を描いて行きます。
                ・オートシェープで枠線無しの○を描きます。
                ・色は、コントロール点4つのグラデーションで、上と下の色を少し変えます。ここで透過性を20%にしておきます。
                ・右クリック→オブジェクトの書式設定から、3-D書式を設定。
                 青い○の設定例は以下の通りです。
                 - 面取り:上、幅18ポイント、高さ9.5ポイント
                 - 質感:メタル
                 - 光源:その他/フラット、角度130°
                 他の色は、○の大きさに合わせて面取りの大きさを調節してください。
                出来た○を順番に重ね、背景の白に乗せて、タイトルをつけたら出来上がり。
                こんな感じです。



                (20)アイコンの作成(その18)
                お次はVideosです。


                背景はおなじみ、連続グラデーションです。黒→黒→緑がかった水色→水色とします。この上にカチンコの白い矢羽模様を載せるのですが、ここで新しいテクニック、図で塗りつぶし、を使います。

                手順は以下の通りです。
                ・矢羽の1枚をオートシェープの平行四辺形でつくります。
                ・コピーして上下反転したら、縦横と斜めの角度を調節してちょっと長めの矢羽を作ります。
                ・コピーペーストで必要枚数矢羽を作ったら、背景より二回りほど大きな四角を描き、線の色無し、塗りつぶし無しの透明状態にして、先程の矢羽とグループ化します。こんな感じです。

                ・このグループを選択して一旦クリップボードにコピーします。(普通にコピーすればOKです)
                ・背景の四角を1枚コピーして用意します。
                ・背景の四角を右クリック→オブジェクトの書式設定→塗りつぶし→塗りつぶし(図またはテクスチャ)、を選びます。
                ・クリップボードボタンをクリックして、先程コピーした矢羽画像を角丸の背景形状に流し込みます。この状態ではまだ矢羽の位置と大きさがあっていないと思います。
                ・最初に作った背景グラデーションに、今、矢羽を流し込んだ透明画像を重ねます。
                ・矢羽を右クリック→オブジェクトの書式設定→塗りつぶし→引き延ばしの比率調整、で、上下左右にマイナスの値を設定し、これらの値を調節して矢羽の位置と大きさを合わせていきます。

                あとはタイトルをつけて完成。出来上がりはこちらです。


                さあ、アイコンはのこり4つです。


                マネしてやってみた、iOS 7のデザインをWordで再現(10)

                0
                  JUGEMテーマ:iPhone5

                  (17)アイコンの作成(その15)
                  次はPhotos行きます。


                  これはこだわり次第でしょうか。私は簡単に行ってしまいました。こんな感じ。
                  ・角丸四角形のフルRで長丸を作ります。
                  ・図形の塗りつぶしで、その他の色、の中から適切な色を選び、透過率50%で設定します。透過率を設定すると色は薄くなりますので、濃いめの色で設定しておく必要があります。また、もともと色が薄い黄色などは、透過率を50%にすると薄すぎてしまいますので、30%程度にしておくなど適宜調整してください。
                  ・一つ長丸を作ったらコピーして、配置→回転→その他の回転、で45°ずつ回転し、それぞれ色を設定してゆきます。
                  ・元の画像に重ねて位置を調節し、背景の四角を後ろに挿入したらOK。
                  ・最後に名前を追加します。

                  出来上がりはこんな感じです。

                  黄色はやっぱりちょっと薄いかなぁ、まいっか☆

                  元ビデオの作者は結構こだわっていて、グラデーションを付けて内側と外側で濃さを変えたりしてました。


                  (18)アイコンの作成(その16)
                  次はPassbookです。


                  背景は3連のグラデーションで一気に行ってしまいましょう。
                  コントロールポイントを各色2点ずつ、合計6点つくって、色と色の間はほとんど重なるように置きます。
                  次にグリーンの部分の凹みは、青で丸を書きます。
                  緑と黄色の間の波波は、緑で小さな丸をいっぱい書くことで模擬します。Segoe UI Symbolの文字コード16EBです。テキストボックスの中に記号として書き込んで、背景の縁から縁までぴっちり埋めてしまいます。その後文字の色を背景の緑に合わせてください。

                  白い小さなアイコンは記号から行きます。
                  ・飛行機:Webdingsの文字コード241を71°回転させます。
                  ・ビデオカメラ:Segoe UI Symbolの文字コード1F3A5
                  それぞれフォントサイズを適切に調節してください。
                  3つ目のコーヒーカップは少し手間を掛けます。
                  ・Segoe UI Symbolの文字コード2615のコーヒーカップをテキストボックスに書きます。
                  ・書いたコーヒーカップを選択して、ALT, I, P, WでWord2007形式のワードアートテーブルを出し、左上のワードアートに変換します。その後、文字の枠線は無しに変更しておいてください。
                  ・書式→配置グループ→回転→左右反転、で持ち手を左に持っていきます。
                  ・後は縦横を適当に伸び縮みさせて大きさを合わせてください。

                  あとは、部品を配置してタイトルをつければ完成です。完成品はこちら。


                  あと6つです。


                  マネしてやってみた、iOS 7のデザインをWordで再現(9)

                  0
                    JUGEMテーマ:iPhone5

                    (15)アイコンの作成(その13)
                    今回は、iTunes Storeです。


                    といっても、この音符は前回のMusicからの使いまわしです。連鈎を塗りつぶした状態でコピーして、上下左右を縮小して大きさを合わせてください。
                    ○は普通にオートシェープで、線の太さ3ポイント位でOK。
                    腕の見せ所はバックのグラデーション位です。

                    出来上がりはこちら。



                    (16)アイコンの作成(その14)
                    次はCameraです。これはちょっと手ごわいです。


                    まず背景を作ってください。グラデーションの色は、パレットにある近い色を選んで、グラデーションのメニューで明るさを少し上下して合わせこんでください。

                    次にカメラですが、ベースは記号で行きます。Segoe UI Symbolの文字コード1F4F7、フォントサイズ60ポイントです。実物より一回り小さくしておくのがポイントです。
                    次に、ワードアートのスタイルから、影を付けて行きます。
                     文字の効果→影→内側→中央の上側(上から光が当たっている状態)
                    と設定してから、ワードアートのスタイルの右下□をクリックしてダイアログボックスを出し、影のメニューから、ぼかし3ポイント、距離2ポイントに設定します。
                    次いで、同じダイアログボックスの、文字の輪郭、から、線(グラデーション)を選び、カメラ本体につけたのと同じグラデーションを指定してやります。すると、カメラのレンズの部分が少し細くなり、本物に近くなります。同時にカメラの本体も一回り大きくなり、これで実物とほぼ同じ大きさになったと思います。

                    その次は、カメラに入っている横線です。背景のグラデーションとぴったり合わせる必要があるので、フリーフォームの線を使います。
                    まず背景の上端の適当なところからスタートして、カメラの上側の横線の横まで線を持ってきます。そこからシフトキーを押しながら水平線を反対側まで引いたら、下に線を伸ばして同様に下側の線を逆向きに引き、最後に背景の下端まで線を持って行ってからダブルクリックして終了します。こんな感じです。

                    その後、この赤線を選択した状態で、図形のスタイルの右下の□をクリックしてダイアログボックスを出します。ここで、線の色から線(グラデーション)を選び、背景と同じグラデーションを設定してやります。最後は明るさで微調整してください。

                    最後に黄色い●を描いて終了です。小さな●の大きさは数字で指定でした。

                    これにタイトルを入れれば出来上がりです。こんな感じ。


                     


                    マネしてやってみた、iOS 7のデザインをWordで再現(8)

                    0
                      JUGEMテーマ:iPhone5

                      (13)アイコンの作成(その11)
                      では今度はSafari行ってみましょう。見た目より簡単です。


                      背景の白と●はいいでしょう。マルは元画像と半分重ねた状態で、境目が判らなくなるようにグラデーションを合わせます。

                      そしてポイントの目盛りです。これはWord2007のワードアートの機能を使います。Word2010のワードアートでもできますが、微調整が非常に難しいので、こちらをお勧めします。手順はこうなります。
                      ・テキストボックスに記号と特殊文字メニューから、長い棒(Segoe UI Symbolの文字コード2503)と短い棒(文字コード2579)を交互に5,6個置く。テキストボックスの塗りつぶしは無しにしておく。
                      ・書いた棒線を選択して、Alt, I, P, Wと押すとWord2007のワードアートギャラリーが出るので、そこから適当に1つ選んで適用する。
                      ・作成したワードアートをクリックすると、ワードアートツールのリボンが出現する。ここで、形状の変更→枠線に合わせて配置→○、を選択
                      ・サイズを18.78mm×18.78mmに設定。
                      ・テキストの編集で、長い棒を36本、間に短い棒を35本に変更。
                      ・間隔を、より狭く、に変更。
                      ・ワードアートの文字の塗りつぶしは白、文字の輪郭白0.25ポイントとする。
                      ・1か所短い棒が欠けている場所がコンパスの針の所に来るように、ワードアートツールの配置グループ→回転→回転角度を調節する(私の場合315°でした)
                      ・きれいに配置したらテキストボックスの枠線を無しにして完了。

                      コンパスの針は半分ずつオートシェイプの▲を引き延ばして作ります。半分作ったらコピーして反転させて色を変えればOK。

                      出来上がりはこうなります。


                      1本1本線を描くことを考えたら、簡単ですよね。
                      アイコンは全部で22個、これで半分です。


                      (14)アイコンの作成(12)
                      次はMusicです。割と簡単です。


                      背景は、ちょっと紫がかった赤からオレンジっぽい赤へのグラデーションで決めます。

                      音符はまた記号で、Segoe UI Symbolの文字コード266Cにある、2連の16分音符を塗りつぶして使います。隣に2連の8分音符もあるのですが、傾きが逆なので変形したときに音符の●の部分の傾きがきつくなってしまいますので、16分音符を使います。
                      変形は、ワードアートのスタイル→文字の効果→変形、で、一番左下にある右肩上がり変形を使います。これを選ぶと画面にピンクのひし形が出現しますので、これを動かして傾きを変えます。
                      幅と高さもワードアートの枠線を引っ張って調節してください。
                      最後に16分音符の2本の連鈎の間をフリーフォームで四角く囲って白く塗りつぶします。

                      出来上がりはこちら。



                      calendar

                      S M T W T F S
                        12345
                      6789101112
                      13141516171819
                      20212223242526
                      2728293031  
                      << October 2019 >>

                      アクセスカウンタ

                      合計:
                      今日:
                      昨日:

                      selected entries

                      categories

                      archives

                      recent comment

                      • ホームページをリニューアルするの巻(19)−Googleウェブサイト翻訳ツールを組み込む
                        てちくん
                      • ホームページをリニューアルするの巻(19)−Googleウェブサイト翻訳ツールを組み込む
                        てちくん
                      • ホームページをリニューアルするの巻(19)−Googleウェブサイト翻訳ツールを組み込む
                        小田きく江
                      • ロリポブログでGoogleにサイトマップを登録する際の注意事項
                        てちくん
                      • ロリポブログでGoogleにサイトマップを登録する際の注意事項
                        suraugi
                      • いそべぇのペーパークラフトを作る(初級編)(12)
                        てちくん
                      • いそべぇのペーパークラフトを作る(初級編)(12)
                        だべえ
                      • noomでマイナス12kgのダイエットに成功!
                        Yoko

                      recommend

                      recommend

                      recommend

                      ドール デザートメーカー ヨナナス901
                      ドール デザートメーカー ヨナナス901 (JUGEMレビュー »)

                      結構高いんです、でも欲しいんです!

                      links

                      profile

                      書いた記事数:173
                      最近の更新日:2017/01/30

                      search this site.

                      others

                      mobile

                      qrcode

                      powered

                      無料ブログ作成サービス JUGEM

                      Google Adsense

                      楽天ブックス

                      楽天