タグ別アーカイブ: Mac

初心者でもAdobe Dreamweaver CCで楽にウェブサイトができる!

001

初心者でもAdobe Dreamweaver CCで楽にウェブサイトができる!

BPDスタッフのたけしたてつおです。

ここだけの話ですが、
実は私、BPDのデザイン担当なのですが、
ホームページHTML)が、あまり得意ではありません。

「ソースコードやタグコードなど…」すべて英字で記述していくので、
普段日本語しか目にしない私としては、見た目が…

パッと見ただけで、頭が痛くなります。w( ̄Д ̄;)wワオッ!!

しかし、やらないといけない…

でも、楽にWebサイトを構築したい!!

ということで、
今回、楽にHTML/CSS等のコーディングができるという噂の
「Adobe Dreamweaver CC」でWebサイトを構築してみようとおもいます。
※Adobe Dreamweaver CCは、アドビ社が提供しているWebサイト構築のソフトウェアで、
楽にHTML/CSS等のコーディングができるそうです。

そして今回から構築していくウェブサイトは私の個人的さいと「てつお使えるイラストぷらす」が昔に作成したままのダサイデザインなのでこちらをイケテルデザインのウェブサイトへと修正していきたいと思います。

第一回目 新規ドキュメントを制作

では早速、「Adobe Dreamweaver CC」を起動して新規ドキュメントを制作してみます。

※私はMacで作業をしていますので、説明画像はMacの画像です。
Windowsの方は見た目が少し違うと思いますが、大体一緒だと思います。

1.新規ドキュメントを制作
左の項目から「新規ドキュメント」を選択します。
ドキュメントタイプから「HTML」を選択します。
フレームワークは「なし」のタブを選択し、ドキュメントタイプから「HTML5」を選択します。
フレームワークのタイトルを入力して制作をクリックします。
003

2.編集画面を変更
ツールバーを「ライブ」から「分割」に変更して、ライブビューとコードビューを表示させます。
005

3.ドキュメントを保存
メニューの「ファイル」→「保存」→ドキュメントに名前を付けて保存で、「新規サイト」をクリックします。
サイト設定画面が開きますので、各項目を記入して保存します。
サイト名:「サイトの名前」
ローカルサイトフォルダー:「保存するフォルダを選択」
ファイル名:「index.html」
006

今回制作したウェブページの基本的なコードについて

※新規ドキュメントを制作するとウェブページの基本のコードが自動的に制作されます。
<!doctype html>:
HTML5のDOCTYPE宣言です。(使用するHTMLのバージョンを指定します。)
<html>〜</html>:
「これはHTML文章です」と宣言するタグです。
<head>~</head>:
このタグ内にウェブページに関する情報や設定などを記述します。
<meta charset=”UTF-8″>:
エンコードの種類です。
<title>〜</title>:
このタグ内にページのタイトルを記述します。
<body>〜</body>:
このタグ内にウェブサイトで表示するコンテンツなどを記述します。

おまけ

今回、今回制作したウェブページの基本的なコードについてでタグを書いていますが、
「<」と「>」はタグの記号ということなので、
文字として表示する場合はそのまま使用することはできません。
「<」は「&lt;」、「>」は「&gt;」と入力すれば表示されます。

以上
「初心者でもAdobe Dreamweaver CCで楽にウェブサイトができる!」第1回目でした。

更新は遅いですが地道に更新していく予定です。

CI企業部ランディング・キャラクターデザイン・その他様々なデザインの依頼はベストプラクティスデザインへ
CI企業部ランディング・キャラクターデザイン・その他様々なデザインの依頼はベストプラクティスデザインへ

Illustratorのアピアランスを使って歯車を作る方法

029

Illustratorのアピアランスを使って歯車を作る方法

BPDスタッフのたけしたてつおです。

今回ピクトグラム歯車を制作するので、簡単に出来る方法を模索。

ま、普通にパスを分割などで簡単にはできますが、
後で歯車の数を増やしたいので今回はイラストレータ(Illustrator ※イラストレーターとは、アドビシステムズ社が販売するドロー系アプリケーションソフトのことです。)で歯車をアピアランスを使って制作する方法を自分の備忘録としてこのデザインのスタッフブログに書き留めておきます。

アピアランスを使わずに制作することも可能ですが、
アピアランスを使うと完成後に変更可能なので、
今回はアピアランスを使って制作する方法です。

Illustratorで歯車をアピアランスを使って制作する手順

では、順に

  • 【楕円型ツール】で10mm×10mmの円を描く。
  • 001

  • 【ウインドウ】>【アピアランス】を表示する。
  • 002

  • 【アピアランス】で【塗り】を選択し、ウインドウ下の>【fx】>【パスの変形】>【ジグザグ】を選択し、【オプション】の数値を入力、【ポイント】は滑らかにを選択する。
  • 004

  • 【アピアランス】で一番上の【パス】を選択し、ウインドウ下の>【左から2つ目四角いボタン】をクリックして塗りを追加。
  • 006

  • 【アピアランス】>【fx】>【パスの変形】>【変形】で【拡大・縮小】の数値を入力する。
  • 008

  • さらに、【アピアランス】で一番上の【パス】を選択し、ウインドウ下の>【左から2つ目四角いボタン】をクリックして塗りを追加。
  • 009

Illustratorでパスファインダーを使って作業する

  • 【アピアランス】で一番上の【パス】を選択し、>【fx】>【パスファインダー】>【切抜き】(※ダイアログが表示されるので、OK(無視)する。)
  • 010
    011

  • 追加した塗りを選択したまま、【アピアランス】の切抜きを一番下へ移動する。
  • 012

  • 出来上がった歯車を選択したまま、【アピアランス】ウインドウ下の>【右から2つ目のボタン】をクリックして塗りを複製する。
  • 015

  • 複製した塗りのを分かり易いように色を変更して、上から2番目へ移動する。
  • 017

  • 変形をクリックし、【拡大・縮小】の数値を入力する。
  • 018

  • 【アピアランス】で一番上の【パス】を選択し、ウインドウ下の>【fx】>【パスファインダー】>【合流】と【前面オブジェクトで型抜き】を追加する。
  • 021
    019

  • 追加した【合流】と【前面オブジェクトで型抜き】を一番下へ移動する。
  • 024

  • 完成です。
  • 025

アピアランスで作業すると完成後に自由に変更ができる

完成したオブジェクトは【アピアランス】で歯車の数など、後から色々と変更が可能です。
参考に大きな歯車と小さな歯車を作ってみました。
029

アピアランスを使った制作の感想

今回、アピアランスを使って歯車を制作いましたが、
いつもはパスを使ってパスファインダーを使って制作してるので、
アピアランスを使っての作業が非常に手間がかかります。
「めんどくさい!!」っていうのが正直な感想です。
でも、制作後にアピアランスの数値を変更するだけで色々と変更できるのはとても良いですね。

私は次からは普通にパスを使ってパスファインダーを使って制作ですかね…
でも、この記事を読んでいる方にはアピアランスを使っての制作をオススメします。
新しい機能はどんどん使っていくことは大事な事ですよ。
面倒でも何回もトライすれば、自分のスキルになるので頑張ってください!

以上
Illustratorのアピアランスを使って歯車を作る方法でした〜
最後まで読んで頂いた方、
長々とおつきあいありがとうございました。

疲れた〜

CI企業部ランディング・キャラクターデザイン・その他様々なデザインの依頼はベストプラクティスデザインへ
CI企業部ランディング・キャラクターデザイン・その他様々なデザインの依頼はベストプラクティスデザインへ

MacでAutomatorを使ってファイル名に拡張子【.png】を一括で追加する方法とAutomatorで作成したワークフローの編集方法

001

MacでAutomatorを使ってファイル名に拡張子【.png】を一括で追加する方法

BPDスタッフのたけしたてつおです。

イラストレーター(アドビシステムズ社のIllustrator)で作成したピクトグラムをバッチ(自動化)で販売用のPNGに書き出したデータ名には拡張子が付きません。
(なぜでしょうかね?調べておきます。)

そこで、
ファイル名に一つ一つ【.png】の拡張子をコピー&ペーストするのも面倒なので、
MacのアプリケーションのAutomatorを使ってファイル名に拡張子【.png】を一括で追加する方法を自分の備忘録としてこのデザインのスタッフブログに書き留めておきます。

では、順に
MacでAutomatorを使ってファイル名に拡張子【.png】を一括で追加する方法

1.【アプリケーション】>【その他】>【Automator.app】を起動>【サービス】を選択。

002

2. 次の選択項目を受け取るから【ファイルまたはフォルダ】を選択。

003

3. 検索対象から>【Finder】を選択。

004

4. 左側のアクションから>【Finder項目の名前を変更】を右側へドラッグアンドドロップ。

005

5. ダイアログボックスが表示されます。>【追加しない】をクリック。

006

6. 【Finder項目の名前を変更】の項目を【テキストを追加】に変更>追加するテキスト欄に【png】(※.は入力しない)を入力し、【拡張子として追加】を選択。

007

008

7. 【ファイル】>【保存】>【サービスを別名で保存】で名前をつけて保存。(Automatorを終了)

009

8. ここからはFinderでの操作です。
Finderで拡張子を追加するファイルを表示します。

9. 変換対象のファイルを全て選択し>右クリック(Macのシステム環境設定のマウスの福ボタンにチェックを入れると右クリックが使用可能になります。設定しない場合は、control+クリック)>【サービス】>項目に先程保存したサービス名が表示されているので、そのサービス名を選択。

010

011

10. これで一瞬で全てのファイルに拡張子が付きます。

012

Automatorでは、この他にもいろんな作業を自動化することができます。
興味のある方はぜひ、お試しください。

Automatorで作成したワークフローの編集方法

上記Automatorの作業後に作成したワークフローの名前の変更や削除が必要になったので、
こちらも備忘録としてデザインのスタッフブログに書き留めておきます。

ワークフローは隠しファイルの中に保存されていて、普段は表示されていません。
【アップルマーク(左上のリンゴマーク)】>【システム環境設定】>【キーボード】>左項目からサービスを選択、右側にAutomatorで保存した名前がありますので、その項目を右クリック(control+クリック)>【Finderに表示】を選択。
すると、【Finder】にライブラリフォルダの中の【Services】フォルダが表示されます。
その中に先程のAutomatorで作成したワークフローがありますので、名前を変更したり、ワークフローを削除(ゴミ箱へ移動)したりできます。

他に、【Finder】>メニューの移動をoption+クリックでライブラリが表示できるので、そちらで【Services】フォルダの中を編集しても同じです。
(アップルサポートで教えてもらった。わからない時はアップルサポートへ連絡すると詳しく教えてくれるので助かります。)

ターミナルを使う方法

インターネットでMacで隠しファイルを表示させる方法にターミナルを使う方法がありましたが、
アップルサポートに問い合わせて確認したところ、ターミナルで隠しファイルを表示方法はおすすめしないということでした。(必要なファイルまで削除してしまったりする場合があるそうなので、Macにあまり詳しくない場合はターミナルは使用しない方がいいということです。)

念のためにターミナルを使ってMacで隠しファイルを表示させる方法も書いておきます。
(自己責任で行ってくださいね。)

【アプリケーション】フォルダの【ユーティリティ】の中に入っている【ターミナル】を起動。
起動したら次のコマンドを打ち込みます。

defaults write com.apple.finder AppleShowAllFiles -boolean true
これを打ったら【Enter】キー>次に
killall Finder
を打って【Enter】キー
作業はこの2つだけです。
これで隠しファイルが見えるようになります。
再度非表示にするためにはターミナルで以下のコマンドを打ち込みます。

defaults delete com.apple.finder AppleShowAllFiles
これを打ったら【Enter】キー>次に
killall Finder
を打って【Enter】キー
これで隠しファイルが見えなくなります。
(くれぐれも言いますけど、自己責任で行ってくださいね。)

以上
MacでAutomatorを使ってファイル名に拡張子【.png】を一括で追加する方法と
Automatorで作成したワークフローの編集方法でした。

CI企業部ランディング・キャラクターデザイン・その他様々なデザインの依頼はベストプラクティスデザインへ
CI企業部ランディング・キャラクターデザイン・その他様々なデザインの依頼はベストプラクティスデザインへ